🤳带你在线探秘,解开"专有扩展"的神秘面纱!

1. 选择符API

在操控节点或元素时咱们要先选取咱们要操做的节点,这里就须要用到选取工具----选择符APIhtml

Selectors API Level 1的核心是两个方法：querySelector()和querySelectorAll()数组

1.1. querySelector()方法

他接收一个选择符,返回符合要求的第一个元素,若没有返回null浏览器

//获取第一个div元素

var div01 = document.querySelector("div");

//获取ID为"123"的元素

var element123 = document.querySelector("#123");

//获取类为Person的第一个元素

var Person = document.querySelector(".Person");

//获取类为Person的第一个图像元素

var PersonImg = document.querySelector("img.Person");
复制代码

调用时做用域不一样查找范围不一样,在document类型下调用会在文档范围内查找匹配项,在element类型下调用只会在该元素后代查找markdown

1.2. querySelectorAll()方法

输入和上一个同样,返回的是一整个NodeList实例,即包含该API的一整组,可调用的类型除了document,element还有documentFragmentsvn

//获取某div中的某元素的全部
var emmms = document.getElementById(".123").querySelectorAll("emmm");
复制代码

要取得返回的NodeList中的每个元素可使用item()方法,或方括号语法(仿数组)函数

//strongs是一个取得的元素的全部

var i, len, strong;

for (i = 0, len = strong.length; i < len; i++ )
{
    strong = strongs[i];
    //或strongs.item(i);

    strong.className = "important";
}
复制代码

1.3. matchesSelector()方法

Selectors API Level 2规范为Element类型新增了一个方法matchesSelector().若是调用元素和输入选择符匹配,返回true,否就false工具

//检测body元素下的调用元素是否与pagel匹配
if (document.body.matchsSelector("body.pagel"))
{
    //true
}
复制代码

2. 元素遍历

元素间的空格在IE9以前的版本不会返回文本节点,而其余浏览器都返回,这致使的差别会让使用firstNode等属性时行为不一致性能

因而Element Traversal API为DOM元素添加了如下5个属性。测试

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

能够更方便的遍历元素flex

var i, len, child = element.firstElementChild;

wheil(child != element.lastElementChild)
{
    //此处是对child的一些操做的简略表明,好比能够在这里写一个输出,并不是一个方法
    processChild(child);

    child = child.nextElementSibling;
}
复制代码

3. HTML5

其规则定义了大量js API

3.1. 与类相关的扩充

3.1.1. getElementsByClassName()方法

能够更方便的为带有某些类的元素添加事件处理程序

接收一个参数,能够是包含一个或多个类名的字符串,返回带有指定类的全部元素的NodeList,其类名前后顺序不重要

//取得ID为123的元素中带有456类名的全部元素
    var element01 = document.getElementsById("123").getElementsByClassName("456");

    //取得全部类中包含789和012的全部元素
    var element02 = document.getElementsByClassName("789 012");
复制代码

调用时做用域不一样查找范围不一样,在document类型下调用会返回类名匹配全部元素,在元素下调用只会在该元素后代查找

3.1.2．classList属性

简化了之前的对className属性的添加,修改,删除的操做

classList属性是DOMTokenList的实例,DOMTokenList有length属性，而要取得每一个元素可使用item()方法，也可使用方括号语法.

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

toggle(value)：若是列表中已经存在给定的值，删除它；若是列表中没有给定的值，添加它。

//有一个div有三个类
 <div class = "zy zjj user">...</div>;

 //删除user类
 div.classList.remove("user");

 //添加qwer类
 div.classList.add("qwer");

 //检测是否存在user类,有就删除,没有就添加,简称"切换"
 div.classList.toggle("user");

 //肯定元素中是否存在既定类名
 if (div.classList.contains("zzy") )
 {
     //执行操做
 }
复制代码

3.2. 焦点管理

document.activeElement属性，这个属性始终会引用DOM中当前得到了焦点的元素。文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间，document.activeElement的值为null。

元素得到焦点的方式有页面加载、用户输入（一般是经过按Tab键）和在代码中调用focus()方法。

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

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

//true
document.activeElement === button;
复制代码

document.hasFocus()方法，这个方法用于肯定文档是否得到了焦点。也能够用于肯定用户是否正在与页面交互

这两个结合能够知道用户具体在和哪一个元素交互

3.3. HTMLDocument的变化

3.3.1. readyState属性

该属性有两个可能值:

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

咱们可使用document.readyState来实现查看文档是否加载完成的指示器

if (document.readyState == "complete")
{
    //执行操做
}
复制代码

3.3.2. 兼容模式

IE给document添加了一个名为compatMode的属性，可知浏览器采用了哪一种渲染模式,在标准模式下，document.compatMode的值等于"CSS1Compat"，而在混杂模式下，document.compatMode的值等于"BackCompat"。

3.3.3. head属性

3.4. 字符集属性

charset属性,其值为"UTF-16",表示文档中实际使用的字符集
defaultCharset属性,表示当前文档默认的字符集应该是什么,若没有使用默认字符集,那么charset和defaultCharset的值可能会不同

经过这两个属性能够获得文档使用的字符编码的具体信息,能够保证用户正常查看页面或使用应用

3.5. 自定义数据属性

h5中能够自行为元素添加非标准属性,要加前缀data-.能够根据自定义数据属性性能方便的知道点击来自页面的哪一个部分

在除了第一次使用(相似于给自定义属性定义)之外的调用都不须要data-前缀

3.6. 插入标记

在大规模操控节点的状况下使用直接插入HTML字符串会更简单

3.6.1. innerHTML属性

在读模式下,它返回与调用元素全部子节点对应的HTML标记

在写模式下,根据指定的值建立新的DOM树,以此替换掉元素原先全部的子节点

3.6.2．outerHTML属性

3.6.3．insertAdjacentHTML()方法

3.6.4．内存与性能问题

3.7 scrollIntoView()方法

解决滚动页面

能够在全部HTML元素上调用

传入true或不传,窗口滚动以后会让调用元素的顶部与视口顶部尽量平齐。

传入false,调用元素会尽量所有出如今视口中,不必定平齐

4. 专有扩展

即专属于一些浏览器而且未成为标准的扩展

4.1. 文档模式

文档模式决定了咱们可使用哪一个级别的CSS,能够在js中使用哪些API,以及如何对待文档类型,IE5,7,8,9每一个版本都有一种本身的文档模式

好比IE5是以混杂模式渲染页面,IE7是IE7标准模式,他们都没法使用IE8以后的新功能

IE8是IE8标准模式,使用，所以可使用Selectors API、更多CSS2级选择符和某些CSS3功能，还有一些HTML5的功能。一样,IE9以后新功能没法使用

IE9的文档模式是最高级的文档模式

若是想要强制浏览器以某种模式渲染页面能够用等价的标签或使用HTTP头部信息X-UA-Compatible

//强制以IE7文档模式渲染
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
复制代码

Edge：始终以最新的文档模式来渲染页面。忽略文档类型声明。对于IE8，始终保持以IE8标准模式渲染页面。对于IE9，则以IE9标准模式渲染页面。
EmulateIE9：若是有文档类型声明，则以IE9标准模式渲染页面，不然将文档模式设置为IE5。
EmulateIE8：若是有文档类型声明，则以IE8标准模式渲染页面，不然将文档模式设置为IE5。
EmulateIE7：若是有文档类型声明，则以IE7标准模式渲染页面，不然将文档模式设置为IE5。
9：强制以IE9标准模式渲染页面，忽略文档类型声明。
8：强制以IE8标准模式渲染页面，忽略文档类型声明。
7：强制以IE7标准模式渲染页面，忽略文档类型声明。
5：强制将文档模式设置为IE5，忽略文档类型声明。

通常在默认状况下,浏览器会经过文档类型声明来肯定文档模式

document.documentMode属性能够知道给定页面使用的是什么文档模式,返回版本号

4.2. children属性

这个属性出现的缘由是IE9以前的版本与其余浏览器在出来文本节点中的空白符时出现了差别

这个属性是HTMLCollection的实例，只包含元素中一样仍是元素的子节点，除此以外children和childNodes没有区别

//访问时与childNodes同样
var childCount = element.children.length;
var firstChild = element.children[0];
复制代码

4.3. contains()方法

用于查找某节点是不是另外一个节点的后代

能够不经过DOM文档树来获取这个信息

应用祖先节点调用该方法,返回true和false

//测试<body>元素是不是<html>元素的后代
alert(document.documentElement.contains(document.body));

//true
复制代码

类似方法:DOM Level 3 compareDocumentPosition()

用于肯定两个节点之间的关系

返回一个表示该关系的位掩码

掩码	节点关系
1	无关(给定的节点不在当前文档中)
2	居前(给定的节点在DOM树中位于参考节点以前)
4	居后(给定的节点在DOM树中位于参考节点以后)
8	包含(给定的节点是参考节点的祖先)
16	被包含(给定的节点是参考节点的后代)

咱们能够将获得的掩码用逻辑符转化成布尔值来用函数检测节点关系

4.4. 插入文本

1. innerText属性

能够操做元素中包含的全部文本内容,包括文档树中的文本

他会按照由浅入深的顺序将树中全部的文本拼接起来

经过innerText写入值时会删除元素的全部子节点,而后插入包含相应文本值的文本节点

div.innerText = " Hello \" world \" !"

//设置innerText属性的同时，也对文本中存在的HTML语法字符（小于号、大于号、引号及和号）进行了编码。
复制代码

由于innerTest永远只会生成当前节点的一个子文本节点,因此为了只生成一个子文本节点,他就必需要删掉其余的子节点标签,咱们能够用这个来过滤掉HTML标签

div.innerText = div.innerText;
复制代码

类似方法:DOM Level 3的textContent属性

这两个属性返回的内容不彻底同样

这个会返回行内样式和脚本

2. outerText属性

和innerText的区别在于做用范围扩大到了调用他的节点以外

读取文本时和前者同样

但在写模式下outerText会替换掉整个元素(包括子节点)

div.outerText = " Hello world ";

//至关于将hello~赋值给了建立的一个新的变量,而后用新变量替换原来的元素,该元素会被删除没法访问
复制代码

4.5. 滚动

scrollIntoViewIfNeeded(alignCenter)：当前元素在视口中不可见的状况下，滚动浏览器窗口或容器元素，让它可见。若是当前元素在视口中可见，这个方法什么也不作。若是将可选的alignCenter参数设置为true，则表示尽可能将元素显示在视口中部（垂直方向）。
scrollByLines(lineCount)：将元素的内容滚动指定的行高，lineCount值能够是正值，也能够是负值。
scrollByPages(pageCount)：将元素的内容滚动指定的页面高度，具体高度由元素的高度决定。

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

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

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