文本节点的值的问题?

来源:9-8 访问子节点childNodes

慕九州4739172

2016-12-08 15:50

第一个节点:javascript

第1个节点的名称是:#text
第1个节点的类型是:3
第1个节点的值是:  javascript    

第三个节点(p是第二个节点):<p>javascript</p>

第3个节点的名称是:#text
第3个节点的类型是:3
第3个节点的值是: 

为什么第三个节点没有输出值value

写回答 关注

3回答

  • 进击君
    2016-12-08 17:54:31
    已采纳

    来来来,我们来好好理解一下哈。

    首先理解父节点和子节点的概念。子节点是父节点所包含的,父节点下一级的节点。也就是说,父节点下还可能有下两级的节点哦,但是那不是父节点的子节点,而是父节点的“孙节点”

    看代码:

    <div>
      javascript  
      <p>javascript</p>
      <div>jQuery</div>
      <h5>PHP</h5>
    </div>

    先不管什么空白节点,看着代码,我们来数一数div下面有几个子节点:javascript是文本节点,第一个。p标签是第二个,div是第三个,h5是第四个子节点。ok,子节点是4,然后我们运行代码,假设你代码都对了,出来的结果是几个子节点呢?7个!

    所以还有3个是什么呢?是浏览器认为的,在节点之间存在的文字节点!因为节点之间没有内容,所以才是空白的,称之为空白节点!

    看代码:

    <div>
      javascript  
      <p>javascript</p> //这里存在空白节点,位于节点p和div之间,第三个子节点
      <div>jQuery</div> //这里存在空白节点,位于节点div和h5之间,第五个子节点
      <h5>PHP</h5>     //这里存在空白节点,位于节点h5和div之间,第七个子节点。子节点和父节点之间也存在空白节点。
    </div>

    一共是3个空白节点,那么为啥开头的div和javascript之间没有空白节点呢?因为javascript本身就是文本节点,在这里充当了div和p标签之间的”空白节点“,但是它不是空白的呦,是有值的文本节点。

    也就是说,关键不是空白节点,而是文本节点,浏览器认为在节点之间必须存在文本节点,如果没有就给你加上空白节点!如果有就不加了

    回到你的问题,为啥Value没有值?它是空白节点哦,怎么有值?而只有第一个节点javascript是有值的

    不要把第三 第五 第七 节点理解为p div h5标签中的文本哦,那个也是文本节点,但是是”孙节点“ ,是子节点的子节点。 

    Joanna

    厉害了!

    2017-02-01 19:38:14

    共 3 条回复 >

  • 斟酒独酢
    2017-03-05 21:44:23

    谢谢,

  • qq_善美小姐_04172997
    2016-12-14 17:04:26

    解答的很清楚

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

467393 学习 · 21877 问题

查看课程

相似问题