重学JS—第11章DOM扩展1选择符（选择DOM）querySelector()返回第一个满足要求的元素querySel

1 选择符（选择DOM）

querySelector() 返回第一个满足要求的元素

querySelectorAll() 返回一个NodeList实例

matchesSelector()

<ul id="mtlist">
<script>    
let mylist = document.getElementById('mtlist')   
if (mylist.webkitMatchesSelector('ul')){        alert(111)    
}    
if (mylist.matches('ul')){
        alert(222)    
}
</script>

2 针对元素的补充API

针对元素之间的空格，浏览器会返回文本节点（IE9及之前版本除外）

会忽略掉文本节点和注释

mylist.childElementCount
mylist.firstElementChild
mylist.lastElementChild
mylist.previousElementSibling
mylist.nextElementSibling

3 HTML5针对DOM的API

3.1 关于class的补充

1. getElementsByClassName()方法

_2\. classList 属性_

classList 属性是新集合类型 DOMTokenList 的实例

add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。

contains(value)：表示列表中是否存在给定的值，如果存在则返回 true，否则返回 false。

remove(value)：从列表中删除给定的字符串。

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

3.2 焦点管理

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

新增了 document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。

3.3 HTMLDocument的变化

1\. readyState 属性

Document 的 readyState 属性有两个可能的值：

loading，正在加载文档；

complete，已经加载完文档。

2\. 兼容模式

3\. head 属性

3.4 字符集属性charset

3.5 自定义属性

IE11开始支持

//本例中使用的方法仅用于演示
var div = document.getElementById("myDiv"); 
//取得自定义属性的值
var appId = div.dataset.appId; 
var myName = div.dataset.myname; 
//设置值
div.dataset.appId = 23456; 
div.dataset.myname = "Michael";

3.6 插入标记

innerHTML

无作用域元素失效问题

插入style

不是所有元素都支持innerHTML

outerHTML

用于元素替换

let mydiv = document.getElementById('mydiv')
let p = document.createElement('p')
p.appendChild(document.createTextNode('good job'))
// mydiv.parentNode.replaceChild(p,mydiv)
mydiv.outerHTML = p.innerHTML

insertAdjacentHTML()

scrollIntoView() 滚动，可以设置锚点，所有浏览器都支持

链接

4 专有扩展

文档模式

决定了可以用什么级别的css，在JS中使用哪些API，如何对打doctype

children属性

是HTMLCollection的实例

和childNodes的区别

contains()

用于判断DOM元素的包含关系；

重学JS—第11章DOM扩展