JavaScript高级程序设计读书笔记（13）——DOM拓展

DOM拓展

这里所说的DOM拓展主要包括选择符API和html5

一、选择符API
1、querySelector（）方法接收一个参数——css选择符，返回给模式匹配的第一个元素，如果没有匹配到就返回null；
2、querySelectorAll（）接收一个一个参数——css选择符，但是返回的是所有匹配的元素，返回的是一个NodeList实例；
3、matchesSelector（）接收一个css选择符为参数，如果调用元素与选择符匹配返回true，否则返回false。

二、元素的遍历查询
之前已经学习到一些方法能够遍历节点，但有些浏览却不会返回文本节点，有些浏览器可以返回文本节点。所以这里定义了一些新方法返回元素节点；
1、childElementCount（），返回子元素的个数（不包括文本节点和注释节点）；
2、firstElementChild（），返回第一个子元素；firstChild（）的元素版；
3、lastElementChild（），返回最后一个子元素；lastChild（）的元素版；
4、previousElementSibling（），返回前一个同辈元素节点，previousSibling（）的元素版；
5、nextElementSibling（），返回后一个同辈元素节点，nextSibling（）的元素版；

三、HTML5
1、getElementsByClassName（），接收一个参数，即包含一个或多个类名的字符串，返回指定类的所有元素的NodeList；
2、classList属性；
classList属性是DOMToKenList的实例，它包含如下方法和属性：
——length属性表示自己包含多少个元素；
——item（），按照索引取得每个元素的方法；
——add（），添加某类的字符串形式；
——contains（），表示是否已存在某类；
——remove（），移除某类；
——toggle（），已有给定值，删除；没有给定值，添加它；
有了classList属性，除非需要全部删除或修改所有类，否则也就用不到className属性了；
3、焦点管理：
——document.activeElement属性，始终会引用DOM当前获得焦点的元素。元素获得焦点的放法有：页面加载，用户输入和在代码中调用focus（）方法；
——document.hasFocus（）方法，用于确定文档是否获得了焦点，通过检测文档是否获得焦点可以知道用户是否正在与页面交互；
4、插入标记
——innerHTML属性
在读模式下，innerHTML属性返回调用元素的所有子节点（文本，注释，元素）对应的HTML标记；
在写模式下，innerHTML属性会根据指定值创建DOM节点；
要想插入脚本内容，可以将脚本放在一个有作用域的元素里：可以是文本节点……
例如：

div.innerHTML="_<script defer>alert('hi');<\/script>";
div.innerHTML="<div>&nbsp;</div><script defer>alert('hi');<\/script>";
div.innerHTML="<input type=\"hidden\"><script defer>alert('hi');<\/script> ";

——outerHTML属性；
在读模式下，返回的是调用它的元素和所有元素子节点的HTML标签；
在写模式下，会根据给定的HTML字符串创建DOM子树，然后用这个DOM子树替换调用元素；
5、插入文本
——innerText属性
在读取值时，按照由浅入深的顺序将子文档树中的所有文本拼接起来；
在写入值时，会删除元素的所有子节点，插入包含相应文本值得文本节点
——outerText属性
在读取值时与innerText完全相同；
在写入值时，不止会替换掉子节点，而是替换掉整个元素；

div.outerText="hello";
//上面一行代码实际上执行了如下操作
var text=document.createTextNode("hello");
div.parentNode.replaceChild(text,div);
//本质上，新的文本节点会完全的取代调用outerText的元素；