了解javascript中的Dom操作


Posted in Javascript onMay 27, 2019

DOM(Document Object Model):

结点的概念:整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容。

结点类型

1.元素结点
2.属性结点
3.文本结点

结点的注意点:

1.文本节点和属性结点都看作元素结点的子结点
2.我们一般所说的结点指的就是元素结点,将html标签看作是一个对象,并用“结点”称呼它
3.结点的关系有:父子关系、兄弟关系

1.获取元素结点

1)直接获取

① document.getElementById()
② document.getElementsByName()
③ document.getElementsByTagName()

2)间接获取

父子关系
firstChild lastChild childNodes

子父关系
parentNode

兄弟关系
nextSibling previousSibling

2.操作属性结点

1)通过对象“.”属性,来操作属性
优:可以动态获取用户修改的属性值
缺:不能获取自定义属性的值

2)getAttribute("key") setAttribute("key","value") removeAttribute("key")
优:可以获取自定义属性的值
缺:不能动态获取用户修改的属性值

3.处理文本结点

1) 通过对象.innerText 获取标签内部的文本信息

2) 通过对象.innerHTML 获取标签内部的HTML代码

4.动态改变DOM结构

1)创建一个结点对象
document.createElement("标签名")

2)(父结点)追加子结点对象
fatherNode.appendChild(子结点对象)

3)(父结点)在指定结点前添加子结点
fatherNode.insertBefore(新结点对象,参考结点对象)

4)(父结点)替换旧的子结点对象
fatherNode.replaceChild(新结点对象,旧结点对象)

5)(父结点)删除旧子结点对象
fahterNode.removeChild(旧结点对象)

5.动态改变元素的CSS样式(不重要)

1)我们通过对象.style属性操作对象的css样式:样式名称中有“-”将“-”去掉,并将“-”后一个字母改为大写来作为样式的新名称

2)我们希望通过class为一个对象添加一个class样式,添加属性名是className,而并非class(class是js的关键字,并能作为属性名存在)

<script type="application/javascript">
//1.获取元素结点
//1)直接获取
// ① document.getElementById()
function getEle1(){
var obj=document.getElementById("userid")
console.log(obj)
}
// ② document.getElementsByName()
function getEle2() {
// 获取的是一个数组
var obj = document.getElementsByName("fav");
console.log(obj)
}
// ③ document.getElementsByTagName()
function getEle3(){
var obj = document.getElementsByTagName("input");
console.log(obj);
}
function getEle4(){
var father = document.getElementById("regForm");
var sons = father.childNodes;
// 获取指定位置
console.log(sons[1]);
// firstChild 获取第一个
console.log(father.firstChild);
// lastChild 获取最后一个
console.log(father.lastChild);
}
// 子父关系 parentNode
function getEle5(){
var son = document.getElementById("userid");
console.log(son.parentNode)
}
// 兄弟关系 nextSibling 下一个对象 
//previousSibling当前结点的前一个结点返回紧邻当前元素之前的元素
function getEle6(){
var bro = document.getElementById("userid");
console.log(bro.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling);
bro.previousSibling
}
function getField1(){
var obj = document.getElementById("nickid");
//console.log(obj.type);
//将昵称的样式改为password
//obj.type = "password";
var objval = obj.getAttribute("name");
console.log(objval);
obj.setAttribute("abcd","5678");
obj.removeAttribute("type");
// 可以获取改变后的属性
console.log(obj.value)
// 只能获取初始定义的属性
console.log(obj.getAttribute("value"));
}
// 1) 通过对象.innerText 获取标签内部的文本信息
function getText1(){
var myDiv = document.getElementById("myDiv");
console.log(myDiv.innerText);
}
// 2) 通过对象.innerHTML 获取标签内部的HTML代码
function getText2(){
var myDiv = document.getElementById("myDiv");
console.log(myDiv.innerHTML);
}
// 添加文本
function getText3(){
var myDiv = document.getElementById("myDiv");
myDiv.innerText = "<img src='1.jpg' />";
}
// 添加代码
function getText4(){
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "<img src='1.jpg' />";
}
</script>
</head>
<body>
<button onclick="getEle1();">点我测试1</button>
<button onclick="getEle2();">点我测试2</button>
<button onclick="getEle3();">点我测试3</button>
<button onclick="getEle4();">点我测试4</button>
<button onclick="getEle5();">点我测试5</button>
<button onclick="getEle6();">点我测试6</button>
<hr/>
<button onclick="getField1();">属性测试1</button>
<hr/>
<button onclick="getText1();">文本测试1</button>
<button onclick="getText2();">文本测试2</button>
<button onclick="getText3();">文本测试3</button>
<button onclick="getText4();">文本测试4</button>
<hr/>
<form id="regForm">
用户名:<input id="userid" type="text" name="username"><br/>
密码:<input type="password" name="password"><br/>
昵称:<input id="nickid" type="text" name="nickname" value="大名鼎鼎" abcd="1234" ><br/>
性别:男<input type="radio" name="gender" value="nan">  
女<input type="radio" name="gender" value="nv"><br/>
爱好:狗<input type="checkbox" name="fav" value="dog">
猫<input type="checkbox" name="fav" value="cat">
羊驼<input type="checkbox" name="fav" value="yt"><br/>
<input type="submit" value="注册">
</form>
<div id="myDiv"><b>hello</b></div>
</body>

动态改变DOM结构

1)创建一个结点对象

document.createElement("标签名")

<script type="application/javascript">
function changeDom1(){
var ipt=document.createElement("input");
}
</script>
<button onclick="changeDom1();">创建结点对象</button>

2)(父结点)追加子结点对象

fatherNode.appendChild(子结点对象)

function changeDom2() {
var father = document.getElementById("regForm");
var ipt = document.createElement("input");
ipt.type = "text";
father.appendChild(ipt);
}
<button onclick="changeDom2();">追加子结点对象</button>

3)(父结点)在指定结点前添加子结点

fatherNode.insertBefore(新结点对象,参考结点对象)

function changeDom3() {
var father = document.getElementById("regForm");
var refChild = document.getElementById("brid");
var newChild = document.createElement("input");
newChild.type = "text";
father.insertBefore(newChild, refChild);
}
<button onclick="changeDom3();">插入子结点对象</button>

4)(父结点)替换旧的子结点对象

fatherNode.replaceChild(新结点对象,旧结点对象)

function changeDom4() {
var father = document.getElementById("regForm");
var refChild = document.getElementById("brid");
var newChild = document.createElement("input");
newChild.type = "text";
father.replaceChild(newChild, refChild);
}
<button onclick="changeDom4();">替换子结点对象</button>

5)(父结点)删除旧子结点对象

function changeDom5() {
var father = document.getElementById("regForm");
var refChild = document.getElementById("nickid");
father.removeChild(refChild);
}
<button onclick="changeDom5();">删除子结点对象</button>

动态改变元素的CSS样式(不重要)

<style type="text/css">
.addstyle{
color: red;
font-size: 72px;
text-decoration: underline;
}
</style>
<script type="application/javascript">
/*
5.动态改变元素的css样式
1)我们通过对象.style属性操作对象的css样式:样式名称中有“-”将“-”去掉,并将“-”后一个字母改为大写来作为样式的新名称
2)我们希望通过class为一个对象添加一个class样式,添加属性名是className,而并非class(class是js的关键字,并能作为属性名存在)
*/
function fontGreater(){
var myDiv = document.getElementById("myDiv");
console.log(myDiv);
myDiv.style.fontSize = "36px";
myDiv.style.fontFamily = "宋体";
}
function changeFont(){
var myDiv = document.getElementById("myDiv");
myDiv.className = "addstyle";
//myDiv.setAttribute("class","addstyle");
}
</script>
</head>
<body>
<button onclick="fontGreater()">放大字体</button>
<button onclick="changeFont()">添加样式</button>
<div id="myDiv" >你好世界!</div>
</body>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript几种形式的树结构菜单
May 10 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 Javascript
js精确的加减乘除实例
Nov 14 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
详解Vue.directive 自定义指令
Mar 27 Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 Javascript
vue-router定义元信息meta操作
Dec 07 Vue.js
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 #Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 #Javascript
深入浅出了解Node.js Streams
May 27 #Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 #Javascript
vue项目前端错误收集之sentry教程详解
May 27 #Javascript
了解javascript中变量及函数的提升
May 27 #Javascript
基于vue实现一个禅道主页拖拽效果
May 27 #Javascript
You might like
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
写的htc的数据表格
2007/01/20 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
详解python中__name__的意义以及作用
2019/08/07 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
外语学院毕业生的自我鉴定
2013/11/28 职场文书
竞聘副主任科员演讲稿
2014/01/11 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android