DOM基本操作、节点树和元素节点树

最新推荐文章于 2021-08-13 22:29:42 发布

原创最新推荐文章于 2021-08-13 22:29:42 发布 · 471 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #dom操作

笔记专栏收录该内容

13 篇文章

订阅专栏

本文介绍了DOM的基本概念，包括DOM是网页的标准模型，由W3C制定，允许JavaScript操作网页对象。详细讲解了DOM的基本操作，如getElementById、getElementByClassName等方法，以及querySelector和querySelectorAll的选择器功能。还探讨了节点树的概念，如parentNode、childNodes等，区分了不同类型的节点。最后，阐述了元素节点树的相关属性，如parentElement、children等，帮助理解元素之间的关系。

DOM基本操作、节点树和元素节点树

DOM含义

DOM是网页中用来表示文档中对象的标准模型，通过JavaScript可以对网页中的所有DOM对象进行操作，是由万维网联盟W3C组织制定的标准编程接口。文档对象模型（Document Object Model，简称DOM）

DOM基本操作

Document代表整个文档
查看元素节点的操作有：
getElementById()：通过元素id获取，在ie8以下的浏览器不区分大小写，并且能匹配到name属性的元素，除了这个Element不加s，其它都有s。
getElementByClassName() ：通过类名获取
getElementsByTagName()：通过标签名获取
querySelector()：返回文档中匹配指定 CSS 选择器的一个元素
querySelectorAll()：返回文档中匹配指定 CSS 选择器的全部元素
querySelector()和querySelectorAll()的优点是可以根据css选择器来写，缺点不是实时的，就是获取后，不会随着页面改变而改变。
例子：

<!DOCTYPE html>
<html lang="zh">

<head>
    <title>练习</title>
</head>

<body>
    <div>11</div>
    <div class="demo">22</div>
    <div>33</div>
    <script>
        var div = document.getElementsByTagName('div');//把全部div获取出来
        var demo = document.getElementsByClassName('demo')[0];
    </script>

</body>

</html>

通过F12控制台进行操作。
刚开始div中有三个，然后通过demo.remove()移除第二个div，然后再次查看div，可以发现div实时改变了。
在这里插入图片描述
如果改为var div = document.querySelectorAll(‘div’);
var demo = document.querySelectorAll(‘div.demo’)[0];;

可以发现，div还是原来三个没变。

节点树

遍历节点树（任何一个浏览器都好使！）
parentNode：父亲节点
childNodes：儿子节点们，注意Length
节点类型分为：（后面的数字为nodeType() 返回的数值）
1、元素节点 —1
2、属性节点 —2
3、文本节点 —3
4、注释节点 —8
5、document —9
6、DoucmentFragment—9
举个例子：
在这里插入图片描述

如length为7，箭头为元素起始位置。
firstChild/lastChild：第一个、最后一个孩子节点
nextSibling ：后一个兄弟节点（所以这里需要注意文本节点！参考上面的如果说strong的下一个兄弟节点为文本节点！）
previousSibling ：前一个兄弟节点

元素节点树

parentElement：元素父节点
children：返回当前元素的元素子节点
firstElementChild：第一个元素节点
lastElementChild：最后一个元素节点
nextElementSibling/previousElementSibling：后一个兄弟元素节点、前一个兄弟元素节点。
节点的四个属性
nodeName 元素的标签名，以大写形式表示，只读
nodeValue Text节点或Coment节点的文本内容，可读写
nodeType 该节点的类型，只读
attributes Element节点的属性集合
节点的一个方法 Node.hasChildNodes()；
Element.prototype.原型链上定义方法