DOM(文档对象模型，JavaScript)

    DOM,全称“Document Object Model(文档对象模型)”，它是由W3C定义的一个标准。

 

1、HTML DOM 节点

         在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:

          文档是一个文档节点  所有的HTML元素都是元素节点。

          所有 HTML 属性都是属性节点。

          文本插入到 HTML 元素是文本节点。

          注释是注释节点。

 

2.DOM结构

       DOM用的是“树形结构”，用“树节点”的形式来表示页面中的每一个元素。

例 ：DOM树，HTML可看为树根，也叫根元素。

        

      每一个元素就是一个节点，而每一个节点就是一个对象。

 

3.节点类型

在JavaScript中 ，节点分为很多类型。DOM节点共有12种类型，但是常见的只有下面3种。

（1）元素节点

（2）属性节点

（3）文本节点

 

看一下下面这句代码有多少个节点。

<div class="hello>文本</div>

很多人看到上面这句代码后，都以为只有一个节点，因为只有一个div一个元素，但这里有3个节点。

 · <div class="hello>文本</div>  元素节点          · id="hello"  属性节点        ·文本  文本节点      

 

一个元素就是一个节点，这个节点称为”元素节点“。

只有元素节点可以拥有子节点，属性节点和文本节点都无法拥有子节点。

 

4.获取元素

获取元素，准确地说，就是获取”元素节点“。对于一个页面，我们想要对某一个元素进行操作，就必须通过一定的方式来获取元素，获取元素后，才能对它进行操作。

Document常用方法 

方法	描述
document.getElementById()	返回对拥有指定 id 的第一个对象的引用。
document.getElementsByClassName()	返回文档中所有指定类名的元素集合，作为 NodeList 对象。
document.getElementsByTagName()	返回带有指定标签名的对象集合。
document.getElementsByName()	返回带有指定名称的对象集合。
document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素。
document.querySelectorAll()	document.querySelectorAll()是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
document.renameNode()	重命名元素或者属性节点。
document.write()	向文档写 HTML表达式 或 JavaScript代码。
document.writeln()	等同于 write()方法，不同的是在每个表达式之后写一个换行符。
document.createComment()	createComment()方法可创建注释节点。
document.createElement()	创建元素节点。
document.createTextNode()	创建文本节点。

 

5.创建元素（节点）

     在JavaScript中，我们可以使用createElement()来创建一个元素节点，也可以使用createTextNode()来创建一个文本节点，然后可以将元素节点”组建“成我们同时看到的”有文本内容的元素“。

var om1 = document.creatElement("元素名");//创建元素节点
var on2 = document.createTextNode("文本内容");//创建文本节点
om1.appendChid(txt);//把文本节点插入元素节点中
on2.appendChid(om1);//把组建好的元素插入已有点元素中

说明：om1表示JavaScript动态创建的元素节点，txt表示JavaScript动态创建的文本节点，on2表示HTML中已经创建了的元素节点。

（1）创建元素节点createElement

         createElement()方法可创建元素节点。此方法可返回一个 Element 对象。

语法：document.createElement(tagName)

参数:

         tagName：字符串值，这个字符串用来指明创建元素的类型。

         注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。

（2）创建文本节点createTextNode

          createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。

语法：document.createTextNode(data)

参数：data : 字符串值，可规定此节点的文本。

 

6. 插入节点

（1）在指定节点的最后一个子节点列表之后添加一个新的子节点

         语法:appendChild(newnode)

         参数: newnode：指定追加的节点。

var parentnode = document.getElementById("test");

var newnode = document.createElement("li");

    newnode.innerHTML = "css";

    parentnode.appendChild(newnode);

（2）insertBefore() 方法可在已有的子节点前插入一个新的子节点。

         语法:insertBefore(newnode,node);

         参数:newnode: 要插入的新节点。 node: 指定此节点前插入节点。

var parentNode = document.getElementById("test");

var node = document.getElementById("liJS");

var newNode = document.createElement("li");

    newNode.innerHTML = "jQuery";

    parentNode.insertBefore(newNode,node);

 

7.删除节点

      removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

     语法:nodeObject.removeChild(node)

     参数:

            node ：必需，指定需要删除的节点。

var parentNode = document.getElementById("test");

    console.log(parentNode.childNodes);

var node = parentNode.childNodes[3];

var x = parentNode.removeChild(node);

    document.write("删除节点的内容：" + x.innerHTML);

 

8.替换元素节点

（1）removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

      语法:nodeObject.removeChild(node)

      参数:

               node ：必需，指定需要删除的节点。

var parentNode = document.getElementById("test");

console.log(parentNode.childNodes);

var node = parentNode.childNodes[3];

var x = parentNode.removeChild(node);

document.write("删除节点的内容：" + x.innerHTML);