特殊作用的API收集

1. Element.getBoundingClientRect

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。

兼容性：无兼容性问题，所有浏览器都支持

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

2. Element.getClientRects()

Element.getClientRects() 方法返回一个指向客户端中每一个盒子的边界矩形的矩形集合。

兼容性：无兼容性问题，所有浏览器都支持。IE4.0+支持

对于行内元素，元素内部的每一行都会有一个边框；对于块级元素，如果里面没有其他元素，一整块元素只有一个边框

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getClientRects

3. DOMNodeRemoved

在使用removeChild() 或者 replaceChild() 从DOM中删除节点的时候首先会触发 DOMNodeRemoved事件。该事件的 event.target 就是被删除的节点。而 event.relatedNode则是对目标节点父节点的引用。

http://blog.chinaunix.net/uid-26672038-id-3956106.html

4. Node.contains

判断节点是否包含一个节点

https://developer.mozilla.org/zh-CN/docs/Web/API/Node/contains#Browser_compatibility

兼容性：无兼容性问题。IE5.0+支持

5. Element.normalize

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

6. Text.splitText

<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

5. Element.classList

jquery的addClass、removeClass、toggleClass、hasClass很好用？

下面的原生写法更好用！！

　　document.body.classList.add('hasJS');
　　document.body.classList.remove('hasJS');
　　document.body.classList.toggle('hasJS');
　　document.body.classList.contains('hasJS');

兼容性：IE10+支持。移动端可放心使用！

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList

7. 女士们！先生们！innerHTML和他的朋友们！

Node.innerText   = "xxx"; // IE6+支持。产房传喜讯，FF45+终于支持了innerText
Node.textContent = "xxx"; // IE9+支持。
Element.outerHTML = "<p>你好<p>"; // IE6+支持。outerHTML的值会把Element本身也替换掉。
Element.outerText = "xxx"; // IE6+支持。但是FF不支持。

测试：

 <p id="friends">测试innerHTML和他的朋友们</p>

<button id="innerText">innerText</button>
<button id="textContent">textContent</button>
<button id="outerHTML">outerHTML</button>
<button id="outerText">outerText</button>

 innerText.onclick = function(){
    friends.innerText = "<span>你好啊span<br/>前面有个br</span>"
 }
 textContent.onclick = function(){
    friends.textContent = "<span>你好啊span<br/>前面有个br</span>";
 }
 outerHTML.onclick = function(){
    friends.outerHTML = "<section id='friends' class='s'>我是一个section</section>"
 }
 outerText.onclick = function(){
    friends.outerText = "<span>你好啊span<br/>前面有个br</span>";
 }

innerText和textContent的不同

8. 取得图片原始的宽高

#img1{
  width:100px;
  height:100px;
}
<img src="//a.diaox2.com/cms/sites/default/files/20160731/798789797878.jpg" id="img1">

img1.naturalWidth  // 640px
img1.naturalHeight // 416px

img1.width // 100px
img1.width // 100px

<img src="//search.image.alimmdn.com/339926/f9de2106a8e50e1eff871720cc76d4ae1a7746b6afb585bdfe42f794@188w_188h_1e%7C188x188-5rc" width="200" height="150" id="img2">

img2.naturalWidth  // 188px
img2.naturalHeight // 188px

img2.width // 200px
img2.width // 150px

兼容性：IE9+支持

http://www.w3schools.com/jsref/prop_img_naturalwidth.asp

9. document.activeElement

返回当前页面中获得焦点的元素,也就是说,如果此时用户按下了键盘上某个键,会在该元素上触发键盘事件.该属性是只读的.

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/activeElement

兼容性：无兼容性

9. document.scrollElement

取得页面的滚动元素

兼容性较差：

Chrome 44+（PC、Mobile） Safari 9+（PC、Mobile） Firefox 47+（PC、Mobile）

https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollingElement

http://www.tuicool.com/articles/InMnEnI

10. document.head

兼容性：IE9+

11. ownerDocument

Node.ownerDocument 只读属性会返回当前节点的顶层的 document 对象。

兼容性：IE6+

https://developer.mozilla.org/zh-CN/docs/Web/API/Node/ownerDocument#浏览器兼容性

12. element.insertAdjacentHTML

insertAdjacentHTML() 将指定的文本解析为 HTML 或 XML，然后将结果节点插入到 DOM 树中的指定位置处。该方法不会重新解析调用该方法的元素，因此不会影响到元素内已存在的元素节点。从而可以避免额外的解析操作，比直接使用 innerHTML 方法要快。

兼容性：无（IE4+）

// <div id="one">one</div> 
var d1 = document.getElementById('one'); 
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// 此时，新结构变成：
// <div id="one">one</div><div id="two">two</div>

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML

http://stackoverflow.com/questions/7327056/appending-html-string-to-the-dom

13. element.insertAdjacentElement

把element插入到指定的位置。类似于insertAdjacentHTML

第二个参数只能是Element实例，不能是文档碎片，如果有这样的限制的话，应用的范围不算大。

兼容性：IE8+肯定支持，Firefox不支持。

http://quirksmode.org/dom/html/

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentElement#Browser_Compatibility

14. Object.setPropertyOf

相对于比Object.prototype.__proto__更好更合适的修改对象原型的方法

兼容性： IE11+

FF31+

Ch34+

Sa10+

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf

15. event.stopImmediatePropagation

阻止当前事件的冒泡行为并且阻止当前事件所在元素上的所有相同类型事件的事件处理函数的继续执行.

兼容性：

IE9+

https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopImmediatePropagation

Provide feedback

Saved searches

Use saved searches to filter your results more quickly