ch11 DOM扩展

最新推荐文章于 2022-11-16 21:35:54 发布

大白Mango

最新推荐文章于 2022-11-16 21:35:54 发布

阅读量142

点赞数

分类专栏：啃红书系列文章标签：红皮书 JavaScript高级教程读书笔记

本文链接：https://blog.csdn.net/lmq_buaa/article/details/85916494

版权

啃红书系列专栏收录该内容

3 篇文章 0 订阅

订阅专栏

DOM扩展

1. 选择符API

1.1 `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');

1.2 `querySelectorAll()`

querySelectorAll()方法接收一个 CSS 选择符,返回的是一个带有所有属性和方法的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";
}

1.3 `matchesSelector()`

Selectors API Level 2 规范为Element 类型新增了一个方法matchesSelector()。这个方法接收一个参数，即CSS 选择符，如果调用元素与该选择符匹配，返回true；否则，返回false。
在取得某个元素引用的情况下，使用这个方法能够方便地检测它是否会被querySelector()或querySelectorAll()方法返回。
截至2011 年年中，还没有浏览器支持matchesSelector()方法；不过，也有一些实验性的实现。IE 9+通过msMatchesSelector()支持该方法，Firefox 3.6+通过mozMatchesSelector()支持该方法，Safari 5+和Chrome 通过webkitMatchesSelector()支持该方法。因此，如果你想使用这个方法，最好是编写一个包装函数。

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")){
//执行操作
}

2. 元素遍历

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

childElementCount:
firstElementChild:
lastElementChild:
previousElementSibling:
nextElementSibling:

// DOM 扩展前，遍历某 element 的子元素
var child = element.firstChild;
while(child != element.lastChild) {
  if (child.nodeType == 1){ //检查是不是元素
    processChild(child);
  }
  child = child.nextSibling;
}

// 使用 DOM 扩展后的方法
var child = element.firstElementChild;
while(child != element.lastElementChild) {
  processCHild(child);
  child = child.**nextElementSibing;
}

3. HTML5

3.1 与类相关的扩充

getElementsByClassName() 方法

该方法接受一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList。

// 取得所有类中包含‘username' 和 ’current' 的元素，类名的顺序无所谓
var allCurrentUsernames = document.getElementsByClassName('username current');

// 取得 id 为 myDiv 的元素中带有类名 selected 的元素
var selected = document.querySelector('#myDiv').getElementsByClassName('Selected');

classList 属性

classList属性是新集合类型DOMTokenList的实例，有length属性，可以通过item()和[]方括号取得每个元素。
这个新类型定义了如下方法：

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

// div 为一个 DOM 元素
// 移除 div 的 user 属性
div.classList.remove("user");
//删除"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]);
}

3.2 焦点管理

document.activeElement

document.activeElement始终会引用DOM当前获得焦点的元素。
文档刚加载完时，该属性保存的是document.body；加载过程中该属性为null。

var btn = document.getElementById('myButton');
btn.focus();
alert(btn == document.activeElement); // true

document.hasFocus()

document.hasFocus()用于确定文档是否获得了焦点

var btn = document.getElementById('myButton');
btn.focus();
alert(document.hasFocus()); // true

3.3 HTMLDocument的变化

readyState属性

Document的readyState属性有两个值：

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

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

compatMode属性

compatMode属性显示采用哪种渲染模式。在标准模式下，document.compatMode的值为CSS1Compat;在混杂模式下，document.compatMode的值为BackCompat。

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

head 属性

新增document.head属性引用文档的<head>。

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

3.4 字符集属性

charset属性

charset属性表示文档中实际使用的字符集，也可以指定新字符集。默认是’UTF-16’

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

defaultCharset属性

defaultCharset，表示根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么。

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

3.5 自定义数据属性

可以以data-为前缀添加任意属性。通过dataset属性来访问，该属性是DOMStringMap的实例。

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>
<script>
    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);
    }
</script>

3.6 插入标记

innerHTML

在读模式下，innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的HTML 标记。
在写模式下，innerHTML 会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。
但是，在大多数浏览器中，通过innerHTML 插入<script>元素并不会执行其中的脚本.
不支持innerHTML 的元素有：
<col>、<colgroup>、<frameset>、<head>、<html>、<style>、<table>、<tbody>、<thead>、<tfoot>和<tr>。此外，在IE8 及更早版本中，<title>元素也没有innerHTML 属性。

outerHTML

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

<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>

<script>
    var div = document.querySelector('#contend');
    var outerHtml = div.outerHTML; // 读模式，返回上面html代码

    // 写模式，此时 div 标签会被 新创建的 p 标签完全替代
    div.outerHTML = "<p>This is a paragraph.</p>"; 
</script>

insertAdjacentHTML()方法

该方法接受两个参数，插入位置和要插入的HTML文本。
第一个参数取值如下图：
在这里插入图片描述

//作为前一个同辈元素插入
element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>");
//作为第一个子元素插入
element.insertAdjacentHTML("afterbegin", "<p>Hello world!</p>");
//作为最后一个子元素插入
element.insertAdjacentHTML("beforeend", "<p>Hello world!</p>");
//作为后一个同辈元素插入
element.insertAdjacentHTML("afterend", "<p>Hello world!</p>");

内存和性能问题

在使用innerHTML、outerHTML 属性和insertAdjacentHTML()方法时，最好先手工删除要被替换的元素的所有事件处理程序和JavaScript 对象属性。

3.7 `scrollIntoView()`方法

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      height: 300px;
    }
    #red {
      background-color: darkorange;
    }
    .blue {
      background-color: darkcyan;
    }
  </style>
</head>
<body>
  <div id="red"></div>
  
  <div class="blue"></div>
  <div id="blue" class="blue">
    <button id="btn1">scrollIntoView(true)</button>
    <button id="btn2">scrollIntoView(false)</button>
  </div>
</body>
  <script>
    var btn1 = document.querySelector('#btn1');
    var btn2 = document.querySelector('#btn2');
    var red = document.querySelector('#red');
    btn1.addEventListener('click', function() {
      red.scrollIntoView()
    })
    btn2.addEventListener('click', function() {
      red.scrollIntoView(false)
    })
  </script>
</html>

在这里插入图片描述

4.专有扩展

4.1 `contains()`方法

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

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

使用DOM Level 3 compareDocumentPosition()也能够确定节点间的关系。这个方法用于确定两个节点间的关系，返回一个表示该关系的位掩码（ bitmask）。下表列出了这个位掩码的值。
在这里插入图片描述

4.2 插入文本

没有被HTML5纳入规范的两个属性-innerText和outerText。

4.3 滚动

HTML5 在将ScrollIntoView()纳入规范之后，仍然还有其他几个专有方法可以在不同的浏览器中使用。下面列出的几个方法都是对HTMLElement 类型的扩展，因此在所有元素中都可以调用。
在这里插入图片描述

//将页面主体滚动5 行
document.body.scrollByLines(5);

//在当前元素不可见的时候，让它进入浏览器的视口
document.images[0].scrollIntoViewIfNeeded();

//将页面主体往回滚动1 页
document.body.scrollByPages(-1);

大白Mango

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ch11 DOM扩展

DOM扩展1. 选择符API1.1 querySelector()querySelector()方法接收一个 CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。// 取得 body 元素var body = document.querySelector('body');// 取得 id 为 myDiv 的元素var myDiv = document...
复制链接

扫一扫