DOM 对元素的操作+节点操作+属性操作+事件操作
对于JavaScript，为了能够使JavaScript操作HTML、JavaScript就有了一套自己的dom编程接口
对于HTML，dom使得html形成一棵dom树。包含文档、元素、节点
我们获取过来的DOM元素是一个对象（object），所以称为文档对象模型
关于dom操作，我们主要针对于元素的操作，主要有创建、增、删、改、查、属性操作、事件操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>节点操作</title>
</head>
<body>
<!-- 节点的优点 -->
<div>我是div</div>
<span>我是span</span>
<ul>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
</ul>
<div class="demo">
<div class="box">
<span class="erweima"></span>
</div>
</div>
<script>
//为什么要学节点操作呢？
//获取元素通常使用两种方式：
//1.利用DOM提供的方法获取元素
//document.getElementById()、document.getElementsByTagName()、document.querySelector()等
//逻辑性不强、繁琐
//2.利用节点层级关系获取元素
//利用父子节点关系获取元素
//逻辑性强，但是兼容性稍差
//两种方式都可以获取节点，但节点操作更简单
//页面中所有元素都叫做节点（空格、换行都是节点，算作文本节点
//所有节点都可通过JavaScript访问，所有HTML元素（节点）均可被修改，创建删除
//节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性
//元素节点 nodeType为1 属性节点nodeType为2 文本节点nodeType为3（文本节点包含文字、空格、换行等）
//实际开发中，节点操作主要操作的是元素节点
//节点层级：利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系
//1.父级节点 node.parentNode
var erweima=document.querySelector('.erweima');
console.log(erweima.parentNode);//找二维码的爹，结果获取到爹：box
//注意：得到离元素最近的父级节点(亲爸爸)，如果找不到父节点就返回为null
//1.子节点 childNodes 所有的子节点包含元素节点 文本节点等等
var ul=document.querySelector('ul');
console.log(ul.childNodes);//4个li元素节点+5个空格（文本）节点
//parent.childNodes(标准) 返回包含指定节点的子节点集合，该集合为即时更新的集合
//注意：返回值里包含所有的子节点，包括元素节点、文本节点等
//如果只想要获得里面的元素节点，则需要专门处理，所以我们一般不提倡使用childNodes
//parentNode.children（非标准） 是一个只读属性，返回所有的子元素节点，它只返回子元素节点，其余节点不返回（重点掌握）
//虽然children是一个非标准，但是各个浏览器都支持，所以我们放心使用啦
//2.children获取所有的子元素节点，实际开发常用
console.log(ul.children);
//节点操作之第一个子元素和最后一个子元素
//parentNode.firstChild firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点
//parentNode.lastChild lastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点
console.log(ul.firstChild);
console.log(ul.lastChild);
//parentNode.firstElementChild 返回第一个子元素节点，找不到则返回null
//parentNode.lastElementChild 返回最后一个子元素节点，找不到则返回null
//注意这两种方法有兼容性问题，IE9以上才支持。
console.log(ul.firstElementChild);
console.log(ul.lastElementChild);
//好烦呐,实际开发中,firstChild和lastChild包含其他节点,操作不方便,而firstElementChild和lastElementChild又有兼容性问题，那我们如何获取第一个子元素节点或最后一个子元素节点呢？
//实际开发的写法：既没有兼容性问题又返回第一个子元素
console.log(ul.children[0]);
console.log(ul.children[3]);
console.log(ul.children[ul.children.length-1]);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
<script>
//兄弟节点
//1.node.nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null，同样，也是包含所有的节点
var div = document.querySelector('div');
console.log(div.nextSibling);
//2.node.previousSibling 返回当前元素上一个兄弟节点，找不到则返回null，同样，也是包含所有的节点
var span = document.querySelector('span');
console.log(span.previousSibling);
//3.node.nextElementSibling返回当前元素下一个兄弟元素节点，找不到则返回null
console.log(div.nextElementSibling);
//4.node.previousElementSibling 返回当前元素上一个兄弟元素节点，找不到则返回null
//注意:这两个方法有兼容性问题,IE9以上才支持
console.log(span.previousElementSibling);
//如何解决兼容性问题？
//自己封装一个兼容性的函数
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
</script>
</body>
</html>
创建：document.write element.innerHTML() document.createElement()
区别：document.write()直接内容写入页面的内容流，但是文档流执行完毕，会导致页面全部重绘(不咋地用)。innerHTML()是将内容写入某个DOM节点，不会导致页面全部重绘，创建多个元素效率更高(不要拼接字符串，采取数组形式拼接)，结构稍复杂。createElement()创建多个元素效率低一些，但结构更清晰。
总结：不同浏览器下，innerHTML效率要比createElement高。
增：appendChild insertBefore
<script>
//创建节点 document.createElement('tagName')
//此方法创建由tagName指定的HTML元素，因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点
//1.创建节点元素节点
var li=document.createElement('li');
//添加节点 2. node.appendChild(child) node是父级 child是子级 后面追加元素 类似于数组中的push
//此方法将一个节点添加到指定父节点的子节点列表末尾。类似于CSS里面的after伪元素
var ul=document.querySelector('ul');
ul.appendChild(li);
//3.node.insertBefore(child,指定元素)
//node.insertBefore()方法将一个节点添加到父节点的指定子节点前面，类似于css里面的before伪元素
var lili=document.createElement('li');
ul.insertBefore(lili,ul.children[0]);
//4.我们想要页面添加一个新的元素：1.创建元素 2.添加元素
</script>
删：removeChild
<body>
<button>删除</button>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>光头强</li>
</ul>
<script>
//node.removeChild(child) 从DOM中删除一个子节点，返回删除的节点
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
btn.onclick = function () {
if (ul.children.length == 0) {
this.disabled = true;//按钮禁用
} else {
ul.removeChild(ul.children[0]);//ul.children(获取所有子元素节点)
}
}
</script>
</body>
改：主要修改dom的元素属性，dom元素的内容、属性、表单的值等
1.修改元素属性：src、href、title等
2.修改普通元素内容：innerHTML、innerText
3.修改表单元素：value、type、disabled等
4.修改元素样式：style、className
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: #7FFFD4;
}
.change {
background-color: aqua;
color: #00FFFF;
font-size: 25px;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="change">文本</div>
<script>
//修改样式属性
//通过JS修改元素的大小、颜色、位置等样式
//1.element.style 行内样式操作 样式比较少或者功能简单的情况下使用
//2.element.className 类名样式操作
var div = document.querySelector('div');
div.onclick = function () {
//div.style里面的属性 采用驼峰命名法
this.style.backgroundColor = 'black';
this.style.width = '280px';
//使用className修改样式属性 样式修改较多，可以采取操作类名方式更改元素样式
//当前元素类名改成change
this.className = 'change';
}
</script>
</body>
</html>
查：主要获取dom的元素
1.DOM提供的API方法：getElementById、getElementsByTagName古老用法不大推荐使用哦
2.H5提供的新方法：querySelector、querySelectorAll 提倡！！！！！！！！
3.利用节点操作获取元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling） 提倡滴！！！！！！！
属性操作：主要针对于自定义属性
1.setAttribute：设置dom的属性值
2.getAttribute：得到dom的属性值
3.removeAttribute：移出属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="demo" index='1' class="nav"></div>
<script>
//1.获取属性值
//element.属性 获取属性值
var div=document.querySelector('div');
console.log(div.id);
//element.getAttribute('属性');
console.log(div.getAttribute('id'));
//区别：element.属性 获取内置属性值（元素本身自带的属性）
//element.getAttribute('属性');主要获得自定义的属性（标准）我们程序员自定义的属性
console.log(div.getAttribute('index'));
console.log(div.index);//果真结果就不明确呢
//2.设置属性值
//element.属性='值' 设置内置属性值
div.id='smallDemo';
console.log(div.id);
div.className='navs';
//element.setAttribute('属性','值');
div.setAttribute('index','111');//代码里果然改完了呢
div.setAttribute('class','footer');//class特殊
//3.移出属性
//element.removeAttribute('属性');
div.removeAttribute('index');
</script>
</body>
</html>
事件操作：给元素注册事件，采取 事件源.事件类型=事件处理程序( 见下一篇 https://www.cnblogs.com/xy-fhh/p/15527799.html ）
浙公网安备 33010602011771号