简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 父节点中的childNodes中既有元素节点又有文本节点，要怎么获取其中的文本节点？
黄舟
黄舟 2017-04-11 12:22:39
0
5
412 

  • 北京空气质量：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)
巴扎黑
巴扎黑2017-04-11 12:24:39 5棟

按照你的思路

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

北京空气质量：部分要这么取，因为ul和li之间的换行(空格)也是文本节点。所以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
いいねを押す+0
返信を追加
    PHPzhong
    PHPzhong2017-04-11 12:24:39 4棟 
       
    • 北京空气质量：90
      •  
    • 上海空气质量：70
      •  
    • 天津空气质量：80
      •  
    • 广州空气质量：50
      •  
    • 深圳空气质量：40
      •  
    • 福州空气质量：32
      •  
    • 成都空气质量：90
      •
    いいねを押す+0
    返信を追加
      小葫芦
      小葫芦2017-04-11 12:24:39 3棟 
      var source = document.querySelector('#source'); source.childNodes[0].innerText;
      いいねを押す+0
      返信を追加
        阿神
        阿神2017-04-11 12:24:39 2棟

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

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

        いいねを押す+0
        返信を追加
          小葫芦
          小葫芦2017-04-11 12:24:39 1棟

          因为空格和换行会被认为是一个文本节点，所以你要遍历parent.childNodes的话，就有点麻烦，需要判断每个节点是否为文本节点不说，还需要判文本节点是否为空格或者换行等是否为为你需要的内容。
          所以你可以用
          var lists = ul.children
          这样lists就是

        • 元素的集合，不包含
            里面的文本节点
            然后用

            var val = lists[0].innerHTML

            或者

            var val = lists[0].childNodes[0].nodeValue
          • いいねを押す+0
          返信を追加
            人気のトピック
            詳細>
            人気の記事
            人気のチュートリアル
            詳細>
            関連するチュートリアル
            人気のおすすめ
            最新のコース
            最新のダウンロード
            詳細>
            ウェブエフェクト
            公式サイト
            サイト素材
            フロントエンドテンプレート
            私たちについて 免責事項 Sitemap
            PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！