江苏龙网

  1. 主页 > 生活百科 > >

快速了解JavaScript的DOM模型( 六 )

DOM模型


文章插图
 
可以接收包含一个或多个类名的字符串，传入的多个类名的先后顺序不重要 。
Selectors APIW3C发起指定的标准，可使浏览器支持CSS查询 。Selectors API的核心是两个方法：querySelector()和querySelectorAll() 。兼容的浏览器中通过Document及Element节点类型的实例进行调用 。
querySelector()方法querySelector<E extends Element = Element>(selectors: string): E | null;
该方法返回匹配指定选择符的第一个HTMLElement元素，如果不存在，则返回null 。传入的selectors必须是有效的CSS选择器；如果选择器不合法，会引发SYNTAX_ERR异常 。
document.querySelector("#aId1");// 取得Id为"aId1"的元素document.querySelector("p");// 取得p元素document.querySelector(".container");// 取得类为"container"的第一个元素document.querySelector("..selector");// 引发'SYNTAX_ERR'异常(Uncaught DOMException:Failed to execute 'querySelector on 'Document': '..selector' is not a valid selector. 意思是'..selector'不是一个有效的选择 。)Document和Element都可以调用querySelector()方法，只是Document会在文档元素的范围内查找匹配的元素；Element只会在该元素后代元素的范围内查找匹配的元素 。
querySelectorAll()方法querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
该方法返回匹配指定选择符的元素列表，返回的对象是NodeList，如果不存在，则返回空的NodeList 。传入的selectors必须是有效的CSS选择器；如果选择器不合法，会引发SYNTAX_ERR异常 。
// 获取id为"primary-form"中所有<p>元素document.getElementById("primary-form").querySelectorAll("p");// 获取类为"container"的所有元素document.querySelectorAll(".container");// 获取所有<form>元素中的所有<p>元素document.querySelectorAll("form p");

快速了解JavaScript的DOM模型

文章插图
 
matches()方法Selectors API Level 2规范为Element类型新增了一个方法：
matches(selectors: string): boolean;
该方法判断当前DOM节点是否能完全匹配指定选择符，如果匹配成功，返回true；匹配失败，返回false 。
var elems = document.getElementsByTagName('p');for (var i = 0; i < elems.length; i++) {// 获取匹配'container'类选择符的dom节点if (elems.item(i).matches('.container')) {console.log('The ' + elems.item(i).textContent + ' is container');}}/*The P Text One is containerThe NickName:is container*/注意，有些供应商会有自己实验性方法在matchesSelector()方法之前加些前缀 。如果想使用这种方法，可以编写一个包装函数 。
function matchesSelector(element, selector){if (element.matches) {// 标准方法return element.matches(selector);} else if (element.matchesSelector){return element.matchesSelector(selector);} else if (element.msMatchesSelector){// IE 9+支持return element.msMatchesSelector(selector);} else if (element.mozMatchesSelector){// Firefox 3.6+支持return element.mozMatchesSelector(selector);} else if (element.webkitMatchesSelector){// Safari 5+和Chrome支持return element.webkitMatchesSelector(selector);} else {throw new Error("Not supported.");}}if (matchesSelector(document.body, ".container")){//执行操作}当有的浏览器不支持Element.matches()或Element.matchesSelector()，但支持document.querySelectorAll()方法，可以有替代方案：
if (!Element.prototype.matches) {Element.prototype.matches =Element.prototype.matchesSelector ||Element.prototype.mozMatchesSelector ||Element.prototype.msMatchesSelector ||Element.prototype.oMatchesSelector ||Element.prototype.webkitMatchesSelector ||function(s) {var matches = (this.document || this.ownerDocument).querySelectorAll(s),i = matches.length;while (--i >= 0 && matches.item(i) !== this) {}return i > -1;};}DOM遍历Node节点提供了几种属性，用于访问DOM节点 。
parentNodenode.parentNode属性用于返回指定节点的父节点 。除document外，所有节点都有父节点，document对象的父节点为null 。示例如下：
document.getElementById('divId2').parentNode;childNodesnode.childNodes属性用于返回指定节点的子结点的Node对象集合 。示例如下：
document.getElementById('primary-form').childNodes;firstChild/lastChildnode.firstChild属性用于访问第一个子节点；node.lastChild属性用于访问最后一个子节点 。如果要访问的节点不存在，则返回null 。示例如下：
document.getElementById('primary-form').firstChilddocument.getElementById('primary-form').lastChild;


推荐阅读


上一篇：洗缩水的毛衣怎么还原？

下一篇：劳务派遣出国打工靠谱吗？