javascript - 父节点中的childNodes中既有元素节点又有文本节点,要怎么获取其中的文本节点?
黄舟
黄舟 2017-04-11 12:22:39
[JavaScript讨论组]

  • 北京空气质量:90
  • 上海空气质量:70
  • 天津空气质量:80
  • 广州空气质量:50
  • 深圳空气质量:40
  • 福州空气质量:32
  • 成都空气质量:90

就像这样要怎么获取“XX空气质量”以及b元素中的文本。?

为什么这样:
var ul = document.getElementById("source");
var val = ul.childNodes[0].childNodes[0].nodeValue;
或者这样:var ul = document.getElementById("source");
var val = ul.childNode[0].nodeValue;
都获取不到li元素中的文本。求解释

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(5)
巴扎黑

按照你的思路

var val = ul.childNodes[1].childNodes[0].nodeValue;

北京空气质量:部分要这么取,因为ulli之间的换行(空格)也是文本节点。所以li索引应该是1

var val = ul.children[0].childNodes[0].nodeValue;

或者使用上面的children不取文本节点。

var ul = document.getElementById("source");
var elLis = ul.getElementsByTagName('li');
var elBs = ul.getElementsByTagName('b');
for(var i = 0;i<elLis.length;i++){
    console.log(elLis[i].childNodes[0].nodeValue,elBs[i].innerText)
}
PHPz
    <ul id="source">
    <li>北京空气质量:<b>90</b></li>
    <li>上海空气质量:<b>70</b></li>
    <li>天津空气质量:<b>80</b></li>
    <li>广州空气质量:<b>50</b></li>
    <li>深圳空气质量:<b>40</b></li>
    <li>福州空气质量:<b>32</b></li>
    <li>成都空气质量:<b>90</b></li>
    </ul>
    <script type="text/javascript">
    var aText = [].map.call(document.querySelectorAll('#source > li'),function(e){
        return e.textContent.trim();
    });
    console.log(aText[0]);
                         
                         </script>
高洛峰
var source = document.querySelector('#source');
source.childNodes[0].innerText;
阿神

正确的应该是这个:document.getElementsByTagName("li")[0].innerText
0可以换成其他索引

取值不到的原因是ul.childNodes包括了子节点和文字,ul.childNodes[0]是个回车所以是没有childNodes这个属性的,你把ul.childNodes打印出来就看清楚了。

高洛峰

因为空格和换行会被认为是一个文本节点,所以你要遍历parent.childNodes的话,就有点麻烦,需要判断每个节点是否为文本节点不说,还需要判文本节点是否为空格或者换行等是否为为你需要的内容。
所以你可以用
var lists = ul.children
这样lists就是<li>元素的集合,不包含<ul>里面的文本节点
然后用

var val = lists[0].innerHTML

或者

var val = lists[0].childNodes[0].nodeValue
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号