1. DOM标准

1.1 定义

Document Object Model：文档对象模型 ,是 HTML 和 XML 文档的编程接口。

定义了访问和处理 HTML 文档的标准方法。是W3C国际组织制定的统一标准。

DOM 以树结构表达 HTML 文档。

1.2 分类

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
XML DOM 定义了所有 XML 元素的*对象*和*属性*，以及访问它们的*方法*。
HTML DOM - 针对 HTML 文档的标准模型
HTML DOM 定义了所有 HTML 元素的*对象*和*属性*，以及访问它们的*方法*。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

2. 节点（Node）

在 HTML DOM 中，所有事物都是节点。HTML文档是由DOM节点构成的集合。

2.1 节点的分类

文档节点(Document)：DOM标准将整个HTML文档的相关信息封装后得到的对象。
元素节点(Element)：DOM标准将HTML标签的相关信息封装后得到的对象。
属性节点(Attribute)：DOM标准将HTML标签属性的相关信息封装后得到的对象。
文本节点(Text)：DOM标准将HTML文本的相关信息封装后得到的对象。

2.2 节点的方法和属性

DOM方法是您能够执行的动作（比如添加或修改元素）。
DOM属性是您能够获取或设置的值（比如节点的名称或内容）。

nodeName: 代表当前节点的名字

nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document

nodeType：返回一个整数, 这个数值代表着给定节点的类型，只读属性。
```
1 -- 元素节点    2 -- 属性节点    3 -- 文本节点
```

nodeValue：返回给定节点的当前值(字符串)，可读写的属性。

元素节点, 返回值是 null
属性节点: 返回值是这个属性的值
文本节点: 返回值是这个文本节点的内容

节点属性关系图

2.3 常用方法和属性

一些常用的 HTML DOM 方法：

getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素)

一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

3. DOM树

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

父元素：直接包含当前元素的元素就是当前元素的父元素
子元素：当前元素直接包含的元素就是当前元素的子元素
祖先元素：直接或间接包含当前元素的所有元素都是当前元素的祖先元素
后代元素：当前元素直接或间接包含的元素就是当前元素的后代元素
兄弟元素：有相同父元素的元素是兄弟元素

<html>
  <head>
    <meta charset="utf-8">
    <title>My title</title>
  </head>
  <body>
    <a href="Link.html">My Link</a>
    <h1>My header</h1>
  </body>
</html>

<html> 节点没有父节点；它是根节点
<head> 和 <body> 的父节点是 <html> 节点
文本节点 "My header" 的父节点是 <h1> 节点
<h1> 和 <a> 节点是同胞节点，同时也是 <body> 的子节点
可通过节点的 innerHTML 属性来访问文本节点的值

4. DOM API

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。
所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。
document对象 是window对象的一个属性，代表当前HTML文档，包含了整个文档的树形结构。
获取document对象的本质方法是：window.document，而“window.”可以省略。

4.1. 元素查询

在整个文档范围内查询元素节点：

功能	API	返回值
根据Id值查询	document.getElementById(“id值”)	一个具体的元素节点
根据标签名查询	document.getElementsByTagName(“标签名”)	元素节点数组
根据Name属性值查询	document.getElementsByName(“name值”)	元素节点数组

<body>
    <div id="main"> 
        <p id="intro">Hello World!</p>
        <p>这个实例演示了 <b>getElementById</b> 方法!</p>
    </div>
    <script>
        x=document.getElementById("intro");
        document.write("<p>段落的文本为: " + x.innerHTML + "</p>");
    </script>
    <script>
        x=document.getElementById("main").getElementsByTagName("p");
       for (i=0;i<x.length;i++){ 
            document.write(x[i].innerHTML);
            document.write("<br>");
        }
    </script>
</body>

根节点

document.documentElement - 全部文档
document.body - 文档的主体

访问根节点：

<body>
    <p>Hello World!</p>
    <div>
        <p>DOM 是非常有用的!</p>
        <p>这个实例演示了 <b>document.body</b> 属性。</p>
    </div>
    <script>
        //弹出body的内容
        alert(document.body.innerHTML);
    </script>
</body>

在具体元素节点范围内查找子节点

功能	API	返回值
查找全部子节点	element.childNodes	节点数组
查找第一个子节点	element.firstChild	节点对象
查找最后一个子节点	element.lastChild	节点对象
查找指定标签名的子节点	element.getElementsByTagName(“标签名”)	元素节点数组

父节点

功能	API	返回值
查找指定元素节点的父节点	element.parentNode()	节点对象

查找指定元素的兄弟节点

功能	API	返回值
查找前一个兄弟节点	node.previousSibling	节点对象
查找后一个兄弟节点	node.nextSibling	节点对象

<body>
    <p id="intro">Hello World!</p>
    <script>
        x=document.getElementById("intro");
        document.write(x.firstChild.nodeValue);
    </script>
</body>

4.2. 属性操作

读取属性值
元素对象.属性名

   <script>
    document.getElementById("btn09").onclick = function(){
               //1.获取文本框元素对象
               var inputEle = document.getElementById("username");
               //2.获取文本框的value属性值
               var inputValue = inputEle.value;
               alert(inputValue);
        }; 
   </script>
   <button id="btn09">返回#username的value属性值</button>

修改属性值
元素对象.属性名=新的属性值

<body>
    <script>
        function ChangeBackground()
        {
            document.body.style.backgroundColor="blue";
        }
    </script>
    <input type="button" onclick="ChangeBackground()" value="修改背景颜色" />
  <script>
    document.getElementById("btn10").onclick = function(){
        //1.获取文本框元素对象
        var inputEle = document.getElementById("username");
        //2.设置文本框中的value属性值
        inputEle.value = "New Value";
    };
   </script>
</body>

4.3. 文本操作

读取文本值
修改文本值

获取元素的内容有两种方式:
- innerHTML
- childNodes 和 nodeValue 属性

//修改文本
<body>
    <p id="p1">Hello world!</p>
    <input type="button" onclick="ChangeText()" value="修改文本" />
    <script>
    function ChangeText()
    {
        document.getElementById("p1").innerHTML="Hello Runoob!";
    }
    </script>
//获取内容    
    <script>
        txt=document.getElementById("p1").childNodes[0].nodeValue;
        document.write(txt);
    </script>
</body>

4.4 元素增删改

API	功能
document.createElement(“标签名”)	创建元素节点并返回，但不会自动添加到文档中
document.createTextNode(“文本值”)	创建文本节点并返回，但不会自动添加到文档中
element.appendChild(ele)	将ele添加到element所有子节点后面
parentEle.insertBefore(newEle,targetEle)	将newEle插入到targetEle前面
parentEle.replaceChild(newEle, oldEle)	用新节点替换原有的旧子节点
parentEle.removeChild(childNode)	删除指定的子节点
element.innerHTML	读写HTML代码

创建新元素

<body>
    <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另一个段落。</p>
    </div>
    <script>
        //创建了新的 <p> 元素：
        var para=document.createElement("p");
        //创建新的文本节点
        var node=document.createTextNode("这是一个新段落。");
        //向 <p> 元素追加文本节点
        para.appendChild(node);
        //向已有元素追加这个新元素
        var element=document.getElementById("div1");
        //将新元素作为父元素的最后一个子元素进行添加
        element.appendChild(para);

        //insertBefore()
        //var child=document.getElementById("p1");
        //element.insertBefore(para,child);

    </script> 
</body>

删除已有元素

<body>

    <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另一个段落。</p>
    </div>
    <script>
        var parent=document.getElementById("div1");
        var child=document.getElementById("p1");
        parent.removeChild(child);

        //找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：
        //var child=document.getElementById("p1");
        //child.parentNode.removeChild(child);

    </script>

</body>

替换HTML元素

<body>

    <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另外一个段落。</p>
    </div>

    <script>
        var parent=document.getElementById("div1");
        var child=document.getElementById("p1");
        var para=document.createElement("p");
        var node=document.createTextNode("这是一个新的段落。");
        para.appendChild(node);
        parent.replaceChild(para,child);
    </script>

</body>

5. DOM事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应。

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时

<body>
    <p>点击按钮执行 <em>displayDate()</em> 函数。</p>
    <button id="myBtn">点我</button>
    <script>
        //名为 displayDate 的函数被分配给了 id=myButn" 的 HTML 元素。
        //当按钮被点击时，将执行函数。
        document.getElementById("myBtn").onclick=function(){displayDate()};
        function displayDate(){
                document.getElementById("demo").innerHTML=Date();
        }
    </script>
    <p id="demo"></p>
</body>

04.DOM