关于parentNode和firstChild的一些坑-白红宇

关于parentNode和firstChild的一些坑

阅读量：6821 次

发布时间：2019-06-26

本文共 1059 字，大约阅读时间需要 3 分钟。

首先附上个人代码:

<!DOCTYPE html>

<html>
<head>
   <title> test father dom</title>
</head>
<body>
   <div id="c" name="parent">
       <div id="a" name="baba">
           <input type="text" name="baby" value="ni">
       </div>
       <div id="b" name="mama">
           <input type="text" name="baby1" value="hao" οnchange="a(this);">
       </div>
   </div>
</body>

<script>
   function a(obj) {

    //var a = obj.parentNode.parentNode.firstChild.firstChild.value;
    //var a = obj.parentNode.parentNode.childNodes;
    var a = obj.parentNode.parentNode.childNodes[1].childNodes[1].value
    alert(a);
   }
</script>

</html>

第一步:

解放a(obj);第一行代码,注解另外两行.

测试结果:

test.html:19 Uncaught TypeError: Cannot read property 'value' of null
at a (test.html:19)
at HTMLInputElement.onchange (test.html:12)
a @ test.html:19
onchange @ test.html:12

照我的猜想应该能找到值ni,但是实际却不是这样.

第二步测试:

解放第二行代码,获得全部的子节点看看情况

结果:

0:text

1:div#a

2:text

3:div#b

4:text

length:5

__proto__:NodeList

经过思考发现1,3,5很奇怪,为什么呢

经过文档的查看发现childNodes会找到所有此节点下的子节点,但是要注意这个方法找节点的时候会把换行当做一个空的文本节点.故发现问题所在.

第三步

解放第三个,注释1,2个得到我们想要的结果

以上代码可以直接拿到本地的浏览器直接测试.

转载于:https://my.oschina.net/Spider001/blog/1546738

你可能感兴趣的文章