js 常用的DOM节点

DOM 常用的API

DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

DOM就是由节点组成的。

解析过程

HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。

DOM可以做什么

• 找对象（元素节点）
• 设置元素的属性值
• 设置元素的样式
• 动态创建和删除元素
• 事件的触发响应：事件源、事件、事件的驱动程序

节点查找

• document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；
• document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔，返回一个 HTMLCollection 。注意兼容性为IE9+（含）。另外，不仅仅是document，其它元素也支持 getElementsByClassName 方法；
• document.getElementsByTagName ：根据标签查找元素， * 表示查询所有标签，返回一个 HTMLCollection 。
• document.getElementsByName ：根据元素的name属性查找，返回一个 NodeList 。
• document.querySelector ：返回单个Node，IE8+(含），如果匹配到多个结果，只返回第一个。
• document.querySelectorAll ：返回一个 NodeList ，IE8+(含）
• document.forms ：获取当前页面所有form，返回一个 HTMLCollection

createElement创建元素节点：

通过 createElement 创建的元素并不属于 document 对象，它只是创建出来，并未添加到html文档中，要调用 appendChild 或 insertBefore 等方法将其添加到HTML文档中。

var elem = document.createElement("div"); 
elem.innerHTML = '我是新创建的节点';
document.body.appendChild(elem);  

createTextNode创建文本节点：

cloneNode 克隆一个节点：

node.cloneNode(true/false) ，它接收一个bool参数，用来表示是否复制子元素。

var from = document.getElementById("test");  
var clone = from.cloneNode(true);  
clone.id = "test2";  
document.body.appendChild(clone);  

a