关于element跟node的区别,cilldren跟childnodes的区别很多朋友弄不清楚,本文试图让大家明白这几个概念之间的区别。
node(节点)是dom层次结构中的任何类型的对象的通用名称,node有很多类型,如元素节点,属性节点,文本节点,注释节点等,通过nodetype区分,常见的有:
节点类型 | nodetype |
---|---|
元素element | 1 |
属性attr | 2 |
文本text | 3 |
注释comments | 8 |
文档document | 9 |
更多节点类型参考:https://developer.mozilla.org/en-us/docs/dom/node.nodetype?redirectlocale=en-us&redirectslug=nodetype
element继承了node类,也就是说element是node多种类型中的一种,即当nodetype为1时node即为elementnode,另外element扩展了node,element拥有id、class、children等属性。
以上就是element跟node的区别。
那么用document.getelementbyid("xxx")取到的是node还是element呢?我们来测试一下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <div id="test"> <p>one</p> <p>two</p> </div> <script> var odiv=document.getelementbyid("test"); console.log(odiv instanceof node); //true console.log(odiv instanceof element); //true </script> </body> </html>
我们可以看到用document.getelementbyid("xxx")取到的既是element也是node。
children是element的属性,childnodes是node的属性,我们再来测试一下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <div id="test"> <p>one</p> <p>two</p> </div> <script> var odiv=document.getelementbyid("test"); console.log(odiv.children[0] instanceof node); //true console.log(odiv.children[0] instanceof element); //true console.log(odiv.childnodes[0] instanceof node); //true console.log(odiv.childnodes[0] instanceof element); //false console.log(typeof odiv.childnodes[0].children); //undefined console.log(typeof odiv.childnodes[0].childnodes); //object </script> </body> </html>
通过上面的代码我们可以看到,element的children[0]仍为element,是node和element的实例,node的childndoes[0]为node,只是node的实例,不是element的实例。
同时,node的children属性为为undefined。
通过以上的讲述,大家弄明白了吗?
文章来自: