JavaScript DOM扩展——“选择符API和元素遍历”的注意要点

justCoding 发布于2019-08-19 17:13 / 450人阅读

摘要：实际上，的核心就是通过选择符查询文档取得元素的引用。方法该方法接收一个选择符，返回的是所有匹配的元素而不仅仅是一个元素。而其底层实现则类似于一组元素的快照，而非不断对文档进行搜索的动态查询。

选择符API

Selector API Level1 的核心就是两个方法：querySelector()和querySelectorAll()。实际上，jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用。

querySelector()方法

该方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。如：

console.log(document.querySelector("body")); //HTMLBodyElement
console.log(document.querySelector("#divId")); //HTMLDivElement
console.log(document.querySelector(".info")); //HTMLParagraphElement
console.log(document.querySelector("p.info")); //HTMLParagraphElement
console.log(document.body.querySelector(".info")); //HTMLParagraphElement
console.log(document.querySelector("body.title")); //null

try{
    document.querySelector(wtf);
}catch(e){
    console.log(e); //ReferenceError stack: message: wtf is not defined
}

如上，如果传入了不被支持的选择符，该方法会抛出错误。

querySelectorAll()方法

该方法接收一个CSS选择符，返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例。而其底层实现则类似于一组元素的快照，而非不断对文档进行搜索的动态查询。这样可以避免使用NodeLIst对象。能够调用该方法的类型包括Document、DocumentFragment和Element。如：

var p = document.querySelector("#divId").querySelector(".info");
console.log(p.firstChild.nodeValue); //获取id为divId的div里面的className值为.info的节点

var p = document.querySelectorAll("p");
console.log(p.length); //获取所有p的数量

同样的，如果传入了浏览器不支持的选择符或者选择符中有语法错误，该方法会抛出错误。

matchesSelector()方法

这个方法接受一个参数，CSS选择符，如果调用元素与该选择符匹配，返回true，否则返回false。为了解决浏览器兼容问题，可以使用下面的包装函数：

function matchesSelector(element, selector) {
    if (element.matchSelector) {
        return element.matchesSelector(selector);
    } else if (element.msMatchesSelector) { //IE
        return element.msMatchesSelector(selector);
    } else if (element.mozMatchesSelector) { //FireFox
        return element.mozMatchesSelector(selector);
    } else if (element.webkitMatchesSelector) { //safari,chorme
        return element.webkitMatchesSelector(selector);
    } else {
        throw new Error("No supportted!");
    }
}

console.log(matchesSelector(document.body, "body")); //true

元素遍历Element Traversal规范

对于元素间的空格，各浏览器会做出不同反应，就导致了在使用childNodes和firstChild等属性时的行为不一致。

由此，Element Traversal API 为DOM元素添加了以下5个属性：

childElementCount：子元素的个数（不包括文本节点和注释）；

firstElementChild：第一个子元素；

lastElementChild：最后一个子元素；

previousElementSibling：前一个同辈元素；

nextElementSibling：后一个同辈元素；

如：


    list1
    list2
    list3


var ul = document.querySelector("#ulId");
console.log(ul.querySelectorAll("li").length); //3个list
console.log(ul.childElementCount); //3个list
console.log(ul.firstElementChild.firstChild.nodeValue); //list1
console.log(ul.lastElementChild.firstChild.nodeValue); //list3
var li = ul.querySelectorAll("li");
var li1 = li[0];
console.log(li1.firstChild.nodeValue); //list1
console.log(li1.nextElementSibling.firstChild.nodeValue); //list2
console.log(li1.nextElementSibling.previousElementSibling.firstChild.nodeValue); //list1

支持 Element Traversal 的浏览器有 IE9+、Firefox 3.5+、Safari 4+、Chrome 和 Opera 10+

私有云混合云 javascript的dom对象 javascript的dom编程 javascript dom javascript dom 编程艺术

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78311.html

JavaScript DOM扩展——“专有扩展”的注意要点

摘要：另外，以及这两个方法，在测试了一下，并无反应。不知是否兼容问题。下面是获得焦点的时候，自动以每毫秒的速度往下滚屏文档模式页面的文档模式是由IE8引入的，文档模式决定了可以使用的CSS级别、JS中的API以及如何对待文档类型（doctype）；在IE9，提供了4中文档模式： IE5：混杂模式； IE7：IE7标准模式渲染页面； IE8：IE8标准模式渲染页面，可以使用Selecto...

wudengzan 2019-08-19 17:15 评论0 收藏0
JavaScript DOM扩展——“HTML5”的注意要点

摘要：如他返回的对象是。方法，这个方法用于确定文档是否获得了焦点。另外，需要注意的是，该属性插入元素并不会执行其中的脚本。在中，方法接收一个字符串，返回一个经过无害处理后的版本。属性同样的，在读模式下返回调用它的元素及所有子节点的标签。与类相关的扩充 getElementsByClassName()方法接收一个参数，即一个或多个类名的字符串。如： console.log(documen...

cppowboy 2019-08-19 17:14 评论0 收藏0
JavaScript DOM2和DOM3——“DOM的变化”的注意要点

摘要：和级分为许多模块，分别描述了的某个非常具体的子集。这些模块主要有核心视图事件样式遍历和范围以及。另外还有方法和方法框架的变化框架和内嵌框架分别用和表示，它们在级中都有一个新属性这个属性包含一个指针，指向表示框架内容的文档对象。 DOM2和DOM3级分为许多模块，分别描述了DOM的某个非常具体的子集。这些模块主要有核心（Core）、视图（Views）、事件（Events）、样式（Styl...

骞讳护 2019-08-19 17:14 评论0 收藏0
JavaScript DOM2和DOM3——“遍历”的注意要点

摘要：级遍历和范围模块定义了两个用于辅助完成顺序遍历结构的类型和这两个类型能够基于给定的起点对结构执行深度优先的遍历操作。其中的属性，表示任何遍历方法在上一次遍历中返回的接待你。通过设置这个属性也可以修改遍历继续进行的节点。 DOM2级遍历和范围模块定义了两个用于辅助完成顺序遍历DOM结构的类型：NodeIterator和TreeWalker；这两个类型能够基于给定的起点对DOM结构执行深度...

antz 2019-08-19 17:17 评论0 收藏0