老生常谈jacascript DOM节点获取

老生常谈jacascript DOM节点获取

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！

getElementById()

obj.getElementById(id) 该方法接收一个参数（该元素的id），若找到则返回该元素对象，若不存在则返回null；

任何HTML元素可以有一个 id 属性，在文档中该值必须唯一；

若浏览器中出现多个 id 名的情况，css样式对所有该 id 名的元素都生效，但 javascript 脚本仅对第一个出现该 id 名的元素生效；

getElementsByTagName()

obj.getElementsByTagName(tagName) 方法接收一个参数，即要取得元素的标签名，而返回的是包含0或多个元素的类数组对象 HTMLCollection。可以使用方括号语法或 item() 方法来访问类数组对象中的项，length 属性表示对象中元素的数量；

getElementsByName()

obj.getElementsByName(name) 方法会返回带有给定 name 特性的所有元素;

IE9及以下浏览器只支持在表单元素上使用 getElementsByName() 方法；

IE9及以下浏览器中使用 getElementsByName() 方法也会返回id属性匹配的元素。因此，不要将 name 和 id 属性设置为相同的值；

getElementsByClassName()

HTML5 新增了 getElementsByClassName() 方法；

在 javascript 中 class 是保留字，所以使用 className 属性来保存 HTML 的 class 属性值；

obj.getElementsByClassName(classaName) 方法接收一个参数，是包含一个或多个类名的字符串，返回带有指定类的所有元素的类数组对象 HTMLCollection。传入多个类名时，类名的先后顺序不重要。与 getElementsByTagName() 类似，该方法既可以用于 HTML 文档对象 document，也可以用于 element 元素对象；

IE8及以下浏览器不支持 getElementsByClassName();

在操作 class 类名时，需要通过 className 属性添加、删除和替换类名。因为 className 是一个字符串，所以即使只修改字符串一部分，也必须每次都设置整个字符串的值。要从 className 字符串中删除一个类名，需要把类名拆开，删除不想要的那个，再重新拼成一个新字符串;

classList

HTML5 为所有元素添加了 classList 属性，这个 classList 属性是新集合类型 DOMTokenList 的实例，它有一个表示自己包含多http://少元素的 length 属性，而要取得每个元素可以使用 item() 方法，也可以使用方括号法;

IE9及以下浏览器不支持 classList 属性；

classList 还有以下4个方法，我们主要用这些方法操作类名，有了 classList 属性，className属性基本没有什么用武之地了：

obj.classList.add(value); 将给定的字符串值添加到列表中，没有返回值，如果值已存在，则不添加;

obj.classList.contains(value); 表示列表中是否存在给定的值，如果存在则返回true，否则返回false;

obj.classList.remove(value); 从列表中删除给定的字符串，没有返回值；

obj.classList.toggle(value); 如果列表中已经存在给定的值，删除它并返回false；如果列表中没有给定的值，添加它并且返回true;

选择器API

HTML5 拓展了 querySelector()、querySelectorAll() 和 matchesSelector() 这3种方法，通过 CSS选择器 查询DOM文档取得元素的引用的功能变成了原生的API，解析和树查询操作在浏览器内部通过编译后的代码来完成，极大地改善了性能。

obj.querySelector(selector) 方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。该方法既可用于文档 document 类型，也可用于元素element 类型。IE7及以下不支持。

obj.querySelectorAll(selector) 接收一个CSS选择符，返回一个类数组对象，如果没有匹配元素，返回空的类数组对象，而不是null；IE7及以下不支持;

obj.matchesSelector(selector) 方法接收一个CSS选择符参数，如果调用元素与该选择符相匹配，返回true；否则返回false；

obj.matchesSelector(selector) 有兼容性问题，IE9+浏览器支持 msMatchesSelector() 方法，firefox 支持 mozMatchesSelector() 方法，safari 和 chrome 支持webkitMatchesSelector() 方法。

选择器API使用时，需要注意的是：

querySelectorAll() 方法得到的类数组对象是非动态实时的，所以如果要计算长度等的实事值，最好重新获取；当然以前的 getElementById() 之类的就没这个毛病；

selector 类方法在元素上调用时，指定的选择器仍然在整个文档中进行匹配，然后过滤出结果集，以便它只包含指定元素的后代元素。这看起来是违反常规的，因为它意味着选择器字符串能包含元素的祖先而不仅仅是所匹配的元素；所以如果出现后代选择器，为了防止该问题，可以在参数中显式地添加当前元素的选择器；

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。