DOM查找元素的方法总结

按HTML查找：
优点：范围可大可小，可设置条件；
包括五种方式：
1.按id查找；
2.按标签名查找：var elems = parent.getElementsByTagName('');
3.按name属性查找：要回传给服务器的元素需要name属性，专门找表单中有name属性的表单元素；---了解即可；
4.按class属性查找；
var elems = parent.getElementsByClassName('class');
强调：1.可在任意父元素上调用；2，可返回多个元素的组成的集合；3，不要求全部匹配，只要包含即可；
缺点：每次只能按一个条件查找，如果条件复杂的话，就无法一句话获得想要的元素；
5，这是重点强调的选择器，按选择器查找：用的比较多，比较犀利。
5.1 只找一个元素：var elem = parent.querySelector('selector");
5.2 找多个元素：var elems = parent.querySelectorAll（'selector');

那么如何选择这些查找工具呢？

从使用的难易程度：

1.当条件复杂时：

按选择器查找--简单；按HMTL查找--繁琐；
2.返回值：

getElementsByTagName（）返回多个元素的动态集合；

什么是动态集合：不实际存储对象的属性值，每次访问，都要重新查找DOM树；

querySelectorAll（）返回多个元素的非动态集合；非动态集合---实际存储对象的所有值，即使返回反复访问集合，也不会导致反复查找DOM树。
3.单次查找效率：

按HTML查找--效率高；按选择器找--效率低；

在这里，我们重点介绍下querySelector（）和querySlectorAll（），这两个方法支持CSS查询。可以通过document和element类型的实例来调用他们，目前完全支持他们的浏览器有：

而querySelectorAll：

巴特西

DOM查找元素的方法总结

最新文章

热门文章