1. 获取子节点
-
childNodes所有子节点（元素、注释、文本、换行符）。
<ul>
<!-- 注释 -->
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>
<script>
var ul = document.getElementsByTagName('ul')[0];
console.log(ul.childNodes);
</script>
结果为
NodeList(9) [text, comment, text, li.li1, text, li.li2, text, li.li3, text]。
-
firstChild第一个子节点（元素、注释、文本、换行符）。
<script>
console.log(ul.firstChild);
</script>
结果为
#text。
-
lastChild**最后一个子节点（元素、注释、文本、换行符）。
<script>
console.log(ul.firstChild);
</script>
结果为
#text。
2. 获取子元素节点
-
children获取所有子元素节点，有兼容问题（低版本IE【6-8】会和childNodes一样）。
<ul>
<!-- 注释 -->
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>
<script>
var ul = document.getElementsByTagName('ul')[0];
console.log(ul.children);
</script>
会正确获得所有子节点，结果为
HTMLCollection(3) [li.li1, li.li2, li.li3]。
-
firstElementChild获取第一个子元素
<script>
console.log(ul.firstElementChild);
</script>
结果为
<li class="li1">1</li>。
-
lastElementChild获取最后一个子元素
<script>
console.log(ul.lastElementChild);
</script>
结果为
<li class="li1">1</li>.
3. 获取父元素节点
-
parentNode获取父元素
<ul>
<!-- 注释 -->
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>
<script>
var li = document.getElementsByTagName('li')[0];
console.log(li.parentNode);
</script>
结果为
<ul>...</ul>. 包含了<ul>中的 所有子元素和注释（相当于上方代码完整输出）。
-
offsetParent获取具有定位属性的最近父元素
<div style="position: relative">
<ul>
<!-- 注释 -->
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>
</div>
<script>
console.log(li.offsetParent);
</script>
结果为：
<div style="position: relative">...</div>.同样包含<div>中的所有元素&注释。
4. 获取同级节点
-
previousSibling获取上一个兄弟节点（元素|注释|文本|换行符）
<ul>
<!-- 注释 -->
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>
<script>
var li = document.getElementsByTagName('li')[0];
console.log(li.previousSibling);
</script>
结果为
#text.
- nextSibling 获取下一个兄弟节点
<script>
console.log(li.nextSibling);
</script>
结果为
#text.
5. 获取同级元素节点
-
previousElementSibling获取上一个兄弟元素节点
<ul>
<!-- 注释 -->
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>
<script>
var li = document.getElementsByTagName('li')[1]; //<== 变为1
console.log(li.previousElementSibling);
</script>
结果是
<li class="li1">1</li>.
-
nextElementSibling获取下一个兄弟元素节点
<script>
console.log(li.nextElementSibling);
</script>
结果是
<li class="li3">3</li>.
带有Element的方法，低版本IE不兼容（为了和IE区别做出了便利性的牺牲）。
6. 节点的增删改查
-
创建节点
createTextNode()，createElement()
document.createTextNode('文本'); // 创建文本节点
document.createElement('div'); // 创建节点
-
插入节点
appendChild()，insertBefore()
parent.appendChild(newNode); // 父元素末尾插入元素
oldNode.parentNode.insertBefore(newNode,oldNode); // 指定元素前插入节点
实例1（在body末尾插入元素）
<script>
var div = document.createElement('div'); // 创建节点
div.id = "my-div"; // 添加属性1
div.className = "box"; // 添加属性1
document.body.appendChild(div); // 在body末尾插入div
</script>
插入节点.png
实例2 （在div前插入元素）
<div id="div"></div>
</body>
<script>
var div = document.getElementById('div');
var p = document.createElement('p');
div.parentNode.insertBefore(p,div);
</script>
插入节点2.png
-
替换节点
replaceChild()，innerHTML，innerText
oldNode.parentNode.replaceChild(newNode, oldNowde);
element.innerHTML; // 获取元素中的所有节点
element.innerText; // 获取元素中的文本节点
element.innerHTML= '<div class="box">文本</div>';
// 覆盖元素中的所有内容，可设置元素节点&文本节点^
element.innerText = '文本';
// 覆盖元素中的所有内容，只能设置文本节点,但可以以文本输出标签。
实例1
<p>
<span>需要被替换的节点</span>
</p>
<script>
var span = document.getElementsByTagName('span')[0];
var b = document.createElement('b');
span.parentNode.replaceChild(b,span);
</script>
替换节点.png
实例2
<p>
<span>需要被替换的节点</span>
<span>需要被替换的节点</span>
<span>需要被替换的节点</span>
</p>
<script>
var p = document.getElementsByTagName('p')[0];
p.innerHTML = '<b class="bold">插入节点</b>';
// p.innerText = '插入文本';
</script>
innerHTML&innerText会覆盖元素中的全部内容，并且只能同时使用一种，如果将注释取消，结果就是<p>插入文本</p>，按顺序覆盖，可以p.innerHTML = '插入文本<b></b>'。虽然inner这种方式简单，但速度会比较慢。
-
删除节点
removeChild()
delNode.parentNode.removeChild(delNode);
实例
<p><p>
<script>
var p = document.getElementsByTagName('p')[0];
p.parentNode.removeChild(p);
</script>
插入和修改同级元素都会调用父元素执行，所以会出现
.parentNode
-
复制节点
cloneNode()
element.cloneNode(false) // 只克隆节点
element.cloneNode(false) // 克隆节点和其内部的所有节点
实例
<p><!-- 注释 -->克隆节点</p>
<script>
var p = document.getElementsByTagName('p')[0];
console.log(p.cloneNode(false));
console.log(p.cloneNode(true));
</script>
克隆节点.png
网友评论