DOM扩展
1.选择符API
Selectors API是W3C发起制定的标准，致力于让浏览器!原生!支持CSS查询。level 1 核心是两个方法，通过Document和Element类型的实例调用。
querySelector()：接收一个CSS选择符，如var mydiv = document.querySelector("#mydiv")；返回与该模式匹配的第一个元素，未找到返回null。
querySelectorAll()：接收一个CSS选择符，返回一个NodeList的实例。
level 2 为Element类型新增matchesSelector()；如果调用元素与选择符匹配则返回true。但是大多数浏览器不支持此方法。
2.元素遍历
对于元素间空格IE9-不会返回文本节点，其他浏览器返回文本节点，导致childNodes和firstNode不一致。Element Traversal API制定规范定义一下五个属性：
childElementNodeCount：返回子元素个数（不包含文本节点和注释）；firstElementChild：指向第一个元素；lastElementChild：指向最后一个元素；previousElementSibling/nextElementSibling：指向前/后一个同辈元素
3.HTML5
getElementsByClassName()：接收字符串作类名，返回带有指定类名的所有元素NodeList。
ClassList属性：定义了add() contains() remove() toggle()方法。toggle()方法是如果列表中存在给定值，删除它，不存在则添加它。比如可以直接使用div.classList.toggle("user");
焦点管理：document.activeElement属性：始终引用Dom中当前获得了焦点的元素。document.hasFocus()方法：确定文档是否获得了焦点。
readyState属性：两个可能的值，loading:正在加载文档；complete:已经加载完文档。if(document.readyState == "complete"){ *** }
compatMode属性：检测页面的兼容模式，标准的还是混杂的。
head属性：document.head引用文档的<head>元素。
charset属性：document.charset = "UTF-8";另外还有defaultCharset属性，表示当前默认的字符集。
自定义数据属性：可以添加非标准的属性，需要添加前缀data-，然后通过元素的dataset属性来访问自定义属性的值，访问名值对时不用。如
<div id="mydiv" data-appid="12345"></div>
var div = document.getElementById("mydiv");
var appid = div.appset.appid;
插入标记：在需要给文档插入大量HTML标记的情况下，通过操作DOM十分麻烦，直接插入HTML字符串更高效。
innerHTML属性：返回调用元素的所有子节点
outerHTML属性：返回调用它的元素及所有子节点的HTML
insertAdjacentHTML()方法：接收两个参数，插入的位置和要插入的文本，第一个参数值要是下列值之一：
beforebegin:在当前元素之前插入紧邻的同辈元素；afterbegin:;beforeend:;afterend:;
scrollIntoView()方法：在HTML元素上调用，窗口滚动之后会让调用元素顶部与视口顶部平齐。
4.扩展
children属性：只包含元素中同样还是元素的子节点。
contains()方法：判断某节点是否是另一个节点的后代。
插入文本：innerText属性、outerText属性
滚动：scrollIntoViewIfNeeded(alignCenter)：只有在当前元素在视口中不可见的情况下，才滚动浏览器窗口；若当前元素在视口中可见，则什么也不做。将alignCenter作参数表示将元素显示在视口中部。
scrollByLines(lineCount)：将元素内容滚动指定行高；
scrollByPages(pageCount)：将元素内容滚动指定内容高度
扫一扫
421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
