获取子节点
<div> //text
<p>你好</p> //text
<span>测试文本</span> //text
<h1>JS 是世界上最优美的语言</h1> //text
</div>
// 0. 获取元素
var oDiv = document.querySelector('div')
// 1. childNodes
console.log(oDiv.childNodes)
/**
* 拿到的是一个伪数组, 里边有 7 个节点
* [0]: text 从 <div> 一直到 <p> 中间有一个换行和一堆空格 这是一个文本节点
* [1]: p 这个就是 p 标签, 他是第二个节点, 这是一个 元素节点
* [2]: text 从 </p> 一直到 <span> 中间有一个换行和一堆空格 这是一个文本节点
* ....
*/
// 2. children
// console.log(oDiv.children) // 这里只有 div 内部的标签 p span h1
// 3. firstChild
console.log(oDiv.firstChild) // #text
// 4. lastChild
console.log(oDiv.lastChild) // #text
// 5. firstElementChild
console.log(oDiv.firstElementChild)//<p>你好</p>
// 6. lastElementChild
console.log(oDiv.lastElementChild)// <h1>JS 是世界上最优美的语言</h1>
获取兄弟节点
<div> //text
<p>你好</p> //text
<span>测试文本</span> //text
<h1>JS 是世界上最优美的语言</h1> //text
</div>
// 0. 获取元素
var oSpan = document.querySelector('span')
// 1. nextSibling
console.log(oSpan.nextSibling) // #text
// 2. previousSibling
console.log(oSpan.previousSibling) // #text
// 3. nextElementSibling
console.log(oSpan.nextElementSibling) // h1
// 4. previousElementSibling
console.log(oSpan.previousElementSibling) // p
获取父节点
节点属性
<ul text="我是 UL 的一个属性">
<li>你好</li>
</ul>
// 0. 获取元素
var oUl = document.querySelector('ul')
// 1. 元素节点
var eleNode = oUl.firstElementChild
// 2. 属性节点
var attrNode = oUl.attributes[0]
// 3. 文本节点
var textNode = oUl.firstChild
// 1. nodeType
console.log('元素节点: ', eleNode.nodeType)
console.log('属性节点: ', attrNode.nodeType)
console.log('文本节点: ', textNode.nodeType)
// 2. nodeName
console.log('元素节点: ', eleNode.nodeName)
console.log('属性节点: ', attrNode.nodeName)
console.log('文本节点: ', textNode.nodeName)
// 3. nodeValue
console.log('元素节点: ', eleNode.nodeValue)
console.log('属性节点: ', attrNode.nodeValue)
console.log('文本节点: ', textNode.nodeValue)
创建元素节点 创建文本节点
// 创建元素节点
var divBox = document.createElement('div')
console.log(divBox);
// 创建文本节点
var text = document.createTextNode('我是一段文本')
console.log(text);
插入节点尾部或前面
<div class="box">
<p>我是通过 HTML 手写出来的 P 标签</p>
</div>
// 1.1 创建一个元素节点
var oDiv = document.createElement('div')
// 1.2 创建一个文本节点 (了解)
var oText = document.createTextNode('我是通过 JS 创建出来的文本节点')
// 1.3 将刚才创建的文本节点, 添加到元素节点内 元素.appendChild(要添加的节点)
oDiv.appendChild(oText)
// 2. 向页面中增加一个节点
// 0. 获取元素
var myDiv = document.getElementsByClassName('box')[0]
// 2.1 元素.appendChild(要添加的节点)
myDiv.appendChild(oDiv)
删除节点
修改节点
克隆节点