1、节点
加载 HTML 页面时,web 浏览器生成一个树型结构,用来表示页面内部结构,称之为 DOM树,DOM 将这种树型结构理解为由节点组成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 家谱树 -->
<p>11111111</p>
<ul id="ul1">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
</body>
</html>
父级.children:返回元素节点(在IE8及以下,会返回注释节点,在IE9及以下,正常返回)
父级.childNodes:在IE9及以上,返回的包括换行节点,在IE8及以下,只返回元素节点
返回的都是一个类数组、伪数组,是一个对象。它们有长度,有下标,可以通过下标获取某一个
var li = ul.children;
console.log(li);
var li = ul.childNodes;
console.log(li);
3、节点基本属性
节点.nodeType
节点.nodeName
节点.nodeValue
<p>11111111</p>
<ul id="ul1">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
<script>
var p = document.querySelector('p');
var ul = document.getElementById('ul1');
var li = ul.childNodes;
// 节点.nodeType:节点类型,用1--12的数字来代表12种类型
// 1:元素节点 2:属性节点 3:文本节点 9:文档节点
console.log(p.nodeType); // 1
console.log(ul.nodeType); // 1
for (var i = 0; i < li.length; i++) {
console.log(li[i].nodeType);
}
// 节点.nodeName:节点名称,元素节点就是大写标签名,文本节点就是#text
console.log(p.nodeName); // P
console.log(ul.nodeName); // UL
for (var i = 0; i < li.length; i++) {
console.log(li[i].nodeName);
}
// 节点.nodeValue:节点内容
// 它认为文本节点才有内容,元素节点没有内容
console.log(p.nodeValue);
console.log(p.childNodes[0].nodeValue); // 11111111
console.log(p.innerText); // 11111111
</script>
4、父节点
元素.parentNode 返回父级
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
var box3 = document.getElementById('box3');
console.log(box3.parentNode); // box2
console.log(box3.offsetParent);
<ul id="list">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
<script>
var ul = document.getElementById('list');
// 第一个子节点
// 父级.firstChild : 在标准浏览器有可能返回的是文本节点,在IE8及以下,只返回第一个元素节点
// 父级.firstElementChild : 在标准浏览器返回第一个元素节点,而在IE8及以下,没有这个方法
// console.log(ul.firstChild);
// console.log(ul.firstElementChild);
var first = ul.firstElementChild || ul.firstChild;
first.style.backgroundColor = 'red';
// -----------------------------
// 最一个子节点
// 父级.lastChild
// 父级.lastElementChild
var last = ul.lastElementChild || ul.lastChild;
last.style.backgroundColor = 'pink';
// -----------------------------
// 下一个兄弟节点
// 元素.nextSibling
// 元素.nextElementSibling
var next = first.nextElementSibling || first.nextSibling;
next.style.backgroundColor = 'green';
// -----------------------------
// 上一个兄弟节点
// 元素.previousSibling
// 元素.previousElementSibling
var prev = last.previousElementSibling || last.previousSibling;
prev.style.backgroundColor = 'yellow';
</script>
1、创建节点
创建标签:document.createElement(标签名);
创建文本:document.createTextNode(文本);
2、追加节点
父元素.appendChild(子元素);
子元素添加到父元素中,放到最后
3、插入节点
父元素.insertBefore(要插入的节点, 参考的节点);
要插入的节点放在参考元素的前面
4、删除节点
父元素.removeChild(被删除的元素)
返回被删除的元素
5、替换节点
父元素.replaceChild(新的节点,被替换的节点);
6、克隆节点
被克隆的元素.cloneNode(布尔);
返回克隆出来的新节点,如果参数为true,则克隆子孙节点,如果为false,则只克隆当前这个标签