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()方法

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

（二）querySelectorAll()方法

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

（三）matchesSelector()方法

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

各个浏览器对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属性

（五）滚动

js高级程序设计笔记——DOM扩展相关推荐

JS高级程序设计笔记——事件（一）
一.事件流假设有如下HTML代码: <!DOCTYPE html> <html> <head><title>Event</title> & ...
JS高级程序设计——阅读笔记四
JS高级程序设计--阅读笔记四第六章集合引用类型 6.1 Object 6.2 Array 6.2.1 创建数组 from()函数 6.2.2 数组空位 6.2.3 数组索引 6.2.4 检测数组 ...
JS高级程序设计【红宝书】学习笔记——数据类型
目录数据类型 Number类型 1.值的范围 2.NaN 3.数值转换 String类型 1.字符字面量(详见JS高级程序设计P63 2.转换为字符串 Symbol类型 Object类型 objec ...
《Ext JS 高级程序设计》的目录与样张
第一部分 Ext Core 第1 章 Ext Core 重要概念 ············· 2 1.1 Ext.Element······························· 2 1. ...
Ext JS高级程序设计
Ext JS高级程序设计图书详细情况查看: http://www.china-pub.com/193076 市场价 :￥59.00 会员价 : ￥44.25(75折) [作者]黄灯桥;徐会生 [同 ...
js高级程序设计第四部分
js高级程序设计:BOM.客户端检测 BOM window对象在浏览器中,window 对象有双重角色,它既是通过 JavaScript 访问浏览器窗口的一个接口,又是 ECMAScript 规定的 ...
Js高级程序设计第三版学习(十二章)
Js高级程序设计第三版学习(十二章) 第十二章 DOM2和DOM3 1.样式: 访问样式属性任何支持style特性的HTML元素都有一 ...
读js高级程序设计中有感
我现在都到js高级程序设计最难的章节,第六章,对象,虽然有人推荐不用全部读完,但我还是完整的读一遍吧,一遍可以敲代码一边看书理解加百度,我认为这种方式很好,可以加深理解增强印象,这是我觉得这本书比JS ...
《JS高级程序设计》第二遍读书笔记
这一遍的重点还是在JS语言本身,后面的DOM和BOM部分看的比较快,因为现在实际上用的不多,掌握大致的原理,需要的时候再翻手册就可以了. 认为暂时没必要的知识点WebGL, 认为已经不需要.过时的知识 ...

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

DOM扩展

一、选择符API

（一）querySelector()方法

（二）querySelectorAll()方法

（三）matchesSelector()方法

二、元素遍历

三、HTML5

（一）与类相关的扩展

（二）焦点管理

（三）HTMLDocument的变化

（四）字符集属性

（五）自定义数据属性

（六）插入标记

（七）scrollIntoView()方法

四专有扩展

（一）文档模式

（二）children属性

（三）contains()方法

（四）插入文本

（五）滚动

js高级程序设计笔记——DOM扩展相关推荐

最新文章

热门文章

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

DOM扩展

一、 选择符API

（一）querySelector()方法

（二）querySelectorAll()方法

（三）matchesSelector()方法

二、元素遍历

三、HTML5

（一）与类相关的扩展

（二）焦点管理

（三）HTMLDocument的变化

（四）字符集属性

（五）自定义数据属性

（六）插入标记

（七）scrollIntoView()方法

四 专有扩展

（一）文档模式

（二）children属性

（三）contains()方法

（四）插入文本

（五）滚动

js高级程序设计笔记——DOM扩展相关推荐

最新文章

热门文章

一、选择符API

四专有扩展