>>>>> 子节点和兄弟节点的操作

childNodes 属性

只读属性,子节点列表集合

其他浏览器(标准下):包含了文本和元素类型的节点,也会包含非法嵌套的子节点

ie8以下(非标准下): 只包含元素类型的节点,ie7以下不会包含非法嵌套子节点

childNodes只包含一级子节点,不包含后辈孙级以下的节点

<ul><li>1</li><li>2</li></ul>

<script>
var ul = document.getElementsByTagName('ul')[0];
alert(ul.childNodes.length);//2
</script>
<ul>
    <li>1</li>
    <li>2</li>
</ul>

<script>
var ul = document.getElementsByTagName('ul')[0];
alert(ul.childNodes.length);//5  还包含了三个文本节点
alert(ul.childNodes[0].nodeName);//#text
</script>

上面的代码ie8以下, ul.childNodes.length 为2

包含非法嵌套的子节点

<ul>
    <li>1</li>
    <li>2</li>
    <p>3</p>
</ul>
<script>
var ul = document.getElementsByTagName('ul')[0];

//chrome
alert(ul.childNodes.length);//7

//ie8
alert(ul.childNodes.length);//3

//ie7
alert(ul.childNodes.length);//2
</script>

children 属性

跟childNodes的区别是,它只包含元素节点

推荐使用, 兼容性更好

firstChild firstElementChild

firstChild属性返回当前节点的第一个子节点,如果当前节点没有子节点,则返回null

firstElementChild属性返回当前节点的第一个Element子节点,如果不存在任何Element子节点,则返回null。

firstChild兼容性问题:

  • 标准下:firstChild会包含文本类型的节点
  • 非标准下:只包含元素节点

firstElemenetChild兼容性问题:

再ie8以下不支持

所以我们最好是用div.children[0]来代替firstElementChild

lastChild lastElementChild

nextSibling nextElementSibling

previousSibling previousElementSibling

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 子节点和兄弟节点的操作 childNodes 属性 只读属性,子节点列表集合 其他浏览器(标准下):包含了文本和元...
    卓小生阅读 1,599评论 0 0
  • 1. 什么是DOM 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定...
    hanyuntao阅读 1,298评论 0 4
  • 荔枝就如女人一样,有几个类型。 5月份白糖罂就如文艺小清新,皮略红,大部分核小,甜得脱俗,可惜釆摘时间大约十天; ...
    妙淼林阅读 252评论 0 0
  • 一树参天立,飞瀑挂悬壁。 祸起张虔陀,血淹洱海月。 大义阁罗凤,京观叹李宓。 铁柱今何在?唯有苍山雪。
    布装波依阅读 269评论 0 0
  • JHG Club,人生检讨、欢乐吐槽大会。 经过多次职场面试、并且均以失败告终的恩美率先发言。 “她走进也不看我,...
    THISIMPLE阅读 252评论 0 0