常用原生JSAPI

[Sandra310]

1、载入脚本

当HTML解析器遇到<script>元素时，默认必须先执行脚本，然后再恢复文档的解析和渲染。JS代码会阻塞页面的UI渲染。<script>标签有defer和async属性，改变脚本的执行方式。

2、查找节点

document.getElementById
document.getElementsByClassName
document.getElementsByTagName
document.getElementsByName
document.querySelector
document.querySelectorAll
document.forms

3、创建节点

document.createElement
document.createTextNode 创建文本节点
xx.cloneNode() 传递参数bool表示是否克隆子元素
document.createDocumentFragment 创建文档碎片，用来存储临时节点

4、修改节点

parent.appendChild(child)
将child追加到parent子节点最后面，如果child是页面已存在的节点，则原本的会移除，事件会保留。
parentNode.insertBefore(newNode, refNode)
parent.removeChild(node) 删除子节点并返回子节点
parent.replaceChild(newChild, oldChild)

5、节点关系

parentNode与parentElement 区别在于element父节点必须是Element元素，如果不是返回null
children childNodes firstChild lastChild

previousSibling nextSibling previousElementSibling nextElementSibling

6、属性

element.setAttribute(name, value)
element.getAttribute()
elem.style.color = ‘red’
elem.style.setProperty(‘font-size’, ‘16px’)
elem.style.removeProperty(‘color’)
window.getComputedStyle(element[, pseudoElt]) 可以获取应用到元素上的所有样式。而element.style.xx只能获取内联
IE8-用currentStyle()

var div2 = document.getElementById("div2");
var result = "";
 if (window.getComputedStyle) {
      result = (window || document.defaultView).getComputedStyle(div2, null)['cssFloat'];
} else {
      result = div2.currentStyle["styleFloat"];
 }
console.log(result);
// document.defaultView返回document对象所关联的window

element.getBoundingClientRect() 返回元素的大小以及相对于浏览器可视窗口的位置。相对于窗口即滚动时值会变。

参考

http://blog.csdn.net/hj7jay/article/details/53389522
https://segmentfault.com/a/1190000004076145