DOM节点
一般来说我们分为三个大类 元素节点(标签) / 文本节点(标签内的文字) / 属性节点(标签上的属性)
- 元素节点:通过 getElementBy... 获取到的都是元素节点
- 属性节点:通过 getAttribute 获取到的都是属性节点
- 文本节点:通过 innerText 获取到的就是元素的文本节点
获取节点
获取子级节点
-
获取某一节点下,所有的子一级节点,获取到的是一个伪数组
语法: 元素.childNodes
-
获取某一节点下,所有的子一节元素节点,获取到的是一个伪数组
语法: 元素.children
-
获取某一节点下子一级的 第一个节点
语法: 元素.firstChild
-
获取某一节点下子一级的 最后一个节点
语法: 元素.lastChild
-
获取某一节点下子一级的 第一个元素节点
语法: 元素.firstElementChild
-
获取某一节点下子一级的 最后一个元素节点
语法: 元素.lastElementChild
<body>
<div>
<p>你好</p>
<span>测试文本</span>
<h1>JS 是世界上最优美的语言</h1>
</div>
<script>
// 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>你好</p>.<span>测试文本</span>.<h1>JS 是世界上最优美的语言</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>
</script>
</body>
获取兄弟节点
-
获取对应的 下一个兄弟节点
语法: 元素.nextSibling
-
获取对应的 上一个兄弟节点
语法: 元素.previousSibling
-
获取对应的 下一个兄弟元素节点
语法: 元素.nextElementSibling
-
获取对应的 上一个兄弟元素节点
语法: 元素.previousElementSibling
<body>
<div>
<p>你好</p>
<span>测试文本</span>
<h1>JS 是世界上最优美的语言</h1>
</div>
<script>
// 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
</script>
</body>
获取父级节点
语法: 元素.parentNode
获取元素的所有属性节点
语法: 元素.attributes
<body>
<div>
<p>你好</p>
<span>测试文本</span>
<h1 id="h1_box" class="h1_box_cla" test="QF001" num="100">JS 是世界上最优美的语言</h1>
</div>
<script>
// 0. 获取节点1
var oH = document.querySelector('h1')
// 1. parentNode
console.log(oH.parentNode)//div
// 2. attributes
console.log(oH.attributes)//这样会出现伪对象显示如下:{0: id, 1: class, 2: test, 3: num, id: id, class: class, test: test, num: num, length: 4}
console.log(oH.attributes[0])//显示id="h1_box"
节点属性
-
nodeType节点类型
节点中的一个属性 nodeType 能够区分当前节点是什么类型
1 -> 元素节点
2 -> 属性节点
3 -> 文本节点
-
nodeName节点名称
元素节点 -> 大写的标签名 (LI / UL / DIV)
属性节点 -> text (属性名)
文本节点 -> #text
-
nodeValue 节点的值
元素节点 -> 没有 nodeValue 也就会输出 null
属性节点 -> 对应的属性值
文本节点 -> 对应的文本内容
<body>
<ul text="我是 UL 的一个属性">
<li>你好</li>
</ul>
<script>
// 0. 获取元素
var oUl = document.querySelector('ul')
// 1. 元素节点
var eleNode = oUl.firstElementChild//li
// 2. 属性节点
var attrNode = oUl.attributes[0]//获取ul的第一个属性
// 3. 文本节点
var textNode = oUl.firstChild
// 1. nodeType节点类型
console.log('元素节点: ', eleNode.nodeType)//1
console.log('属性节点: ', attrNode.nodeType)//2
console.log('文本节点: ', textNode.nodeType)//3
// 2. nodeName节点名称
console.log('元素节点: ', eleNode.nodeName)//LI
console.log('属性节点: ', attrNode.nodeName)//text
console.log('文本节点: ', textNode.nodeName)//#text
// 3. nodeValue节点的值
console.log('元素节点: ', eleNode.nodeValue)//null
console.log('属性节点: ', attrNode.nodeValue)//"我是 UL 的一个属性"
console.log('文本节点: ', textNode.nodeValue)//显示的是空格+换行
</script>
</body>