时间戳

首页 > 技术文章 > JavaScript DOM的一些扩展

JavaScript DOM的一些扩展

ljk001 2017-12-23 11:30 原文

对DOM的扩展主要是：Selectors API和HTML5。

Selectors API

Selectors API是由W3C发起指定的一个标准，致力于让浏览器原生支持CSS查询。Selectors API Level1的核心方法：querySelector()和querySelectorAll()。

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()同样接收一个CSS选择符，返回的是所有匹配的元素，是一个NodeList实例。

// 取得某<div>中所有<em>元素
var ems = document.getElementById("myDiv").querySelectorAll("em");

// 获取类为selected的所有元素
var selecteds = document.querySelectorAll(".selected");

// 取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll("p strong");

// 遍历NodeList
var i, len, strong;
for (i = 0, len = strongs.length; i < len; i++) {
    strong = strongs[i];// strong = strongs.item(i);
    strong.className = "important";
}

matchesSelector()方法

Selectors API Level2新增了matchesSelector()，它接收一个CSS选择符，如果调用元素与该选择符匹配，返回true，否则返回false。

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

元素遍历

以往遍历元素的方式：

var i,
    len,
    child = element.firstChild;
while (child != element.lastChild) {
    if (child.nodeType == 1) {  // 检查是否元素
        processChild(child);
    }
    child = child.nextSibling;
}

使用Element Traversal新增的元素：

var i,
    len,
    child = element.firstElementChild;
while (child != element.lastElementChild) {
    processChild(child);
    child = child.nextElementSibling;
}

HTML5

getElementsByClassName()方法

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

// 取得所有类中包含“username”和“current”元素+
var allCurrentUsernames = document.getElementsByClassName("username current");

// 获取ID为“myDiv”的元素中带有类名“selected”的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");

classList属性

HTML5新增了一种操作类名的方式：

// 删除“disabled”类
div.classList.remove("disabled");

// 添加“current”类
div.classList.add("current");

// 切换“user”类
div.classList.toggle("user");

// 确定元素中是否包含既定的类名
if (div.classList.contains("bd") && !div.classList.contains("disabled")) {
    // 执行操作
}

焦点管理

HTML5添加了管理DOM焦点的功能。document.activeElement属性始终会引用DOM中当前获得了焦点的元素。focus()获取焦点，hasFocus()判断是否获取焦点

var button = document.getElementById("myButton");

// 获取焦点
button.focus();

alert(document.activeElement === button);   // true
alert(button.hasFocus());   // true

HTMLDocument的变化

readyState属性

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

  • loading：正在载入文档
  • complete:已经加载完文档

document.readyState属性基本用法：

if (document.readyState == "complete") {
    // ...
}

兼容模式

检测页面的兼容模式是浏览器必要的功能。在标准模式下，document.compatMode的值等于“CSS1Compat”,而混杂模式下，document.compatMode的值等于“BackCompat”。

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

head属性和字符集属性

HTML5新增了document.head元素，引用文档的<head>元素

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

HTML5新增了document.charset元素，表示文档中实际使用的字符集。可以通过<meta>元素、响应头或直接设置charset属性修改。

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

另一个属性defaultCharset，表示根据默认浏览器及曹组系统的设置。如果文档中没有使用默认的字符集，那charset和defaultCharset可能不一致。

if (document.charset != document.defaultCharset) {
    // ...
}

innerHTML属性

读模式下，innerHTML属性返回与调用元素的所有子节点对应的HTML标记。写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。

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

对于上面的<div>元素而言，它的innerHTML属性会返回如下字符串

<p>This is a <strong>para.</strong> with a list following it.</p>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

写模式下，innerHTML的值会被解析为DOM字数，替换调用元素原来的所有子节点。

div.innerHTML = "Hello javascript";

为innerHTML设置的包含HTML的字符串值与解析后innerHTML的值不相同。

div.innerHTML = "Hello & welcome, <b>\"reader\"!</b>";

结果如下：

<div id="content">Hello &amp; welcome, <b>&quot;reader&quot;!</b></div>

原因在于返回的字符串是根据原始HTML字符串创建的DOM树经过序列化之后的结果。

在大多数浏览器中，innerHTML插入<script>元素并不会执行其中的脚本。

div.innerHTML = "<script defer>alert('hello');</script>";// 无效

如果需要插入这段脚本，必须在前面添加一个“有作用域的元素”。例如：

div.innerHTML = "<input type=\"hidden\"><script defer>alert('hello');</script>";

outerHTML属性

在读模式下，outerHTML返回调用它的元素及所有子节点的HTML标签。在写模式下，outerHTML会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。

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

如果在<div>元素上调用outerHTML，会返回上面相同的代码。

使用outerHTML属性设置值：

div.outerHTML = "<p>This is a paragraph.</p>";

这行代码与下面的操作一样：

var p = document.createElement("p");
p.appendChild(document.createTextNode("This is a para."));
div.parentNode.replaceChild(p, div);

insertAdjacentHTML()方法

// 作为第一个同辈元素插入
element.insertAdjacentHTML("beforebegin", "<p>Hello javascript</p>");

// 作为第一个子元素插入
element.insertAdjacentHTML("afterbegin", "<p>Hello javascript</p>");

// 作为最后一个子元素插入
element.insertAdjacentHTML("beforeend", "<p>Hello javascript</p>");

// 作为后一个同辈元素插入
element.insertAdjacentHTML("afterend", "<p>Hello javascript</p>");



本文转载自：https://www.cnblogs.com/xiaoxiaoyihan/p/5692133.html

推荐阅读