前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!
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 的实例,它有一个表示自己包含多少元素的 length 属性,而要取得每个元素可以使用 item() 方法,也可以使用方括号法;
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() 方法。