JS高级程序设计11-DOM扩展_js高级程序设计dom-优快云博客

本文详细阐述了选择符API（querySelector, querySelectorAll）的使用方法，包括获取特定元素、遍历元素和HTML5特性应用。同时介绍了与类相关的扩充（getElementsByClassName, classList）以及焦点管理和文档变化的处理。

选择符API(P286)

querySelector()

querySelector()方法接受一个CSS选择符，返回与改模式匹配的第一个元素，没有相应元素则返回null；
//取得body元素
var body=document.querySelector("body");
//取得ID为"myDiv"的元素
var myDiv=document.querySelector("#myDiv");
//取得类为"selected"的第一个元素
var selected=document.querySelector(".selected");
//取得类为"button"的第一个图像元素
var img=document.body.querySelector("img.button");

querySelectorAll()

//取得所有<p>元素中所有<strong>元素
var strongs=document.querySelectorAll("p strong");

matcheSelector()方法（略）

元素遍历（P288）

对于元素中的空格，有些浏览器会返回文本节点，有些就不会

//Element Traversal API为DOM元素添加了以下5个属性
childElementCount //返回子元素（不包括文本节点和注释）的个数
firstElementChild //指向第一个子元素
lastElementChild //指向最后一个子元素
previousElementSibling //指向前一个同辈元素
nextElementSibling //指向后一个同辈元素

HTML5（P289）

与类相关的扩充

getElementsByClassName()方法

classList属性及其方法：
add(value):将给定的字符串值添加到列表中（如果存在就不添加了）
contains(value):检测列表中是否存在给定值
remove(value):从列表中删除给定值
toggle(value):检测列表中是否有给定值，然后去改变它存在的状态

焦点管理

document.activeElement属性
document.focus()方法

HTMLDocument的变化

readyState属性 //指示文档是否加载完
compatNode属性 //告诉开发者浏览器采用了哪种渲染模式
head属性 //引用文档<head>元素

字符集属性

charset属性 //文档中实际使用的字符集
defaultcharset属性 //表示文档默认的字符集

自定义数据属性

dataset属性 //访问自定义属性的值

插入标记

innerHTML属性 //返回与调用元素的所有子节点对应的HTML标记
outerHTML属性
insertAdjacentHTML()方法
内存与性能问题：使用上述方法替换子节点可能会导致浏览器的内存占用问题（被删除的元素的处理程序非内存并没有删除，最好手工删除要被替换的元素的所有时间处理程序和JS对象属性）

scrollintoview()方法 //通过滚动浏览器窗口，调用的元素就可以出现在视口中