基本DOM操作

最新推荐文章于 2022-06-12 23:28:00 发布

Xu_Angel

最新推荐文章于 2022-06-12 23:28:00 发布

阅读量374

点赞数

文章标签： JS DOM

本文链接：https://blog.csdn.net/Xu_Angel/article/details/79146610

版权

个人博客新地址：→点我♪(＾∀＾●)ﾉ

DOM组成

HTML DOM 模型被构造为对象的树：

HTML DOM 树

查找方式：

通过 id 找到 HTML 元素 document.getElementById('id')
通过标签名找到 HTML 元素 document.getElementsByTagName('element')
通过类名找到 HTML 元素 document.getElementsByClassName('className')IE678不兼容
查找相邻 next：dom.nextElementSibling||dom.nextSibling
previous：dom.previousElementSibling||dom.previousSibling
查找父节点 parent: dom.parentNode
查找子节点 child:所有的子节点：node.childNodes
节点类型：node.nodeType (1:元素 2：属性 3：文本 8：注释)
所有的子元素节点：node.children在ie678中包含注释

最开始学习DOM的经历

DOM有三种节点：元素节点、属性节点、文本节点。
一、用nodeType可以检测节点的类型
节点类型 nodeType属性值
1. 元素节点 1
2. 属性节点 2
3. 文本节点 3

这样方便在js中对各个节点进行操作。
元素节点：html中的标签。
属性节点：html便签中的属性值。
文本节点：元素节点之间的文本。

二、用body的childNodes来测试

   1  <body>/*第一个文本元素
   2    */<div></div>/*第二个文本元素
   3    */<div></div>/*第三个文本元素
   4    */<ul>
   5          <li></li>
   6          <li></li>
   7          <li></li>
   8      </ul>/*第四个文本元素
   9  */</body>

来看body`childNodes`中各个节点的个数。

childNodes，这个属性用来获取任何一个元素的所有子元素，它是一个包含这个元素的全部子元素的数组。

```
1 window.onload = function (){
2     var oBody = document.getElementsByTagName('body')[0];
3     var aChild = oBody.childNodes;
4     alert(aChild.length);//7
5     for(var i = 0; i < aChild.length; i++) {
6         alert(aChild[i].nodeType);//3 1 3 1 3 1 3
7         }
8 };

由此看来：

body的子元素有div、div、ul。
body的文本元素有四个，代码中注释出出来的，我故意将*/换了一行写出来，是想表明在和

之间是一个文本节点。
有人会觉得疑惑，不是说元素节点之间就是文本节点吗？为什么像 <div></div>之间的文本节点没有算进去呢？
对的，那个也算文本节点，但我们计算的是body的子节点，像 <div></div>之间的那是 <div>的子节点啦，并不是 body的子节点。

三、用nodeValue来得到和设置一个节点的值

三大节点中，属性节点和文本节点都是可能有值的，但是元素节点是没有值的。

用node.nodeValue得到node的值，那么有一个问题，nodeValue和innerHTML有什么区别呢？
nodeValue获取的是节点的值，innerHTML是以字符串形式返回该节点的所有子节点及其值。
可以看做是部分与大体的一个区别。
举个例子：

1 <body>
2     <div id="div1">
3         这是div的第一个子节点，是一个文本节点
4         <p>div的第二个子节点p，这是p的第一个文本节点</p>
5     </div>
6 </body>

我们用js来测试一下nodeValue和innerHTML的结果

1 window.onload = function (){
2     var oDiv = document.getElementById('div1');
3     var aChild = oDiv.childNodes;
4
5     alert(aChild[0].nodeValue);
6     alert(oDiv.innerHTML);
7 };

测试结果如下：
第一个alert弹出
“这是div的第一个子节点，是一个文本节点”
第二个alert弹出
“这是div的第一个子节点，是一个文本节点 <p>div的第二个子节点p，这是p的第一个文本节点</p>”
三、用nodeName来获取节点的
nodeName属性含有某个节点的名称。
对于元素节点，nodeName=标签名（返回的名称是大写的）。
对于文本节点，nodeName=#text。
对于属性节点，nodeName=属性名（返回的名称是大写的）。
使用方法：elemt.nodeName;

笔记核心：

firstElementChild只会获取元素节点对象，从名称就可以看出来，firstChild则可以获取文本节点对象（当然也可以获取元素节点对象），比如空格和换行都被当做文本节点。

~~js不同于jQuery，在获取DOM时，有很多不方便的地方，哎，没办法，原始的东东，虽然万能，但却不方便。~~

使用原生js的时候，就遇见一个坑——》firstChild，具体是使用firstChild获取元素的第一个子节点，可是相当的悲剧！！！
这个是一个小模型：

    <p>123</p>
</div>

在上面这段代码中，如果使用以下js代码：

var oDiv=document.getElementByTagName("div")[0];
alert(oDiv.firstChild.nodeName)

死活都得不出结果，后来查了才知道，原来：在现代浏览器下，比如Chrome,FF，ie11等等，由于会把

两个标签之间的空白节点也解析出来，所以会alert出#text（由于空白节点是属于text文本节点）
如果把html的Demo改成如下，则无论在古老浏览器还是现代浏览器中得到的结果都是一样：
<div><p>123</p></div>
想起了代码压缩的好处~~~

解决：使用firstElementChild

使用firstChild确实可以实现获取到父元素的第一个子元素节点,但是当div与p之间存在空白节点的话，first就会获取到空白节点而不是第一个元素节点。
所以，DOM扩展了一个firstElementChild方法，这个方法可以获取到父元素的第一个子元素节点
毕竟从字面意思上，firstChild就是第一个孩子，空白节点也算是嘛，虽说看不见，但是还是纯在的呀（你看不见，它就不纯在嘛？！）
而firstElementChild就指明要第一个子元素，空白的东东就不算了~~

英语好，没烦恼。毕竟是基本的交流工具哎

但是问题又来了，firstElementChild这个方法在现代浏览器中兼容，但是在ie678中却没有这个方法，一旦在ie678中使用这个方法就会出错。
所以要用Children方法，
children方法在所有主流浏览器中都兼容，包括ie678，并且它也能实现firstElementChild的功能

<div>
    <p>123</p>
</div>
var first=document.getElementByTagName("div")[0].children[0]

得出：

以后写js的时候，如果想获取到子元素的element节点，最好使用children方法，childNodes方法以及firstChild方法在现代浏览器中使用，都会把元素标签中的空白节点检测出来

一般我们使用这两个方法都是为了获取到元素的元素节点，空白节点会给我们造成很多不必要的bug,而children方法则是只检测element元素节点，防范于未然，所以推荐大家以后使用children方法来替代childNodes。

这就是最上面几种方法的总结

附一张DOM知识图谱

DOM知识图谱

Xu_Angel

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基本DOM操作

个人博客新地址：→点我♪(＾∀＾●)ﾉDOM组成HTML DOM 模型被构造为对象的树：查找方式：通过 id 找到 HTML 元素 document.getElementById('id')通过标签名找到 HTML 元素 document.getElementsByTagName('element')通过类名找到 HTML 元素 document.getElements...
复制链接

扫一扫