JS操作DOM

什么是DOM？
 　　　　什么叫DOM，DOM是文档对象模型(Document Object Model，是基于浏览器编程（在本教程中，可以说就是DHTML编程）的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以 Mozilla的浏览器最与标准接近。单纯的Javascript要结合DOM才能做DHTML编程，才能做出漂亮的效果、应用于WEB。这点几乎与其它 的语言无异，正如C/C++需要库支持是一样的道理。否则就是单纯的在语法上做研究了

　　　　因此，必须要对DOM有一定的认识，才能把Javascript应用于WEB当中。

接下来我给大家讲一下DOM操作的方法：

　　创建节点

　　　　var createNode = document.createElement("div");

　　　　var createTextNode = document.createTextNode("hello world");

　　　　createNode.appendChild(createTextNode);

　　　　document.body.appendChild(createNode);

　　　　document.documentElement.appendChild(createNode);

　　插入节点

　　　　var createNode = document.createElement("div");

　　　　var createTextNode = document.createTextNode("hello world");

　　　　createNode.appendChild(createTextNode);

　　　　var div1 = document.getElementById("div1");

　　　　document.body.insertBefore(createNode,div1);

　　替换元素

　　　　var replaceChild = document.body.replaceChild(createNode,div1);

　　删除元素

　　　　var removeChild = document.body.removeChild(div1);

最后呢给大家总结一下：

W3C DOM 标准被分为 3 个不同的部分：

• 核心 DOM - 针对任何结构化文档的标准模型

• XML DOM - 针对 XML 文档的标准模型

• HTML DOM - 针对 HTML 文档的标准模型

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点

• 每个 HTML 元素是元素节点

• HTML 元素内的文本是文本节点

• 每个 HTML 属性是属性节点

• 注释是注释节点

一些常用的 HTML DOM 方法：

• getElementById(id) - 获取带有指定 id 的节点（元素）

• appendChild(node) - 插入新的子节点（元素）

• removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

• innerHTML - 节点（元素）的文本值

• parentNode - 节点（元素）的父节点

• childNodes - 节点（元素）的子节点

• attributes - 节点（元素）的属性节点

若有不懂请点以下参考：

参考