-
Notifications
You must be signed in to change notification settings - Fork 52
特殊作用的API收集
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
兼容性：无兼容性问题，所有浏览器都支持
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
Element.getClientRects() 方法返回一个指向客户端中每一个盒子的边界矩形的矩形集合。
兼容性：无兼容性问题，所有浏览器都支持。IE4.0+支持
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getClientRects
在使用removeChild() 或者 replaceChild() 从DOM中删除节点的时候首先会触发 DOMNodeRemoved事件。该事件的 event.target 就是被删除的节点。 而 event.relatedNode则是对目标节点父节点的引用。
http://blog.chinaunix.net/uid-26672038-id-3956106.html
判断节点是否包含一个节点
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/contains#Browser_compatibility
兼容性：无兼容性问题。IE5.0+支持
Node.normalize() 方法将当前节点和它的后代节点”规范化“（normalized）。在一个"规范化"后的DOM树中，不存在一个空的文本节点，或者两个相邻的文本节点。
注1：“空的文本节点”并不包括空白字符(空格，换行等)构成的文本节点。
注2：两个以上相邻文本节点的产生原因包括：
通过脚本调用有关的DOM接口进行了文本节点的插入和分割等。 HTML中超长的文本节点会被浏览器自动分割为多个相邻文本节点。
var wrapper = document.createElement("div");
wrapper.appendChild(document.createTextNode("Part 1 "));
wrapper.appendChild(document.createTextNode("Part 2 "));
// 这时(规范化之前),wrapper.childNodes.length === 2
// wrapper.childNodes[0].textContent === "Part 1 "
// wrapper.childNodes[1].textContent === "Part 2 "
wrapper.normalize();
// 现在(规范化之后), wrapper.childNodes.length === 1
// wrapper.childNodes[0].textContent === "Part 1 Part 2"兼容性问题：待测试
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/normalize
<body>
<p id="p">foobar</p>
<script type="text/javascript">
var p = document.getElementById('p');
var textnode = p.firstChild;
// 将原文本节点分割成为内容分别为foo和bar的两个文本节点
var replacementNode = textnode.splitText(3);
// 创建一个包含了内容为' span contents '的文本节点的span元素
var span = document.createElement('span');
span.appendChild(document.createTextNode(' span contents '));
// 将span元素插入到后一个文本节点('bar')的前面
p.insertBefore(span, replacementNode);
// 现在的HTML结构成了<p id="p">foo <span>span contents</span> bar</p>
</script>
</body>https://developer.mozilla.org/zh-CN/docs/Web/API/Text/splitText