DOM
DOM
就是我们
html
结构中一个一个的节点构成的。不光我们的标签是一个节点,我们写的文本内容也是一个节点,注释,包括空格都是节点。
DOM
节点分三种:元素节点、文本节点、属性节点。
元素节点就是我们获取到的标签元素;标签里面的文本就是文本节点、标签上的属性就是属性节点。
元素节点
就是我们各种获取方法获取到的标签元素
document.getElementById();
document.querySeletor();
document.querySeletorAll();
属性节点
我们通过获取属性的方法获取到的标签属性
标签元素.getAttribute();
文本节点
我们通过
innerText
获取到的文本内容就是文本节点
获取节点
![](https://i-blog.csdnimg.cn/blog_migrate/accdda397c7ebf37b010b3fe01350ab8.png)
获取所有子节点childNodes
<body>
<div id="box">
<p> <span>span标签</span> </p>
</div>
</body>
<script type="text/javascript">
var Odiv = document.getElementById("box");
console.log(Odiv.childNodes);
</script>
说明:获取到的时所有节点,包含文本节点、元素节点。元素节点只有子元素,不包括子元素里面的内容
![](https://i-blog.csdnimg.cn/blog_migrate/c4d0ef01680b10430c884341d67ae171.png)
看图得知:第一个节点是文本节点,代表标签中间的换行和空格,第二个节点是元素节点,第三个节点是文本节点,又是标签中间的换行和空格
获取所有子元素节点children
<body>
<div id="box">
<p class="part"> <span>span标签</span> </p>
</div>
</body>
<script type="text/javascript">
var Odiv = document.getElementById("box");
</script>
说明:只获取元素节点,不包含文本节点
![](https://i-blog.csdnimg.cn/blog_migrate/b9cb86e96a88fc192ec3102060baec4d.png)
看图得知:获取到的是一个伪数组,是一个集合。
获取第一个子节点fifirstChild
<body>
<div id="box">
<p class="part"> <span>span标签</span> </p>
<a href="#">链接</a>
</div>
</body>
<script type="text/javascript">
var Odiv = document.getElementById("box");
console.log(Odiv.firstChild);
</script>
说明:只获取第一个节点,其实就相当于
childNodes
中的第一个。
![](https://i-blog.csdnimg.cn/blog_migrate/dfe03bdebb9780360c2fc6cab876731c.png)
看图得知:第一个节点是文本节点,相当于
Odiv.childNodes[0]
。因为
div
和
p
标签中间有换行和空格
获取最后一个子节点
<body>
<div id="box">
<p class="part"> <span>span标签</span> </p>
<a href="#">链接</a>
</div>
</body>
<script type="text/javascript">
var Odiv = document.getElementById("box");
console.log(Odiv.lastChild);
</script>
说明:只获取最后一个节点,其实就相当于
childNodes
中的最后一个。
![](https://i-blog.csdnimg.cn/blog_migrate/4104e2378f66d345281671d71a1ce1fe.png)
看图得知:第一个节点是文本节点,相当于
Odiv.childNodes[childNodes.length
-
1]
。
获取第一个子元素节点fifirstElementChild
<body>
<div id="box">
<p class="part"> <span>span标签</span> </p>
<a href="#">链接</a>
</div>
</body>
<script type="text/javascript">
var Odiv = document.getElementById("box");
console.log(Odiv.firstElementChild);
</script>
说明:只获取元素节点,不会是文本节点。
![](https://i-blog.csdnimg.cn/blog_migrate/de2fa5dea5474bf7d8b55ba12a92e681.png)
看图得知:获取到的时第一个
子元素
节点。
获取最后一个子元素节点lastElementChild
<body>
<div id="box">
<p class="part">
<span>span标签</span>
</p>
<a href="#">链接</a>
</div>
</body>
<script type="text/javascript">
var Odiv = document.getElementById("box");
console.log(Odiv.lastElementChild);
</script>
说明:只获取元素节点,不会是文本节点。
![](https://i-blog.csdnimg.cn/blog_migrate/29c7aa1025b4ae9d5f67ccc2e09a39e2.png)
看图得知:获取到的时最后一个子元素节点。
获取下一个兄弟节点nextSibling
<body>
<div id="box">
<p class="part">段落标签</p>
<a href="#">链接</a>
<span>span标签</span>
</div>
</body>
<script type="text/javascript">
var oA = document.querySelector("a");
console.log(oA.nextSibling);
</script>
说明:获取的是节点,有可能时文本节点。