节点关系

1:原生JS中nodetype属性
常量: Node.ELEMENT_NODE
值:1
描述:一个节点元素.
常量:Node.TEXT_NODE
值: 3
描述:Element或者Attr中实际的文字。
常量: Node.COMMENT_NODE
值:8
描述: 一个Comment节点
常量:Node.DOCUMENT_NODE
值:9
描述:一个Document节点
常量:Node.DOCUMENT_NODE
值:10
描述: 文档类型的Documenttype节点
任何的HTML元素都有nodetype属性,值有1~12。
1:元素节点
3:文本节点
8:注释节点
9:document节点
10:DTD
程序:var box = document.getElementById(‘box’);
alert(box.nodeType);
alert(box.childNodes[0].nodeType);//3
alert(box.childNodes[1].nodeType);//1
alert(document.noteType);//9
2:原生JS中的节点关系-childNodes
任何节点都有childNodes属性,是一个类数组对象,存放着所有自己的儿子。
Chrom、IE9、IE10……高级浏览器,认为:
box.childNodes[0].nodeType;//3
高级浏览器认为box的大儿子是文本节点。当然是空文本。
IE6、7、8认为:
box.childNodes[0].nodeType //1
IE6、7、8认为box的大儿子是p。
3原生JS中节点关系-parentNode
childNode儿子可以很多,parentNode父亲只有一个。
某个元素.parentNode
4:previousSibling、nextSibling
上一个同胞兄弟,下一个同胞兄弟。
需要注意的是,非常大的浏览器兼容问题来了:
< div id = ‘box’>
< p> AAA < /p>
< p> BBB < /p>
< p> CCC < /p>
< p> DDD < /p>
< /div>
ps[2].previousSibling //低级浏览器就是BBB那个p,高级浏览器是空文本节点。

发布了80 篇原创文章 · 获赞 0 · 访问量 3468

猜你喜欢

转载自blog.csdn.net/weixin_43786904/article/details/103776706