Js 第11章--DOM扩展

选择器

类似Jquery

• querySelector(): 接受一个CSS选择符，返回匹配的第一个元素
• querySelectorAll()：接受一个CSS选择符，返回所有匹配元素。返回值是NodeList的快照。
• matchesSelector()：如果调用元素与该选择符匹配，返回true，否则返回false。为了适配不同的浏览器，需要下面的包装版：

  function matchesSelector(element, selector) {
  	if (element.matchesSelector) {
  		return element.matchesSelector(selector);
  	}
  	else if (element.msMatchesSelector) {
  		return element.msMatchesSelector(selector);
  	}
  	else if (element.mozMatchesSelector) {
  		return element.mozMatchesSelector(selector);
  	}
  	else if (element.webkitMatchesSelector) {
  		return element.webkitMatchesSelector(selector);
  	}
  	else {
  		throw new Error("not supported");
  	}
  }
  
  if (matchesSelector(document.body, "body.page1")) {
  	// 执行操作
  }
  

元素遍历API

以下都只针对于Element Node

属性

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

与类相关的扩充

getElementsByClassName

getElementsByClassName(): 返回带有指定类的所有元素的NodeList。只有位于调用元素子树的元素才会返回。

classList

某个元素拥有的所有类。
classList属性是新集合类型DOMTokenList的实例。可以使用length获取长度，也可以用方括号获取每个元素

方法:

• add(value)：添加类
• contains(value)：判断是否属于某个类
• remove(value)：删除类
• toggle(value)：如果类列表中已存在该值，则删去，否则添加。

有了classList，修改元素的类时，则不需要像以前一样获取class的值，再进行字符串切分连接操作。直接add，remove即可，十分方便。

焦点管理

元素获得焦点的方式有页面加载，用户输入，代码中调用focus()方法

属性：
document.activeElement: 获得焦点的元素的引用。

方法：
document.hasFocus()：确定文档是否获得了焦点。

HTMLDocument的变化

属性

• document.readyState

  • loading
  • complete

• compatMode

  • CSS1Compat：标准模式
  • BackCompat：混杂模式

自定义属性

可以为元素添加非标准属性，但要加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息
添加了自定义属性后，可以通过元素的dataset属性来访问自定义属性的值。dataset中保存的属性名将没有data前缀

mydiv.setAttribute("data-hbx1","I am 1")
mydiv.setAttribute("data-hbx2", "I am 2")
mydiv.dataset
//DOMStringMap {hbx1: "I am 1", hbx2: "I am 2"}
// hbx1: "I am 1"
// hbx2: "I am 2"

innerHTML

• innerHTML：
  • 读模式：返回调用者的所有子内容（不包括自己）
  • 写模式：根据HTML字符串解析成DOM树，替换掉调用者的所有子节点
• outerHTML：
  • 读模式：返回调用者的所有子内容（包括自己）
  • 写模式：根据HTML字符串解析成DOM树，替换掉调用者（包括所有子树）

优点：添加子元素时十分方便，只需要将以HTML字符串的形式传入innerHTML即可。假如使用DOM操作插入，则需要进行节点创建并按顺序连接。

但是创建和销毁HTML解析器将造成性能损失，因此需要避免多次设置innerHTML。

children属性

等同于childNodes属性

contains（）方法

判断某个节点是不是另一个节点的后代。
调用者和参数均为Nodes类型。

innerText

读：与innerHTML类似，不过过滤去了所有的标签，按由浅入深的顺序拼接所有子文档树。
写：删除所有子节点，插入文本节点

div.innerText = div.innerText;
//使用文本内容替换容器元素中的所有内容（包括子节点）

outerText

outerText用文本节点替换整个元素