<html>
<head>
<title>HTML_CSSS</title>
<script type="text/javascript">
//
function getNodes() {
//得到li1(子节点)
//var liLabel = document.getElementById("li1");
//得到ul(父节点)
//var ulLabel = liLabel.parentNode;
//alert(ulLabel.id);
//获取ul的第一个子节点
//var ulLabel = document.getElementById("ulId");
//var firstChildNode = ulLabel.firstChild;
//alert(firstChildNode.id); //若果是undefined,则使用getElementByTagName()
//获取最后一个子节点
var ulLabel = document.getElementById("ulId");
var lastChildNode = ulLabel.lastChild;
alert(lastChildNode.id);
}
</script>
</head>
<body>
<ul id="ulId">
<li id="li1">aaa</li>
<li id="li2">qqq</li>
<li id="li3">eee</li>
<li id="li4">bbb</li>
</ul>
<input type="button" value="click here" οnclick="getNodes()">
</body>
<head>
<title>HTML_CSSS</title>
<script type="text/javascript">
//
function getNodes() {
//得到li1(子节点)
//var liLabel = document.getElementById("li1");
//得到ul(父节点)
//var ulLabel = liLabel.parentNode;
//alert(ulLabel.id);
//获取ul的第一个子节点
//var ulLabel = document.getElementById("ulId");
//var firstChildNode = ulLabel.firstChild;
//alert(firstChildNode.id); //若果是undefined,则使用getElementByTagName()
//获取最后一个子节点
var ulLabel = document.getElementById("ulId");
var lastChildNode = ulLabel.lastChild;
alert(lastChildNode.id);
}
</script>
</head>
<body>
<ul id="ulId">
<li id="li1">aaa</li>
<li id="li2">qqq</li>
<li id="li3">eee</li>
<li id="li4">bbb</li>
</ul>
<input type="button" value="click here" οnclick="getNodes()">
</body>
</html>
以上案例在fireFox是可行,没什么问题,但是在Google Chrome和IE却是undefined,并且打印一下lastChildNode 显示是Object Text,是因为在高级浏览器里面,通过前述API拿到的第一和最后一个子标签是文本标签(文本节点),跟childNodes属性类似,因此,我们在碰到这些状况的时候,还是不建议使用,建议透过getElementsByTagName()的方法获取子元素.