老生常谈jacascript DOM节点获取

2024-02-25 15:02:15 46

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

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()方法，也可以使用方括号法;

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()方法。



第一行
第二行
第三行
第四行
第五行

varoWrapper=document.querySelector('#wrapper'); varoUl=oWrapper.querySelector('ul'); varoLiNo1=oWrapper.querySelector('.no1'); //obj.querySelector(selector)方法接收一个CSS选择符，返回与该模式匹配的第一个元素， varoLiFirst=oWrapper.querySelector('li'); varoFirstLi=oWrapper.querySelector('ul>li'); console.log(oLiNo1===oLiFirst);//true console.log(oLiNo1===oFirstLi);//true console.log(oLiFirst===oFirstLi);//true console.log(oLiNo1.innerHTML,oLiFirst.innerHTML,oFirstLi.innerHTML);//第一行第一行第一行 //obj.querySelectorAll(selector)接收一个CSS选择符，返回一个类数组对象 varoWrapperAll=document.querySelectorAll('#wrapper'); console.log(oWrapperAll);//[div#wrapper] console.log(oWrapperAll[0]===oWrapper);//true varoWrapperArray=oWrapperAll[0]; varoLiFirstAll=oWrapperArray.querySelectorAll('li'); varoLiFirstArrayNo1=oWrapperArray.querySelectorAll('li')[0]; console.log(oLiFirstArrayNo1===oLiNo1);//true console.log(oLiFirstAll[1].innerHTML);//第二行 //console.log(oWrapperArray.matchesSelector('#wrapper')); //TypeError:oWrapperArray.matchesSelectorisnotafunction console.log(oWrapperArray.webkitMatchesSelector('#wrapper'));//true //obj.matchesSelector(selector)有兼容性问题， //IE9+浏览器支持msMatchesSelector()方法， //firefox支持mozMatchesSelector()方法， //safari和chrome支持webkitMatchesSelector()方法。

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

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

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



第一行
第二行
第三行
第四行
第五行

老生常谈jacascript DOM节点获取

热门推荐

随机推荐