9-1 程宗武

Day22(Dom)

一、查找元素

使用节点树会产生的问题:在节点树中,字符也是节点对象,称为 " #text " 。这些看不见的文本节点,会极大的妨碍正常的查找

var elem = document.forms[0]
console.log( elem.childNodes)
NodeList(3)
​
0: #text " --> 换行导致的空白节点
        "​
1: <input type="text">​
2: #text

解决办法:使用元素树

 <form id="from" action="">
        <input type="text">1
 </form>
 <script>
     var elem = document.getElementById("from")
     console.log(elem.children)
 </script>
HTMLCollection
​
0: <input type="text"> -->使用元素树的方法获取的都是HTML里的元素,因此不会获取到文本节点
​
length: 1

childNodes和children

childNodes children
相同点: childNodes和children返回的都是一个动态的集合,每次访问都要重新查找,首次查找返回速度快
不同点 标准属性:返回指定元素的子元素的集合的所有属性,文本节点 非标准属性:返回指定元素的子元素的集合,只返回html节点,不包括文本节点

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1