DOM编程④ -- 操作节点

DOM编程④ -- 操作节点

文章目录

​​什么是节点操作​​​​节点概述​​​​节点层级​​

​​父级节点​​​​子级节点​​​​兄弟节点​​

​​创建节点​​​​添加节点​​​​删除节点​​​​复制节点​​​​三种动态创建元素区别​​​​DOM重点核心​​

​​创建​​​​增​​​​删​​​​改​​​​查​​​​属性操作​​​​事件操作​​

什么是节点操作

获取元素通常使用两种方式：

①利用 DOM 提供的方法获取元素

document.getElementById()document.getElementsByTagName()document.querySelector 等逻辑性不强、繁琐

②利用节点层级关系获取元素

利用父子兄节点关系获取元素逻辑性强， 但是兼容性稍差

这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单。

节点概述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

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

元素节点 nodeType 为 1属性节点 nodeType 为 2文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）

我们在实际开发中，节点操作主要操作的是元素节点

节点层级

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

父级节点

node.parentNode

parentNode 属性可返回某节点的父节点，注意是最近的一个父节点如果指定的节点没有父节点则返回 null

子级节点

1. parentNode.childNodes（标准）

parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为​​即时更新​​的集合。

注意： 返回值里面包含了所有的子节点，包括元素节点，文本节点等。 如果只想要获得里面的元素节点，则需要专门处理。 所以我们一般不提倡使用childNodes

var ul = document. querySelector(‘ul’);for(var i = 0; i < ul.childNodes.length;i++) {if (ul.childNodes[i].nodeType == 1) { // ul.childNodes[i] 是元素节点 console.log(ul.childNodes[i]);}}

也就是要进行一层类型判断(筛选过程)

所以推荐使用：

2. parentNode.children（非标准）

parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回。

虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

3. parentNode.firstChild

firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。

4. parentNode.lastChild

lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。

5. parentNode.firstElementChild

firstElementChild 返回第一个子元素节点，找不到则返回null。

6. parentNode.lastElementChild

lastElementChild 返回最后一个子元素节点，找不到则返回null。

注意：这两个方法有兼容性问题，IE9 以上才支持。

实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？

解决方案：

如果想要第一个子元素节点，可以使用 parentNode.chilren[0]如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1]

兄弟节点

1. node.nextSibling

nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。

2. node.previousSibling

previousSibling 返回当前元素上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。

3. node.nextElementSibling

nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null

4. node.previousElementSibling

previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null

注意：这两个方法有兼容性问题， IE9 以上才支持。

解决办法： 自己封装一个兼容性的函数

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

创建节点

.createElement('tagName')

document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为​​动态创建元素节点​​。

添加节点

1. node.appendChild(child)

node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素。

2. node.insertBefore(child, 指定元素)

node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。

例如：

• 123

我们想要页面添加一个新的元素 ：

创建元素添加元素

删除节点

node.removeChild(child)

node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点

复制节点

node.cloneNode()

node.cloneNode() 方法返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点

注意：

如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。

三种动态创建元素区别

document.write()element.innerHTMLdocument.createElement()

区别：

document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂createElement() 创建多个元素效率稍低一点点，但是结构更清晰

总结：不同浏览器下，innerHTML 效率要比 creatElement高

例如：

//innerHTML创建元素 var arr = []; for (var i = 0; i <= 100; i++) { arr.push('百度'); } inner.innerHTML = arr.join(''); // document.createElement() 创建元素 var create = document.querySelector('.create'); for (var i = 0; i <= 100; i++) { var a = document.createElement('a'); create.appendChild(a); }

DOM重点核心

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

创建

document.writeinnerHTMLcreateElement

增

appendChildinsertBefore

删

removeChild

改

主要修改dom的元素属性，dom元素的内容、属性, 表单的值等

修改元素属性： src、href、title等修改普通元素内容： innerHTML 、innerText修改表单元素： value、type、disabled等修改元素样式： style、classNam

查

主要获取查询dom的元素

DOM提供的API 方法： getElementById、getElementsByTagName 古老用法 不太推荐H5提供的新方法： querySelector、querySelectorAll 提倡利用节点操作获取元素： 父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling)提倡使用

属性操作

主要针对于自定义属性。

setAttribute：设置dom的属性值getAttribute：得到dom的属性值removeAttribute移除属性

事件操作

给元素注册事件， 采取 事件源.事件类型 = 事件处理程序

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。