firstChild,lastChild,NextSibling,previousSibling的使用

元素.firstChild:只读属性，第一个子节点
在标准下：firstChild会包含文本，类型的节点
非标准下：只包含元素节点
元素.firstElementChild : 只读属性标准下获取第一个元素类型的子节点，注意，非标准的IE不支持。

例一：给第一个子元素添加背景颜色：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() {var oUl = document.getElementById('ul1');/*解决兼容性问题，注意不能写成这样：
if ( oUl.firstChild) {oUl.firstChild.style.background = 'red';} else {oUl.firstElementChild .style.background = 'red';}
因为firstChild在标准的的浏览器下也兼容，指第一个文本节点，所以if里面的条件是真，
然后执行if里面的语句就会报错，因为文本节点不能添加背景啦
*/if ( oUl.firstElementChild ) {oUl.firstElementChild.style.background = 'red';} else {oUl.firstChild.style.background = 'red';}   }
</script>
</head>
<body><ul id="ul1"><li>11111</li><li>22222</li><li>33333</li><li>44444</li></ul>
</body>
</html>

例二：第二种兼容性处理方法：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() {var oUl = document.getElementById('ul1');var oFirst = oUl.firstElementChild || oUl.firstChild;oFirst.style.background = 'red';
}
</script>
</head><body><ul id="ul1"><li>11111</li><li>22222</li><li>33333</li><li>44444</li></ul>
</body>
</html>

这里注意啦，虽然上面的这种方法能够解决兼容性的问题，但是会存在隐患的。
当你把ul里面的li清空的时候就会报错，去掉li。再把JS修改一下，如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() {var oUl = document.getElementById('ul1');//alert(oUl.firstElementChild)var oFirst = oUl.firstElementChild || oUl.firstChild;//alert(oFirst)if ( oFirst ) {oFirst.style.background = 'red';} else {alert( '没有子节点可以设置' );
}
}
</script>
</head><body><ul id="ul1"></ul>
</body>
</html>

我们预期的结果是，弹出警告“没有子节点…”，可结果是，在标准的浏览器下：

原因：var oFirst = oUl.firstElementChild || oUl.firstChild;
这一句，在标准下oUl.firstElementChild返回null,所以会走oUl.firstChild，而oUl.firstChild在标准下获取到的是第一个文本节点。报错报错报错

例三：完美解决以上问题的方法
直接上children属性就可以啦：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() {var oUl = document.getElementById('ul1');//alert(oUl.firstElementChild)var oFirst = oUl.firstElementChild || oUl.firstChild;//alert(oFirst)/*if ( oFirst ) {oFirst.style.background = 'red';} else {alert( '没有子节点可以设置' );}*/if ( oUl.children[0] ) {oUl.children[0].style.background = 'red';} else {alert( '没有子节点可以设置' );}}
</script>
</head><body><ul id="ul1"></ul>
</body>
</html>

lastChild,NextSibling,previousSibling的使用同
firstChild，请自行测试。

firstChild,lastChild,NextSibling,previousSibling的使用相关推荐

HTML DOM firstChild lastChild nextSibling previousSibling 属性_获取属性值的undefined问题
1 <html> 2 <head> 3 <title>HTML示例</title> 4 <style type="text/css&qu ...
html dom firstchild,解析dom中的children对象数组元素firstChild,lastChild的使用
行1列1 行1列2 行2列1 行2列2 alert(test.children[0].tagName) alert(test.children[1].tagName) document.all.tbl ...
CSS选择器之:first-child,:last-child
定义 :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器. 提示:p:last-child 等同于 p:nth-first-child(1). :last-child 选择器 ...
JS firstChild,LastChild
JS node.firstChild会返回node的所有子节点,而不是第一个子节点: 如果想返回第一个子节点需要用 node.firstChild.nodeValue; lastChild也相同
CSS选择器 :first-of-type/:last-of-type/ :first-child/:last-child 用法
官方链接:CSS3 :first-of-type 选择器 <div class="parent"><span class="child child1&q ...
previousSibling和nextSibling用法
firstChild,lastChild,nextSibling,previousSibling都会将空格或者换行当做节点处理,但是有代替属性所以为了准确地找到相应的元素,会用 firstEleme ...
dom文档对象手册_DOM总结
一.DOM是一棵树,树上有Node,Node分为 Document.Element(元素)和 Text(文本),以及其他不重要的. 二.浏览器原生提供document节点,代表整个文档, 文档的第一层 ...
XML DOM – 导航节点概述
通过节点间的关系访问节点树中的节点,通常称为导航节点("navigating nodes").可通过使用节点间的关系对节点进行导航. 导航 DOM 节点通过节点间的关系访问节点树 ...
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（推荐七）
前言学习是有趣的,但有过滤的学习内容就更好,本博主就专门为刚接触javascript客户端编程的朋友提供及分享个人学习经历!建议大家看看:(汤姆大叔的博客) http://www.cnblogs.c ...

firstChild,lastChild,NextSibling,previousSibling的使用

firstChild,lastChild,NextSibling,previousSibling的使用相关推荐

最新文章

热门文章