在输出子节点内容中,无法实现我想要的结果,请帮忙看下哪儿有问题了。
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title></title>
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>
<ul id='con'>
<li id='china'>CHINA
<ul>
<li id='sx'>陕西</li>
<li>北京</li>
<li>天津</li>
<li>广东</li>
</ul>
</li>
<li>UK</li>
<li>US
<ul>
<li>new York</li>
<li>Washington</li>
<li>Chicago</li>
<li>Houston</li>
</ul>
</li>
</ul>
<script type='text/javascript'>
var ele = document.getElementById('sx');//获取id为sx的元素
var par = ele.parentNode.parentNode.parentNode.lastChild;//根剧ele元素访问其祖节点(向上三层),然后访问祖节点的最后一个子节点
var child = par.childNodes;//获取最后一个子节点的全部子节点
var ch;
for(var i=0;i<child.length;i++){
ch = child[i].childNodes;
for(var j=0;j<ch.length;j++){
document.write(ch[j].nodeValue);
}
}
</script>
</body>
</html>
想要输出
new York
Washington
Chicago
Houston
这四项,请问如何实现?我的代码哪儿有问题了?
1.parentNode.lastChild这有问题。可改为parentNode.lastElementChild
或者将
改为
因为lastChild会获取到文本节点就是</li></ul>之间的空白换行。
2.var child = par.childNodes这个,child其实是
子节点1:是US文本节点,子节点2是ul,子节点3是最后</ul></li>之间的空白换行。
然后改怎么改应该清楚了吧~~
可以在查一下节点的分类和lastChild等这些获取子节点的方法,所能获取的类型和范围。