查找元素

Selector API

querySelector；查找元素

查找选择器。

querySelectorAll；查找元素组

查找匹配的全部选择器；

matches；匹配

matches()这个方法接收一个参数，即css选择符，如果调用元素与该选择符匹配，返回true；否则返回false。

应该是：matches方法；书中写的matchesSelector被废弃了。

元素遍历：Element Traversal API

五个属性;
统一语法: element.childElementCount

childElementCount：

返回子元素（不包括文本节点和注释）的个数；

firstElementChild

指向第一个子元素；

lastElementChild

指向最后一个子元素；

previousElementSibling

指向前一个同辈元素；

nextElementSibling

指向后一个同辈元素；

getElementsByClassName

接受多个类名；传入多个类名时。先后顺序不重要。

classList属性

语法：_element._classList.add(className)

add：

添加class名；

remove：

删除class名；

contains:

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

toggle：

如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

焦点管理

activeElement属性

语法：document.activeElement
activeElement 属性返回文档中当前获得焦点的元素。
注意： 该属性是只读的。
提示： 为元素设置焦点，可以使用 element.focus() 方法。
提示：可以使用 document.hasFocus() 方法来查看当前元素是否获取焦点。
示例代码

点击文档中任意一元素输出元素标签名。

hasFocus()方法

hasFocus() 方法返回布尔值，用于检测文档是否获取焦点(document.hasFocus()必须是document)。
返回值：
true - 文档获取焦点
false - 文档未获取焦点
实例代码：
var x = document.getElementById(“demo”);
if (document.hasFocus()) {
x.innerHTML = “文档已获取焦点。”;
} else {
x.innerHTML = “文档失去焦点。”;
}

HTMLDocument

readyState属性文档加载状态

语法: document.readyState
readyState 属性返回当前文档的状态（载入中……）。

uninitialized : 还未开始载入

loading：正在加载文档；

interactive - 已加载，文档与用户可以开始交互

complete：已经加载完文档；

兼容模式：

compatMode属性：
两个值：
CSS1Compat：标准模式；
BackCompat：混杂模式

head属性

字符集属性

charset

文档中实际使用的字符集；
语法：document.charset

自定义数据属性

HTML5规定可以为元素添加非标准的属性，但要添加前缀：data-

插入标记

32 innerHTML

outerHTML

Element.outerHTML

insertAdjacentHTML

insertAdjacentHTML：接收两个参数：插入位置和要插入的HTML文本。
第一个参数必须是beforebegin、afterbegin、beforeend、afterend；
第二个参数是一个HTML字符串，如果浏览器无法解析该字符串，就会抛出错误。

beforebegin

在当前元素之前插入一个紧邻的同辈元素；

afterbegin

在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；

beforeend

在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；

afterend

在当前元素之后插入一个紧邻的同辈元素。

scrollIntoView

滚动到视图; scrollIntoView()

使用方法：
btn.onclick = function () {
div.scrollIntoView()
}

专有扩展

文档模式：

children属性

children 属性返回元素的子元素的集合，是一个 HTMLCollection 对象。
element.children

contains方法

检查子元素是否在父元素中；

ul.contains(li[0])

插入文本

innerText

outerText

滚动