DOM在JavaScript的应用-创新互联
DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织(OMG)的规约为基础的，因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围。Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。
DOM的增加
DOM操作中增指的是增加节点，分为两部分：创建节点和插入节点。
创建节点
创建节点中常用的API方法主要有：
1. document.createElement()：创建指定的HTML元素
2. document.createTextNode()：创建文本节点
3. document.createDocumentFrame()：创建文档片段
4. document.createAttribute()：创建节点属性
5. node.cloneNode()：克隆节点
插入节点###
插入节点常用的API方法主要有：
1. node.appendChild()：末尾追加一个新节点
2. node.insertBefore()：插入一个新节点
这是一个段落
这是另一个段落
例子解释：
这段代码创建新的
元素：
var para=document.createElement("p");
如需向
元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
var node=document.createTextNode("这是新段落。");
然后您必须向
元素追加这个文本节点：
para.appendChild(node);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素：
var element=document.getElementById("div1");
这段代码向这个已有的元素追加新元素：
element.appendChild(para);
关于document.createAttribute()
document.createAttribute() 方法创建并返回一个新的属性节点。但是这个方法不是很常用，如果涉及到创建属性，一般使用node.setAttribute() 。
这是一个段落
这是另一个段落
var node = document.getElementById('div1');var newAttr = document.createAttribute('title'); //创建一个新的title属性；
newAttr .nodeValue ='Hello world!'; //title属性的值是：Hello world!
node.setAttributeNode(attr);//运用到对应的元素节点上
关于node.cloneNode()
node.cloneNode(deep) 方法返回该节点的一个副本，deep 可选，表明是否采用深度克隆，如果为true ，则该节点的所有后代节点也都会被克隆，否则，只克隆该节点本身。
这是一个段落
这是另一个段落
var node = document.getElementById('div1');var cloneNode = node.cloneNode(true);//克隆div1整个节点；
cloneNode.id ="div2";//修改克隆的节点id名称为div2；
document.body.appendChild(cloneNode);//在网页中追加克隆的节点；
DOM的删除
DOM节点的删除主要API是node.removeChild();可以使用parentNode.removeChild(child)删除指定父节点parentNode的一个子节点child，并返回被删除的节点。
注意事项：这个方法是要在被删除的节点的父节点上调用的，而不是在被删除节点上调用的，如果参数节点不是当前节点的子节点，removeChild 方法将报错。
这是一个段落。
这是另一个段落。
例子解释：
这个 HTML 文档含有拥有两个子节点（两个
元素）的
这是一个段落。
这是另一个段落。
找到id="div1"的元素：
var parent=document.getElementById("div1");
找到id="p1" 的
元素：
var child=document.getElementById("p1");
从父元素中删除子元素：
parent.removeChild(child);
DOM的修改
修改节点常用的API方法主要有：
1. appendChild()：末尾追加一个新节点
2. insertBefore()：插入一个新节点
3. replaceChild()：替换节点
注意事项：以上几个方法都是操作的某个节点的子节点，也就是说，要使用这几个方法必须先取得父节点。另外并不是所有节点都有子节点，如果在不支持子节点的节点上，调用了这些方法，将会导致错误。
DOM的查找
DOM节点中的查主要包括：查找元素和节点查找。
查找元素
1. getElementById() --- 通过ID访问；
2. getElementsByClassName() --- 通过类名访问；
3. getElementsByTagName() --- 通过标签名称访问；
4. querySelector() --- 通过CSS选择器访问（单个）；
5. querySelectorAll() --- 通过CSS选择器访问 （所有）；
关于这一节的内容，可以访问上一篇文章：JavaScript-DOM访问方式
节点查找
所有的节点都有这些属性，都是可以用于访问相关的node节点：
1. Node.childNodes: 访问一个单元素下所有的直接子节点元素，可以是一个可循环的类数组对象。该节点集合可以保护不同的类型的子节点（比如text节点或其他元素节点）。
2. Node.firstChild: 与childNodes数组的第一个项(Element.childNodes[0])是同样的效果，仅仅是快捷方式。
3. Node.lastChild: 与childNodes数组的最后一个项(Element.childNodes[Element.childNodes.length-1])是同样的效果，仅仅是快捷方式。
4. Node.parentNode: 访问当前节点的父节点，父节点只能有一个，祖节点可以用Node.parentNode.parentNode 的形式来访问。
5. Node.nextSibling: 访问DOM树上与当前节点同级别的下一个节点。
6. Node.previousSibling: 访问DOM树上与当前节点同级别的上一个节点。
总结
DOM的操作在JavaScript中的重要性不言而喻，而基于DOM的操作，会关系到所有的交互操作。
另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
网页标题：DOM在JavaScript的应用-创新互联
当前链接：http://mswzjz.cn/article/pogce.html