Javascript基础系列(九)-DOM扩展

DOM扩展

选择符API

querySelector()

返回第一个匹配的元素
通过 Document 类型调用 querySelector()方法时，会在文档元素的范围内查找匹配的元素。
通过 Element 类型调用 querySelector()方法时，只会在该元素后代元素的范围内查找匹配的元素。

示例
//取得 body 元素
var body = document.querySelector("body");

querySelectorAll()

返回所有匹配的元素快照，不会动态更新

示例
//取得某<div>中的所有<em>元素（类似于 getElementsByTagName("em")）
var ems = document.getElementById("myDiv").querySelectorAll("em");

matchesSelector()

如果调用元素与该选择符匹配，返回 true；否则，返回 false

元素遍历

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

HTML5

getElementsByClassName

classList

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

HTMLDocument的变化

document.readyState 
loading 加载中
complete 已经加载完成
document.head
自定义数据属性 data—xx

插入标记

innerHTML属性
document.innerHTML = xx;
var c = document.innerHTML;

outerHTML属性
document.outerHTML =xx;
var c = doucment.outerHTML

两者区别在于outerHTML包含元素自身

insertAdjacentHTML(option, content)方法 指定位置插入
"beforebegin"，在当前元素之前插入一个紧邻的同辈元素；
"afterbegin"，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
"beforeend"，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；
"afterend"，在当前元素之后插入一个紧邻的同辈元素

让元素在滚动页面出现在可视试图中
scrollIntoView(true)

专有扩展

children

document.children 只会返回元素节点，屏蔽文本节点

插入文本

innerText 所有的文本

scrollIntoViewIfNeeded(alignCenter)：只在当前元素在视口中不可见的情况下，才滚
	动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中可见，这个方法什么也不做。
	如果将可选的 alignCenter 参数设置为 true，则表示尽量将元素显示在视口中部（垂直方向）。
	Safari 和 Chrome 实现了这个方法。
scrollByLines(lineCount)：将元素的内容滚动指定的行高，lineCount 值可以是正值，
	也可以是负值。Safari 和 Chrome 实现了这个方法。
scrollByPages(pageCount)：将元素的内容滚动指定的页面高度，具体高度由元素的高度决
	定。Safari 和 Chrome 实现了这个方法。