随手笔记07-有关DOM的操作

一、DOM节点的获取

1.DOM介绍(节点的介绍) Web浏览器在解析页面的时候，会将页面描绘为一个倒立的树状结构（DOM树）， DOM树由节点构成

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

2.节点的种类：元素节点(标签) 属性节点 文本节点 注释节点…

属性节点 nodeType 为1 属性节点 nodeType 为2 文本节点 nodeType 为3（文本节点包括文字、空格、换行等） 实际开发中，节点操作主要操作的是元素节点

3.节点之间的关系：父子 兄弟 父节点 子节点 兄弟节点

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

4.节点查找：

(1)父节点：

子节点.parentNode 返回的是某节点的父节点，返回的是最近的一个父节点 没有指定的父节点返回null <div class="demo"> <div class="box"> <span class="erweima">×</span> </div> </div> <script> // 1. 父节点 parentNode var erweima = document.querySelector('.erweima'); // var box = document.querySelector('.box'); // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null console.log(erweima.parentNode); </script>

(2)子节点：

节点.childNodes （所有子节点） 返回一个包含元素节点和文本节点的集合父节点.children （子元素节点） 只返回子元素节点 <ul> <li>我是li</li> <li>我是li</li> <li>我是li</li> <li>我是li</li> </ul> <script> // DOM 提供的方法（API）获取 var ul = document.querySelector('ul'); var lis = ul.querySelectorAll('li'); // 1. 子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等 console.log(ul.childNodes); console.log(ul.childNodes[0].nodeType); console.log(ul.childNodes[1].nodeType); // 2. children 获取所有的子元素节点 也是我们实际开发常用的 console.log(ul.children); </script>

5.节点对象的属性

nodeValue 节点值（一般用于获取文本节点的值，元素节点返回null） nodeType 节点类型 1(元素节点) 2(属性节点) 3(文本节点) nodeName 节点名称（文本节点没有节点名称）

6.其它节点属性

firstChild 第一个子节点，找不到返回null，同样包含所有的节点 lastChild 最后一个子节点，找不到返回null，同样包含所有的节点 firstElementChild 返回第一个元素子节点 找不到返回null lastElementChild 返回第一个元素子节点 找不到返回null 注意：上两个方法有兼容性问题，IE9以上才支持 nextSibling 紧邻着的下一个兄弟节点,找不到返回null，同样包含所有的节点 previousSibling 紧邻的上一个兄弟节点，找不到返回null，同样包含所有的节点 nextElementSibling 返回当前元素的下一个兄弟元素节点，找不到返回null previousElementSibling 返回当前元素的上一个兄弟节点，找不回返回null

实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？ 解决方案： 1.如果想要获取第一个子元素节点，使用parentNode.children[0]; 2.如果想要获取最后一个子元素节点， 使用parentNode.children[parentNode.children.length - 1]; <ol> <li>我是li1</li> <li>我是li2</li> <li>我是li3</li> <li>我是li4</li> <li>我是li5</li> </ol> <script> var ol = document.querySelector('ol'); // 1. firstChild 第一个子节点 不管是文本节点还是元素节点 console.log(ol.firstChild); console.log(ol.lastChild); // 2. firstElementChild 返回第一个子元素节点 ie9才支持 console.log(ol.firstElementChild); console.log(ol.lastElementChild); // 3. 实际开发的写法 既没有兼容性问题又返回第一个子元素 console.log(ol.children[0]); console.log(ol.children[ol.children.length - 1]); </script>

问：如何解决关于nextElementSibling兼容性问题？ 答：自己封装一个兼容性的函数

function getNextElementSibling(element) { var el = element; while (el = el.nextSibling) { if (el.nodeType === 1) { return el; } } return null; }

二、DOM的操作

操作DOM无非就是增删改查 关于查上面已经说过了 1.创建节点

createElement() 创建元素节点createTextNode() 创建文本节点 innerHTML innerText

2.插入节点

1.appendChild() 在父节点中追加子节点 2.insertBefore(newNode,oldNode) 在指定节点前，插入子节点

3.删除节点

1.removeChild() 删除子节点，返回删除的节点。 2.remove() 删除节点自身（兼容性）

4.替换节点

replaceChild(newNode,oldNode) 替换指定子节点

5.复制节点

cloneNode(flag) flag 默认为false(不复制子节点) true（复制子节点）也称深拷贝

<ul> <li>1111</li> <li>2</li> <li>3</li> </ul> <script> var ul = document.querySelector('ul'); // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容 // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容 var lili = ul.children[0].cloneNode(true); ul.appendChild(lili); </script>

6.节点查询

A.documen.getElementById(id) 节点对象 如果没有返回null B.document.getElementsByClassName 集合(类数组，伪数组) C.getElementsByTagName(tagName) 集合

document 调用 在全文中查找node调用，在指定节点下再查找

D. document.getLElementsByName() 集合 E. document.querySelector(selector) 根据选择器查找元素 (注意兼容性) 注意：该方法，只取第一个节点 F.document.querySelectorAll(selector) 根据选择器找元素 ，返回值为集合

7.样式操作

赋值： 节点.style.样式名=值; 取值： 1）节点.style.样式名 只能获取行内样式 2）getComputedStyle(节点,null) 既能取行内又能取样式表 IE低版本使用 currentStyle

8.属性操作

取值： 节点.属性名

节点[属性名]节点.getAttribute(属性名)

赋值：

节点.属性名节点[属性名]节点.setAttribute(属性名,属性值);

注意：在属性和样式操作中，名称的变形 background-color —>backgroundColor class—>className 等 但是，若使用getAttribute和setAttribute则不需要对属性进行变形 例如：img.getAttribute(‘class’);

三、表格

属性： caption tBodies tHead tFoot rows 行 cells 列

<script> // 1.先去准备好学生的数据 var datas = [{ name: '魏璎珞', subject: 'JavaScript', score: 100 }, { name: '弘历', subject: 'JavaScript', score: 98 }, { name: '傅恒', subject: 'JavaScript', score: 99 }, { name: '明玉', subject: 'JavaScript', score: 88 }, { name: '大猪蹄子', subject: 'JavaScript', score: 0 }]; // 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行 var tbody = document.querySelector('tbody'); // 遍历数组 for (var i = 0; i < datas.length; i++) { // 1. 创建 tr行 var tr = document.createElement('tr'); tbody.appendChild(tr); // 2. 行里面创建单元格td 单元格的数量取决于每个对象里面的属性个数 // 使用for in遍历学生对象 for (var k in datas[i]) { // 创建单元格 var td = document.createElement('td'); // 把对象里面的属性值 datas[i][k] 给 td td.innerHTML = datas[i][k]; tr.appendChild(td); } // 3. 创建有删除2个字的单元格 var td = document.createElement('td'); td.innerHTML = '<a href="javascript:;">删除 </a>'; tr.appendChild(td); } // 4. 删除操作 开始 var as = document.querySelectorAll('a'); for (var i = 0; i < as.length; i++) { as[i].onclick = function() { // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸) node.removeChild(child) tbody.removeChild(this.parentNode.parentNode) } } </script>