-
DOM
的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点 -
什么是分类,比如我们在获取元素的时候,通过各种方法获取到的我们叫做元素节点(标签节点)
-
比如我们标签里面写的文字,那么就是文本节点
-
写在每一个标签上的属性,就是属性节点
3-1 元素节点
-
我们通过
getElementBy...
获取到的都是元素节点
3-2 属性节点
-
我们通过
getAttribute
获取的就是元素的属性节点
3-3 文本节点
-
我们通过
innerText
获取到的就是元素的文本节点
3-4 获取节点
childNodes
:获取某一个节点下 所有的子一级节点
<body>
<div>
<p>hello</p>
</div>
<script>
// 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点
var oDiv = document.querySelector('div')
console.log(oDiv.childNodes)
/*
NodeList(3) [text, p, text]
0: text
1: p
2: text
length: 3
__proto__: NodeList
*/
</script>
</body>
-
我们会发现,拿到以后是一个伪数组,里面有三个节点
-
一个
text
:从<div> 一直到 <p>
中间有一个换行和一堆空格,这个是第一个节点,是一个文本节点 -
一个
p
:这个p
标签就是第二个节点,这个是一个元素节点 -
一个
text
:从</p> 一直到 </div>
中间有一个换行和一堆空格,这个是第三个节点,是一个文本节点 -
这个时候就能看到我们有不同的节点类型了
children
:获取某一节点下所有的子一级 元素节点
<body>
<div>
<p>hello</p>
</div>
<script>
// 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点
var oDiv = document.querySelector('div')
console.log(oDiv.children)
/*
HTMLCollection [p]
0: p
length: 1
__proto__: HTMLCollection
*/
</script>
</body>
-
我们发现只有一个节点了,因为
children
只要元素节点 -
div 下面又只有一个元素节点,就是
p
-
所以就只有一个,虽然只有一个,但是也是一个 伪数组
firstChild
:获取某一节点下子一级的 第一个节点
<body>
<div>
<p>hello</p>
</div>
<script>
// 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点
var oDiv = document.querySelector('div')
console.log(oDiv.firstChild) // #text
</script>
</body>
- 这个是只获取一个节点,不再是伪数组了
-
获取的是第一个
-
第一个就是
<div> 一直到 <p>
的那个换行和空格,是个文本节点
-
-
lastChild
:获取某一节点下子一级的 最后一个节点
<body>
<div>
<p>hello</p>
</div>
<script>
// 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点
var oDiv = document.querySelector('div')
console.log(oDiv.lastChild) // #text
</script>
</body>
- 只获取一个节点,不再是伪数组
-
获取的是最后一个
-
最后一个就是
</p> 一直到 </div>
之间的换行和空格,是个文本节点
-
-
firstElementChild
:获取某一节点下子一级 第一个元素节点
<body>
<div>
<p>hello</p>
</div>
<script>
// 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点
var oDiv = document.querySelector('div')
console.log(oDiv.firstElementChild) // <p>hello</p>
</script>
</body>
-
只获取一个节点,不在是伪数组
-
获取的是第一个 元素节点
-
第一个元素节点就是
p
标签,是一个元素节点
lastElementChild
:获取某一节点下子一级 最后一个元素节点
<body>
<div>
<p>hello</p>
<p>world</p>
</div>
<script>
// 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点
var oDiv = document.querySelector('div')
console.log(oDiv.lastElementChild) // <p>world</p>
</script>
</body>
-
只获取一个节点,不在是伪数组
-
获取的是最后一个 元素节点
-
最后一个元素节点是
<p>world</p>
,是一个元素节点
nextSibling
:获取某一个节点的 下一个兄弟节点
<body>
<ul>
<li id="a">hello</li>
<li id="b">world</li>
<li id="c">!!!</li>
</ul>
<script>
// 这个 oLi 获取的是页面中的 li 元素,就是一个元素节点
var oLi = document.querySelector('#b')
console.log(oLi.nextSibling) // #text
</script>
</body>
- 只获取一个节点,不在是伪数组
-
获取的是
id="b"
这个li
的下一个兄弟节点 -
因为
id="b"
的下一个节点,是两个li
标签之间的换行和空格,所以是一个文本节点
-
previousSibling
:获取某一个节点的 上一个兄弟节点
<body>
<ul>
<li id="a">hello</li>
<li id="b">world</li>
<li id="c">!!!</li>
</ul>
<script>
// 这个 oLi 获取的是页面中的 li 元素,就是一个元素节点
var oLi = document.querySelector('#b')
console.log(oLi.previousSibling) // #text
</script>
</body>
-
只获取一个节点,不在是伪数组
-
获取的是
id="b"
这个li
的上一个兄弟节点 -
因为
id="b"
的上一个节点,是两个li
标签之间的换行和空格,所以是一个文本节点
nextElementSibling
:获取某一个节点的 下一个元素节点
<body>
<ul>
<li id="a">hello</li>
<li id="b">world</li>
<li id="c">!!!</li>
</ul>
<script>
// 这个 oLi 获取的是页面中的 li 元素,就是一个元素节点
var oLi = document.querySelector('#b')
console.log(oLi.nextElementSibling) // <li id="c">!!!</li>
</script>
</body>
-
只获取一个节点,不在是伪数组
-
获取的是
id="b"
这个li
的下一个兄弟元素节点 -
因为
id="b"
的下一个兄弟元素节点就是id="c"
的li
,是一个元素节点
previousElementSibling
:获取某一个节点的 上一个元素节点
<body>
<ul>
<li id="a">hello</li>
<li id="b">world</li>
<li id="c">!!!</li>
</ul>
<script>
// 这个 oLi 获取的是页面中的 li 元素,就是一个元素节点
var oLi = document.querySelector('#b')
console.log(oLi.previousElementSibling) // <li id="a">hello</li>
</script>
</body>
-
只获取一个节点,不在是伪数组
-
获取的是
id="b"
这个li
的上一个兄弟元素节点 -
因为
id="b"
的上一个兄弟元素节点就是id="a"
的li
,是一个元素节点
parentNode
:获取某一个节点的 父节点
<body>
<ul>
<li id="a">hello</li>
<li id="b">world</li>
<li id="c">!!!</li>
</ul>
<script>
// 这个 oLi 获取的是页面中的 li 元素,就是一个元素节点
var oLi = document.querySelector('#b')
console.log(oLi.parentNode) // <ul>...</ul>
</script>
</body>
-
只获取一个节点,不在是伪数组
-
获取的是当前这个
li
的父元素节点 -
因为这个
li
的父亲就是ul
,所以获取到的就是ul
,是一个元素节点
attributes
:获取某一个 元素节点 的所有 属性节点
<body>
<ul>
<li id="a" a="100" test="test">hello</li>
</ul>
<script>
// 这个 oLi 获取的是页面中的 li 元素,就是一个元素节点
var oLi = document.querySelector('#a')
console.log(oLi.attributes)
/*
NamedNodeMap {0: id, 1: a, 2: test, id: id, a: a, test: test, length: 3}
0: id
1: a
2: test
length: 3
a: a
id: id
test: test
__proto__: NamedNodeMap
*/
</script>
</body>
-
获取的是一组数据,是该元素的所有属性,也是一个伪数组
-
这个
li
有三个属性,id
/a
/test
三个,所以就获取到了这三个