使用jacascript怎么对DOM节点进行获取-创新互联-古蔺大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

使用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 的实例，它有一个表示自己包含多少元素的 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() 方法。


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

var oWrapper = document.querySelector('#wrapper'); var oUl = oWrapper.querySelector('ul'); var oLiNo1 = oWrapper.querySelector('.no1'); //obj.querySelector(selector) 方法接收一个CSS选择符，返回与该模式匹配的第一个元素， var oLiFirst = oWrapper.querySelector('li'); var oFirstLi = 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选择符，返回一个类数组对象 var oWrapperAll = document.querySelectorAll('#wrapper'); console.log(oWrapperAll);//[div#wrapper] console.log(oWrapperAll[0] === oWrapper);//true var oWrapperArray = oWrapperAll[0]; var oLiFirstAll = oWrapperArray.querySelectorAll('li'); var oLiFirstArrayNo1 = oWrapperArray.querySelectorAll('li')[0]; console.log(oLiFirstArrayNo1 === oLiNo1);//true console.log(oLiFirstAll[1].innerHTML);//第二行 // console.log(oWrapperArray.matchesSelector('#wrapper')); //TypeError: oWrapperArray.matchesSelector is not a function console.log(oWrapperArray.webkitMatchesSelector('#wrapper'));//true //obj.matchesSelector(selector) 有兼容性问题， //IE9+浏览器支持 msMatchesSelector() 方法， //firefox 支持 mozMatchesSelector() 方法， //safari 和 chrome 支持webkitMatchesSelector() 方法。

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

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

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


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

var oWrapper = document.querySelector('#wrapper'); var oUl = oWrapper.querySelector('ul'); var oLiLast = oUl.querySelector('li:last-of-type'); var oLiAll = oUl.querySelectorAll('ul > li'); console.log(oLiLast.innerHTML);//第五行 console.log(oLiAll.length);//5 var newLi = document.createElement('li'); newLi.innerHTML = '新加的Li，放到最后面'; oUl.appendChild(newLi); //querySelectorAll() 方法得到的类数组对象是非动态实时的； console.log(oLiLast.innerHTML);//第五行 console.log(oLiAll.length);//5 console.log(oUl.querySelector('li:last-of-type').innerHTML);//新加的Li，放到最后面 console.log(oUl.querySelectorAll('ul > li').length);//6

var oWrapper = document.querySelector('.wrapper'); //selector 类方法在元素上调用时，指定的选择器仍然在整个文档中进行匹配，然后过滤出结果集，以便它只包含指定元素的后代元素。 //这看起来是违反常规的，因为它意味着选择器字符串能包含元素的祖先而不仅仅是所匹配的元素 console.log(oWrapper.querySelectorAll('div div'));//[div.test1, div.test2] //这句代码我的理解是获取oWrapper内部子孙元素中，div里嵌套的div，这里没有这种情况，所以应该弹出一个空数组 //如果出现后代选择器，为了防止该问题，可以在参数中显式地添加当前元素的选择器 console.log(oWrapper.querySelectorAll('.wrapper div div'));//[] console.log(oWrapper.querySelectorAll('.wrapper div'));//[div.test1, div.test2]

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联网站建设公司行业资讯频道，感谢您对创新互联建站的支持。

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、建站服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章标题：使用jacascript怎么对DOM节点进行获取-创新互联
网站路径：http://scgulin.cn/article/dcisog.html

新闻中心

其他资讯