DOM操作详解-优快云博客

本文链接：https://blog.youkuaiyun.com/imsuperman1015/article/details/8395923

本文详细介绍了DOM操作中的关键方法，如通过childNodes与children属性获取子节点的区别，在不同浏览器下的表现；firstElementChild等方法的使用及在各浏览器版本中的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM 部分：所有实例都基准下面的无序列表

<ul id="ul">
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

// childNodes 获取某个节点的子节点

var oUl = document.getElementById('ul');
var oLis = oUl.childNodes;
alert(oLis.length);

// IE，谷歌，火狐 = 9
// IE 6 - 8 = 5

var oLis = oUl.children;
alert(oLis.length);

// 均为 5

//在高级浏览器中 children 不会计算文本节点

//firstElementChild

var oUl = document.getElementById('ul');

var child = oUl.firstChild;

/*
IE9，火狐，谷歌结果：文本节点

IE6 - 8 结果：LI 节点

在高级浏览器中可以使用下列方法解决
*/

child = oUl.firstElementChild;

// 返回的是第一个元素节点。

/*
对应的有

获取最后一个元素节点
lastElementChild;
获取下一个兄弟元素节点
nextElementSibling;
获取上一个兄弟元素节点
previousSibling;
*/

====================================== 分割线 ======================================

<div id="div1">
    <div id="div2"></div>
</div>

// offsetParent 在IE9，火狐，谷歌中的结果

var oDiv = document.getElementById('div2');

alert(oDiv.offsetParent);

/*
div1 没有使用定位时在 IE9，谷歌，火狐中结果为：BODY

div1 使用定位时在 IE9，谷歌，火狐中结果为：div1

而在低版本中 一律返回 div1

offsetParent 在高级浏览器中返回的是已定位基准的父元素，如果 div1 没有使用定位 那么对 div2 进行定位时基准的则是 body 所以返回 bod。
*/

js 各种兼容性整理