每日三问之javascript之DOM 扩展_webkitmatchesselector-CSDN博客

本文链接：https://blog.csdn.net/qq_40412456/article/details/121728714

选择符 API

querySelector

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

//取得 body 元素
var body = document.querySelector("body"); 
//取得 ID 为"myDiv"的元素
var myDiv = document.querySelector("#myDiv"); 
//取得类为"selected"的第一个元素
var selected = document.querySelector(".selected"); 
//取得类为"button"的第一个图像元素
var img = document.body.querySelector("img.button");

querySelectorAll

querySelectorAll返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个 NodeList 的实例。

//取得某<div>中的所有<em>元素（类似于 getElementsByTagName("em")）
var ems = document.getElementById("myDiv").querySelectorAll("em"); 
//取得类为"selected"的所有元素
var selecteds = document.querySelectorAll(".selected"); 
//取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll("p strong");


要取得返回的 NodeList 中的每一个元素，可以使用 item()方法，也可以使用方括号语法，比如：
 var i, len, strong; 
 for (i=0, len=strongs.length; i < len; i++){ 
  strong = strongs[i]; //或者 strongs.item(i) 
  strong.className = "important"; 
 }

matchesSelector

这个方法接收一个参数，即 CSS 选择符，如果调用元素与该选择符匹配，返回 true ；否则，返回 false 。

if (document.body.matchesSelector("body.page1")){ 
 //true 
}

因此，如果你想使用这个方法，最好是编写一个包装函数。

function matchesSelector(element, selector){ 
 if (element.matchesSelector){ 
 return element.matchesSelector(selector); 
 } else if (element.msMatchesSelector){ 
 return element.msMatchesSelector(selector); 
 } else if (element.mozMatchesSelector){ 
 return element.mozMatchesSelector(selector); 
 } else if (element.webkitMatchesSelector){ 
 return element.webkitMatchesSelector(selector); 
 } else { 
 throw new Error("Not supported."); 
 } 
} 
if (matchesSelector(document.body, "body.page1")){ 
 //执行操作
}

元素遍历

Element Traversal API 为 DOM 元素添加了以下 5 个属性。

childElementCount：返回子元素（不包括文本节点和注释）的个数。
firstElementChild：指向第一个子元素；firstChild 的元素版。
lastElementChild：指向最后一个子元素；lastChild 的元素版。
previousElementSibling：指向前一个同辈元素；previousSibling 的元素版。
nextElementSibling：指向后一个同辈元素；nextSibling 的元素版。

HTML5

1、与类相关的扩充

getElementsByClassName

getElementsByClassName() 方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的 NodeList 。

//取得所有类中包含"username"和"current"的元素，类名的先后顺序无所谓
var allCurrentUsernames = document.getElementsByClassName("username current"); 
//取得 ID 为"myDiv"的元素中带有类名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");

classList

在操作类名时，需要通过 className 属性添加、删除和替换类名。

<div class="bd user disabled">...</div>

//删除"disabled"类
div.classList.remove("disabled"); 
//添加"current"类
div.classList.add("current"); 
//切换"user"类
div.classList.toggle("user"); 
//确定元素中是否包含既定的类名
if (div.classList.contains("bd") && !div.classList.contains("disabled")){ 
 //执行操作
) 
//迭代类名
for (var i=0, len=div.classList.length; i < len; i++){ 
 doSomething(div.classList[i]); 
}

add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains(value)：表示列表中是否存在给定的值，如果存在则返回 true，否则返回 false。
remove(value)：从列表中删除给定的字符串。
toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

2、焦点管理

document.activeElement

这个属性始终会引用 DOM 中当前获得了焦点的元素。

// 文档加载期间，document.activeElement 的值为 null。

var button = document.getElementById("myButton"); 
button.focus(); 
alert(document.activeElement === button); //true

document.hasFocus

这个方法用于确定文档是否获得了焦点。

var button = document.getElementById("myButton");
button.focus(); 
alert(document.hasFocus()); //true

3、HTMLDocument的变化

readyState 属性

Document 的 readyState 属性有两个可能的值：

loading，正在加载文档
complete ，已经加载完文档。

if (document.readyState == "complete"){ 
 //执行操作
}

兼容模式

IE 为此给 document 添加了一个名为 compatMode 的属性，这个属性就是为了告诉开发人员浏览器采用了哪种渲染模式。

在标准模式下，document.compatMode 的值等于"CSS1Compat"，
而在混杂模式下，document.compatMode 的值等于"BackCompat"。

if (document.compatMode == "CSS1Compat"){ 
 alert("Standards mode"); 
} else { 
 alert("Quirks mode"); 
}

head 属性

作为对 document.body 引用文档的 <body> 元素的补充， HTML5 新增了 document.head 属性，引用文档的<head> 元素。

var head = document.head || document.getElementsByTagName("head")[0];

document.charset

charset 属性表示文档中实际使用的字符集，也可以用来指定新字符集。默认情况下，这个属性的值为 "UTF-16"

alert(document.charset); //"UTF-16" 
document.charset = "UTF-8";

document.defaultCharset

表示根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么。如果文档没有使用默认的字符集，那 charset 和 defaultCharset 属性的值可能会不一样。

if (document.charset != document.defaultCharset){ 
 alert("Custom character set being used."); 
}

自定义数据属性

HTML5 规定可以为元素添加非标准的属性，但要添加前缀 data- ，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以 data- 开头即可。

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

//本例中使用的方法仅用于演示
var div = document.getElementById("myDiv"); 
//取得自定义属性的值
var appId = div.dataset.appId; 
var myName = div.dataset.myname; 
//设置值
div.dataset.appId = 23456; 
div.dataset.myname = "Michael"; 
//有没有"myname"值呢？
if (div.dataset.myname){
    alert("Hello, " + div.dataset.myname); 
}

专有扩展

children属性

var childCount = element.children.length; 
var firstChild = element.children[0];

contains

调用 contains()方法的应该是祖先节点，也就是搜索开始的节点，这个方法接收一个参数，即要检测的后代节点。如果被检测的节点是后代节点，该方法返回 true；否则，返回 false。

alert(document.documentElement.contains(document.body)); //true

插入文本

innerText 属性

通过 innertText 属性可以操作元素中包含的所有文本内容，包括子文档树中的文本。在通过 innerText读取值时，它会按照由浅入深的顺序，将子文档树中的所有文本拼接起来。在通过

innerText写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点。

<div id="content"> 
 <p>This is a <strong>paragraph</strong> with a list following it.</p> 
 <ul> 
 <li>Item 1</li> 
 <li>Item 2</li> 
 <li>Item 3</li> 
 </ul> 
</div>

// 对于这个例子中的<div>元素而言，其 innerText 属性会返回下列字符串
This is a paragraph with a list following it. 
Item 1 
Item 2 
Item 3

使用 innerText 属性设置这个 <div> 元素的内容，则只需一行代码：

div.innerText = "Hello world!";

执行这行代码后，页面的 HTML 代码就会变成如下所示。

<div id="content">Hello world!</div>

outerText 属性

在读取文本值时， outerText 与 innerText 的结果完全一样。但在写模式下， outerText 就完全不同了：outerText 不只是替换调用它的元素的子节点，而是会替换整个元素（包括子节点）。

div.outerText = "Hello world!";

// 这行代码实际上相当于如下两行代码：
var text = document.createTextNode("Hello world!"); 
div.parentNode.replaceChild(text, div);

scrollIntoView

scrollIntoView() 可以在所有 HTML 元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。如果给这个方法传入 true 作为参数，或者不传入任何参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如果传入 false 作为参数，调用元素会尽可能全部

出现在视口中，（可能的话，调用元素的底部会与视口顶部平齐。）不过顶部不一定平齐。

//让元素可见
document.forms[0].scrollIntoView();