js高级程序设计笔记——DOM扩展

2019年8月31日 102次阅读 来源: 李小二的技术之路

DOM扩展

  • 为了实现更多的功能，会有一些标准或专有的DOM扩展。

  • 标准扩展主要有：

    • SelectorAPI（选择符API）
    • HTML5
    • Element Traversal（元素遍历）

一、 选择符API

  • 选择符API能够允许JS代码直接根据CSS选择符选择与某个模式匹配的DOM元素。
  • Selector API Level1有两个核心方法：querySelector()、querySelectorAll()，在兼容的浏览器中，Document及Element类型的实例可以调用它们。
  • Selector API Level2为Element类型新增了一个方法：matchesSelector()。

（一）querySelector()方法

  1. 语法：querySelector(CSS选择符)：返回与该CSS选择符匹配的第一个元素，若无匹配元素，则返回null
  2. 实例：
    //取得body元素
    var body = document.querySelector(“body”);
    //取得ID为”myDiv”的元素
    var myDiv = document.querySelector(“#myDiv”);
  3. 注释：
    Document类型调用querySelector()方法，会在文档元素的范围内查找匹配的元素
    Element类型调用querySelector()方法，只会在该元素后代元素的范围内查找匹配的元素

（二）querySelectorAll()方法

  1. 语法：querySlectorAll(css选择符)：返回所有匹配的元素，这些元素以NodeLise形式存在
  2. 要取得NodeList中的元素，可以使用item()方法或者使用方括号语法

（三）matchesSelector()方法

  1. 语法：matchesSelector(CSS选择符)，如果调用元素与该选择符匹配，返回true；否则，返回false

  2. 各个浏览器对matchesSelector()方法只有一些实验性地实现，若想使用该方法，最好是编写一个包装函数：

    function matchesSelector(element,selector){

    if(element.matchesSelector){
    return element.matchesSelector(selector);
}
// IE9+
else if(element.msMatchesSelector){
    return element.msMatchesSelector(selector);
}
//Firefox 3.6+
else if(element.mozMatchesSelector){
    return element.mozMatchesSelector(selector);
}
//safari5+、chrome
else if(element.webkitMatchesSelector){
    return element.webkitMatchesSelector(selector);
}
else{
    throw new Error("Not supported.");
}

    }

二、元素遍历

对于元素间的空格，不同浏览器的理解不同（IE9及之前版本不会返回文本节点，而其他所有浏览器都会返回文本节点），导致childNodes和firstChild等属性返回的结果不一致。为了解决这一问题，Element Traversal规范为DOM元素新定义了5个属性：

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

三、HTML5

（一）与类相关的扩展

HTML4使得class属性用得越来越多，为了让开发人员简化对css类的用法，HTML5新增了很多API

1 getElementsByClassName()

该方法即可以被Document类型调用，又可以被Element类型调用，返回的是NodeList对象

2 classList属性

在HTML5之前，想要操作类名，需要使用className属性。为了简化操作类名的方式，HTML5为所有元素新增了classList属性，classList属性还定义了如下方法：

  • add(value)：将value添加到类名列表中，若该值已经存在，就不添加
  • contains(value)：列表中如果存在value值，则返回true；否则返回false
  • remove(value)：从列表中删除给定的类名
  • toggle(value)：若列表中存在给定的类名，则删除它；若列表中没有给定的值，添加它

支持classList属性的浏览器有FireFox3.6+和Chrome

（二）焦点管理

HTML5新增了辅助管理DOM焦点的功能

1 document.activeElement属性

  • 该属性指向DOM中当前获得焦点的元素（元素获得焦点的方式：页面加载、用户输入、代码中调用focus()方法）
  • 默认情况，文档刚加载完成时，document.activeElement中保存的是document.body元素；文档加载期间，document.activeElement的值为null

2 document.hasFocus()方法

该方法用于确定文档是否获得了焦点

（三）HTMLDocument的变化

1 readyState属性

  • 作用：该属性用来指示文档是否加载完成
  • 该属性由两个取值：
  • loading：正在加载文档
  • complete：已经加载完文档

  • 用法：用它来作为文档加载完成的指示器

    if(document.readyState = “complete”){

       //执行操作

    }

2 compatMode属性

  • 页面有两种模式：标准模式和混杂模式，因此检测页面的模式就成为浏览器的必要功能。
  • 通过使用compatMode属性开发人员可以知道浏览器采用了哪种模式：
  • 标准模式：document.compatMode = “CSS1Compat”
  • 混杂模式：document.compatMode = “BackCompat”

3 head属性

  • document.head属性可以获得<head>元素
  • 实现document.head属性的浏览器有chrome和Safari5
  • 若需要引用<head>元素，可以使用以下方法兼容所有的浏览器：
    var head = document.head || document.getElementsByTagName(“head”)[0];

（四）字符集属性

1 charset属性

  • 含义：表示文档中实际使用的字符集，也可以用来指定新的字符集。
  • 默认情况下，document.charset = “UTF-16”
  • 支持该属性的浏览器有：IE、Firefox、Safari、Opera、Chrome

2 defaultCharset属性

  • 含义：当前文档的默认字符集
  • 支持该属性的浏览器有：IE、Safari、Chrome

（五）自定义数据属性

1、 HTML5规定可以为元素添加非标准的属性，以此为元素提供与渲染无关的信息，或者提供语义信息
2、何时应用自定义数据属性？
当给元素添加一些不可见的数据以便进行其他处理，就会用到自定义数据属性。在跟踪链接或混搭应用中，通过自定义数据属性能方便地知道点击来自页面的哪个部分。
3、每个自定义数据属性，都要为其添加前缀data-

<div id="myDiv" data-appId="12345" data-myName="nicholas"></div>

4、dataset属性可以访问自定义属性的值

//访问上述div元素的自定义属性  
var div = document.getElementById("myDiv");  
var appId = div.dataset.appId;  // 访问自定义属性值时，属性名前不必加data-前缀

（六）插入标记

1 innerHTML属性

  • 在读模式下，innerHTML属性返回调用元素的所有子节点HTML标记
    在写模式下，innerHTML属性会根据指定的值创建新的DOM树，然后用新DOM树替换调用元素原先的所有子节点
  • 在读模式下，不同的浏览器返回的结果不同

2 outerHTML属性

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

3 insertAdjacentHTML()方法

  • 语法：insertAdjacentHTML(插入位置，要插入的HTML文本)

  • 插入位置必须是下列四个值之一：

    • “beforebegin”，在当前元素之前插入一个紧邻的同辈元素
    • “afterend”，在当前元素之后插入一个紧邻的同辈元素
    • “afterbegin”，给当前元素插入第一个子元素（不管当前元素是否有无子元素）
    • “beforeend”，给当前元素插入最后一个子元素（不管当前元素是否有无子元素）

（七）scrollIntoView()方法

所有HTML元素均可调用该方法，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。
该方法参数的取值有两种可能：
true：窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐（不传入参数时也会出现这种效果）
false：调用元素会尽可能全部出现在视口中，调用元素的底部会与视口顶部平齐。

四 专有扩展

（一）文档模式

document.documentMode

（二）children属性

返回调用元素的元素子节点

（三）contains()方法

检测某节点是不是另一个节点的后代

（四）插入文本

1 innerText属性
2 outerText属性

（五）滚动

    原文作者：李小二的技术之路
    原文地址: https://segmentfault.com/a/1190000010995841
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞