基本DOM操作

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
2
3
4
5
6
7
8
9
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
2
3
4
5
6
7
8
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的值,那么有一个问题,nodeValueinnerHTML有什么区别呢?
nodeValue获取的是节点的值,innerHTML是以字符串形式返回该节点的所有子节点及其值。
可以看做是部分与大体的一个区别。
举个例子:

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

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

1
2
3
4
5
6
7
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弹出

1
2
第二个`alert`弹出<br>
```“这是div的第一个子节点,是一个文本节点 <p>div的第二个子节点p,这是p的第一个文本节点</p>”

三、用nodeName来获取节点的

nodeName属性含有某个节点的名称。
对于元素节点,nodeName=标签名(返回的名称是大写的)。
对于文本节点,nodeName=#text
对于属性节点,nodeName=属性名(返回的名称是大写的)。
使用方法:elemt.nodeName;

笔记核心:

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

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

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

1
2
    <p>123</p>
</div>

在上面这段代码中,如果使用以下js代码:

1
2
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确实可以实现获取到父元素的第一个子元素节点,但是当divp之间存在空白节点的话,first就会获取到空白节点而不是第一个元素节点。
所以,DOM扩展了一个firstElementChild方法,这个方法可以获取到父元素的第一个子元素节点
毕竟从字面意思上,firstChild就是第一个孩子,空白节点也算是嘛,虽说看不见,但是还是纯在的呀(你看不见,它就不纯在嘛?!)
firstElementChild就指明要第一个子元素,空白的东东就不算了~~

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

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

1
2
3
4
<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知识图谱

文章目录
  1. 1. DOM组成
  2. 2. 最开始学习DOM的经历
    1. 2.1. 二、用body的childNodes来测试
      1. 2.1.1. 来看body的childNodes中各个节点的个数。
    2. 2.2. 三、用nodeValue来得到和设置一个节点的值
  3. 3. 笔记核心:
    1. 3.1. 解决:使用firstElementChild
  4. 4. 得出:
|