DOM(文档对象模型（Document Object Model)）

在网页中，页面或文档的对象被组织在一个树形结构中，用来表示文档中对象的标准模型

DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构，使得页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变属性，增加元素等，使得页面的交互性大大地增强

DOM类型

1.节点

2.Node层次

节点间彼此都有等级关系

HTML文档中的所有节点组成了一个文档树，HTML文档中的每个元素、属性、文本都代表着树的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止

3.文档树

这里写图片描述

<html>
    <head>
        <title>DOM</title>
    </head>
    <body>
        <h1>DOM</h1>
        <p>Hello World</p>
    </body>
</html>

除文档节点之外的每个节点都有父节点，例如和节点的父节点是 ,文本 hello world 的父节点是

大部分元素都有子节点，节点有一个子节点节点

4.访问节点
可以通过若干方法来查找希望操作的元素：

getElementById() 和 getElementsByTagName() 这两种方法，可查找整个 HTML 文档中的任何 HTML 元素

4.1 getElementById() 语法

document.getElementById("ID")； 查找id为ID的元素

4.2 getElementsByTagName() 语法

document.getElementByTagName("标签名称")；
document.getElementById("ID").getElementsByTagName("标签名称");

实例1：

返回文档中所有

元素的一个节点列表

document.getElementsByTagName("p");

实例2：
返回 id 为 “maindiv” 的元素下的所有

节点

document.getElementById("maindiv").getElementsByTagName("p");

4.3 节点列表

使用节点列表时，通常将列表保存在一个变量中,并且我们通过索引号来访问节点元素，索引号从 0 开始

var x = document.getElementsByTagName("p");
// 通过 length 属性来遍历节点列表
for (var i = 0; i < x.length; i++) {
    var y = x[2]; // 访问第三个 <p> 元素
}

4.4 parentNode、firstChild、lastChild

通过HTML片段来阐述属性

<table>
    <tr>
        <td>hello</td>
        <td>world</td>
    </tr>
</table>

第一个是元素的首个子元素(firstChild)，最后一个是元素的最后一个子元素(lastChild)，是每个元素的父节点(parentNode)

通过 firstChild 访问某个元素的文本

var x = [a.paragraph];
var text = x.firstChild.nodeValue.parentNode

删除 id 为 “maindiv” 的节点

var x = document.getElementById("maindiv");
x.parentNode.removeChild(x);

优点：易用性强，使用 DOM 时，将把所有的 XML 文档信息都存于内存中，并且遍历简单

缺点：效率低，解析速度慢，内存占用过高

Java程序员从笨鸟到菜鸟（三十九）DOM