DOM扩展

一、选择符API

jQuery的核心是通过CSS选择选择符DOM文档取得元素的引用

1.1、querySelector（）方法

querySelector（）方法接受一个css选择符，返回与该模式匹配的一个元素，如果没有找到匹配的元素，返回null。

能够调用的类型是Document，DocumentFragment和Element

1.2、querySelectorAll（）方法

返回的是所有匹配的元素，这个方法返回的是一个NodeList的实例
要去取得返回的NodeList钟的每一个元素，可以使用item方法，也可以使用方括号语法，
能够调用的类型是Document，DocumentFragmen（文档片段）t和Element

1.3、element.matchesSelector（）方法

这个方法接受一个参数，即css选择符，如果调用的元素与该选择符匹配，返回true，否则，返回false
能够调用的类型是Element

  
<div id="foo">This is the element!</div>
  <script type="text/javascript">
    var el = document.getElementById("foo");
    if (el.matchesSelector("div")) {
      alert("Match!");
    }
  </script>```


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

二、元素遍历

对于元素间的空格，IE9之前不会返回文本节点，而其他浏览器可以返回文本节点。这样就导致childNodes和firstChild等属性时的行为不一致，故定义以下属性：

childElementCount（）：返回子元素的个数
firstElementChild（）：指向第一个元素（firstChild的元素版）
lastElementChild（）：指向最后一个元素（lastChild的元素版）
previousElementSibling（）：指向前一个同辈元素
nextElementSibling（）：指向后一个同辈元素

//使用lastChild
var i,
len,
child=element.firstChild;
while(child!=element.lastChild){
if(child.nodeType==1){
processChild(child)
}
child=child.nextSibling;
}
//使用lastElementChild,不必再检查是否子元素是否未element类型
var i,
len,
child=element.firstElementChild;
while(child!=element.lastElementChild){
processChild(child)
child=child.nextElementSibling;
}

三、HTML5

3.1、与类相关的扩充

3.1.1、getElementsByteClassName（）方法

接受一个参数，即一个包含一个或者多个类名的字符串

可以通过document对象以及所以的HTML元素调用该方法。

返回值为NodeList，故有和getElementByTagName（）以及其他返回NodeList的DOM方法都具有同样的性能问题

3.1.2、classList属性

删除一个类名

 var className=div.className.split(/\s+/);
 var pos=-1,
 i,
 len;
 for(var i=0,len=className.length;i<len;i++){
 if(className[i]=="user"){
 pos=i;
 break;
 }
 }
 className.splice(i,1);
 div.className.join("")

HTML5新增了一种操作类名的方式，可以让操作更加简单，就是为所有的元素添加classList属性，这个classList属性是新集合类型DOMTokenList的实例。

与其他DOM集合类似，DOMTokenList有一个表示自己包含多少元素的length属性，而要取得每个元素就可以使用item（）方法，也可以使用方括号语法。还定义如下方法：

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

 var div=document.getElementsByTagName("div")[0] 
 div.classList.remove("disabled");
 console.log(div.classList)//DOMTokenList ["user", value: "user"]
 div.classList.add("current")
 console.log(div.classList)//DOMTokenList(2) ["user", "current", value: "user current"]
 if(div.classList.contains("user")){
 console.log("contains")//contains
 }
 for(var i=0,len=div.classList.length;i<len;i++){
 console.log(div.classList[i])//user current    }

这样前面删除一个类名的代码，就可以用一行代替

div.classList.remove("user")

3.1.3、焦点管理

document.activeElement属性，这个属性始终会引用DOM中当前获得焦点的元素。

 var button=document.getElementById("myButtton");
 button.focus();
 console.log(document.activeElement===button)//true

document.hasFocus（）：确定文档是否获得了焦点

var button=document.getElementById("myButtton");
button.focus();
console.log(document.hasFocus())//true

3.2、HTMLDocument的变化

3.2.1、readyState属性

Document的readyState属性有两个可能的值
loading（)，正在加载文档
complete（），已经加载完文档
使用document.readyState最恰当的方式，就是通过它实现一个指示文档加载完成的指示器

if（document.readyStats=="complete")
{
}

3.1.3、兼容模式

document添加了一个名为compatMode的属性，这个属性就是为了告诉开发人员浏览器采用了哪种渲染模式
在标准模式下，document.compatMode的浏览器值等于”CSS1Compat“，而在混杂模式下，document.compatMode的值为”BackCompat“

3.1.4、head属性

HTML5新增了document.head属性

3.3、字符集属性

charset属性表示文档中实际使用的字符集
defaultCharset属性表示根据默认浏览器及操作系统的设置

3.4、自定义数据属性

HTML规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息

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

添加了自定义属性后，可以通过元素的dataset属性来访问自定义的属性的值

3.5、插入标记

3.5.1、innerHTML属性

在读模式下，innerHTML属性返回与调用元素的所有子节点元素（包括元素、注释和文本节点）对应的HTML标记

<div id="content">
<p>1111</p>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>

var content=document.getElementById("content");
console.log(content.innerHTML)
// 返回
// <p>1111</p> 
//<ul>
//<li>1</li>
//<li>2</li>
//</ul>

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

div.innerHTML="Hello World"

3.5.2、outerHTML属性

在读模式下，outerHTML返回调用他的元素及所有子节点的HTML标签，包括本身

 console.log(content.outerHTML)
 //输出
 //<div id="content">
   //     <p>1111</p>
     //   <ul>
       //     <li>1</li>
         //   <li>2</li>
        //</ul>
    //</div>

在写模式下，outerHTML会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素

ontent.outerHTML="<p>This is a paragraph</p>"
var p=document.getElementsByTagName("p")[0];
console.log(p.outerHTML)//<p>This is a paragraph</p>

3.5.3、insertAdjacentHTML（）方法

它接收两个参数：插入的位置和要插入的HTML文本，第一个参数必须是下列值：
beforebegin：当前元素之前插入一个紧邻的同辈元素
afterend：在当前元素之后插入一个紧邻的同辈元素
afterbegin：当前元素之下插入一个新的子元素或者在第一个元素之前在插入新的子元素
beforeend：当前元素之下插入一个新的子元素或者在最后一个元素之后在插入新的子元素

  <!-- beforebegin -->
  <p id="content">
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
  </p>  
  <!-- afterend -->

3.5.4内存与性能问题

这些方法替换子节点可能会导致浏览器的内存占用问题，一般来说，我们最好设置innerHTML或outerHTML的次数控制在合理的范围内，例如：下面代码使用innerHTML创建了很多列表项

for(var i=0,len=values.length;i<len;i++){
ul.innerHTML+="<li>"+values[i]+"<li>"

最好的做法是单独构建字符串，然后在一次性的将结果赋值给innerHTML

var itemsHtml=''
for(var i=0,len=values.length;i<lem;i++){
itemsHtml+="<li>"+values[i]+"<li>"
}
ul.innerHTML=itemsHtml

只对innerHTML进行了一次赋值操作

3.6、scrollIntoView（）方法

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。
三种用法如下：

element.scrollIntoView(); // 等同于element.scrollIntoView(true) 
element.scrollIntoView(alignToTop); // Boolean型参数 
element.scrollIntoView(scrollIntoViewOptions); // Object型参数

参数

• alignToTop可选
  一个Boolean值：
  如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: “start”, inline: “nearest”}。这是这个参数的默认值。
  如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: “end”, inline: “nearest”}。

• scrollIntoViewOptions 可选
  一个包含下列属性的对象：
  behavior 可选
  定义动画过渡效果， "auto"或 “smooth” 之一。默认为 “auto”。
  block 可选
  定义垂直方向的对齐， “start”, “center”, “end”, 或 "nearest"之一。默认为 “start”。
  inline 可选
  定义水平方向的对齐， “start”, “center”, “end”, 或 "nearest"之一。默认为 “nearest”。

四、专有扩展

4.1、文档模式

4.2、children属性

children与childNodes区别
childNodes它是标准属性，它返回指定元素的子元素集合，包括元素节点，属性节点，文本节点。
children：非标准属性，它返回指定元素的子元素集合。包括元素节点

<div id="father1"><div>01</div><div>02</div><div>03</div></div>        
<div id="father2"> <div>01</div><div>02</div><div>03</div></div>
<script type="text/javascript">
console.log(document.getElementById("father1").children);//HTMLCollection(3) [div, div, div]
console.log(document.getElementById("father1").childNodes)//NodeList(3) [div, div, div]
console.log(document.getElementById("father2").children);//HTMLCollection(3) [div, div, div]
console.log(document.getElementById("father2").childNodes)//NodeList(4) [text, div, div, div]
</script>

4.3、constains（）属性

判断某个节点是不是另一个节点的后代，调用此方法的应该是祖先节点，也就是开始的节点，这个方法接收一个参数，即要检测的后代节点，如果被检测的是后代节点，返回true

//检测<body>是不是<html>的后代
console.log(document.documentElement.contains(document.body))

使用compareDocumentPosition（）也可以确定节点之间的关系，返回一个表示该关系的掩码，可以模仿contains（）：

 var result=document.documentElement.compareDocumentPosition(document.body)
 console.log(result)
 console.log(!!(result&16))

4.4、插入文本

innerText和outerText

4.4.1、innerText属性

通过innerText属性可与操作元素中包含的所有文本内容，包括文档树的文本。
读取值时，它会由浅入深，将子文档树的所有的文本拼接起来

<div id="content">
<p>sssss</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
var div=document.getElementById("content");
console.log(div.innerText)
// 返回
// sssss

// 1
// 2
// 3

在写模式时，会删除元素的所有子节点，插入包含相应文本值的文本节点

div.innerText="Hello World"
console.log(div.innerText)//Hello World

为了确保只生成一个文本子节点，就必须要对文本进行html编码，利用这一点，可以通过innerText属性过滤掉HTML标签

div.innerText=div.innerText

<label id="lab">请输入北京今天空气质量：<input id="aqi-input" type="text"></label>
var lab=document.getElementById("lab")
lab.innerText=lab.innerText
console.log(lab.outerHTML)//<label id="lab">请输入北京今天空气质量：</label>

兼容各类浏览器的写法

function getInnerText(element){
return (typeof element.textContent=="string")? 
element.textContent:element.innerText}
function setInnerText(element,text){
f(typeof element.textContent=='string'){//Firefox浏览器
element.textContent=text
}else{
element.innerText=text
}
}

4.4.2、outerText属性

在读模式下，和innerText一样
在写模式下，不只会替换调用它的元素子节点，而会替换整个元素

4.5、滚动

scrollIntoViewIfNeeded（align）
scrollByLines（lineCount）
scrollByPages（lineCount）