网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM 中,节点使用 node 来表示。
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问,所有 HTML 元素(节点)均可被修改,也可以 创建或删除。
一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个 基本属性。
- 元素节点 nodeType 为 1
- 属性节点 nodeType 为 2
- 文本节点 nodeType 为 3 (文本节点包含文字、空格、换行等)
父级节点
node.parentNode
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>
子节点
parentNode.children
parentNode.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>
第一个子元素节点
parentNode.chilren[ 0 ]
最后一个子元素节点
parentNode.chilren[ parentNode.chilren.length - 1 ]
兄弟节点
下一个兄弟节点
node.nextSibling
nextSibling 属性可返回某个元素之后紧跟的节点(处于同一树层级中),找不到则返回null。同样,也是包含所有的节点。
下一个兄弟元素节点
node.nextElementSibling
nextElementSibling 返回当前元素下一个兄弟元素节点,找不到则返回null。
nextSibling 属性与 nextElementSibling 属性的差别:
- nextSibling 属性返回元素节点之后的兄弟节点(包括文本节点、注释节点);
- nextElementSibling 属性只返回元素节点之后的兄弟元素节点(不包括文本节点、注释节点);
上一个兄弟节点
node.previousSibling
previousSibling 属性可返回某节点之前紧跟的节点(处于同一树层级),找不到则返回null。同样,也是包含所有的节点.
上一个兄弟元素节点
node.previousElementSibling
previousElementSibling 返回当前元素上一个兄弟节点,找不到则返回null。
创建节点
document.createElement('tagName')
document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在, 是根据我们的需求动态生成的,所以我们也称为动态创建元素节点
。
添加节点
末尾添加
node.appendChild(child)
node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素。
指定元素前面添加
node.insertBefore(child, 指定元素)
node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素
<ul>
<li>123</li>
</ul>
<script>
// 1. 创建节点元素节点
var li = document.createElement('li');
// 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3. 添加节点 node.insertBefore(child, 指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
// 4. 我们想要页面添加一个新的元素 : 1. 创建元素 2. 添加元素
</script>
删除节点
node.removeChild(child)
从DOM中删除一个子节点。返回删除的节点。
- 注意
node
是child
的父节点.
复制节点
var dupNode = node.cloneNode(deep)
- node : 将要被克隆的节点
- dupNode 克隆生成的副本节点
- deep可选,是个boolean值, 默认为空或者false
默认为false,表示浅拷贝 只克隆该节点本身,不克隆节点里面的子节点
,如果设为true,表示深拷贝,将节点本身以及节点内部的子节点全部克隆
-
作用: 复制节点
-
参数: deep, 可选。决定是深拷贝,还是浅拷贝。
-
返回值:dupNode 克隆生成的副本节点