HTML DOM
1.HTML DOM 简介
HTML文档对象模型（HTMLDocumentObjectModel）定义了访问和处理HTML文档的标准方法。
HTMLDOM把HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
(1)什么是DOM？
通过JavaScript，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。
这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
(2)DOM被分为不同的部分（核心、XML及HTML）和级别（DOMLevel1/2/3）：
CoreDOM:定义了一套标准的针对任何结构化文档的对象
XMLDOM:定义了一套标准的针对XML文档的对象
HTMLDOM:定义了一套标准的针对HTML文档的对象。
2.HTMLDOM节点
HTML文档中的每个成分都是一个节点。
(1)节点
根据DOM，HTML文档中的每个成分都是一个节点。
DOM是这样规定的：
整个文档是一个文档节点
每个HTML标签是一个元素节点
包含在HTML元素中的文本是文本节点
每一个HTML属性是一个属性节点
注释属于注释节点
(2)Node层次
节点彼此都有等级关系。
HTML文档中的所有节点组成了一个文档树（或节点树）。
HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。
树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。
(3)HTMLDOM节点树
一棵节点树中的所有节点彼此都是有关系的。
请看下面这个HTML文档：
<html>
<head>
<title>DOMTutorial</title>
</head>
<body>
<h1>DOMLessonone</h1>
<p>Helloworld!</p>
</body>
</html>
上面所有的节点彼此间都存在关系。
父节点:除文档节点之外的每个节点都有父节点。
子节点：大部分元素节点都有子节点。
同辈（同级节点）：当节点分享同一个父节点时，它们就是同辈（同级节点）。
后代：节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点。
先辈：节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点。
3.HTMLDOM访问节点
通过DOM，您可访问HTML文档中的每个节点。
(1)查找并访问节点
你可通过若干种方法来查找您希望操作的元素：
通过使用getElementById()和getElementsByTagName()方法
通过使用一个元素节点的parentNode、firstChild以及lastChild属性
(2)getElementById()和getElementsByTagName()
这两种方法会忽略文档的结构。
1)getElementById()
可通过指定的ID来返回元素：
语法:
document.getElementById("ID");
注释：getElementById()无法工作在XML中。在XML文档中，您必须通过拥有类型id的属性来进行搜索，而此类型必须在XMLDTD中进行声明。
2)getElementsByTagName()
使用指定的标签名返回所有的元素
语法:
document.getElementsByTagName("标签名称");
或者：document.getElementById('ID').getElementsByTagName("标签名称");
3)节点列表（nodeList)
当我们使用节点列表时，通常要把此列表保存在一个变量中，就像这样：
varx=document.getElementsByTagName("p");
现在，变量x包含着页面中所有<p>段落元素的一个列表，并且我们可以通过它们的索引号来访问这些<p>元素。
注意：索引号从0开始。
1)您可以通过使用length属性来循环遍历节点列表：
varx=document.getElementsByTagName("p");
for(vari=0;i<x.length;i++){
//dosomethingwitheachparagraph
}
2)您也可以通过索引号来访问某个具体的元素。
要访问第三个<p>元素，您可以这么写：
vary=x[2];
(3)parentNode、firstChild以及lastChild
这三个属性parentNode、firstChild以及lastChild可遵循文档的结构，在文档中进行“短距离的旅行”。
请看下面这个HTML片段：
<table>
<tr>
<td>John</td>
<td>Doe</td>
<td>Alaska</td>
</tr>
</table>
firstChild:第一个<td>是<tr>元素的首个子元素（firstChild）。
lastChild:最后一个<td>是<tr>元素的最后一个子元素。
parentNode:<tr>是每个<td>元素的父节点（parentNode）。
1)对firstChild最普遍的用法是访问某个元素的文本：
varx=[aparagraph];
vartext=x.firstChild.nodeValue;
2)parentNode属性常被用来改变文档的结构。假设您希望从文档中删除带有id为"maindiv"的节点：
varx=document.getElementById("maindiv");
x.parentNode.removeChild(x);
首先，您需要找到带有指定id的节点，然后移至其父节点并执行removeChild()方法。
(4)根节点
有两种特殊的文档属性可用来访问根节点：
document.documentElement:返回存在于XML以及HTML文档中的文档根节点。
document.body:对HTML页面的特殊扩展，提供了对<body>标签的直接访问。
4.HTMLDOM节点信息
nodeName、nodeValue以及nodeType包含有关于节点的信息。
每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）
(1)nodeName
nodeName属性含有某个节点的名称。
元素节点的nodeName是标签名称
属性节点的nodeName是属性名称
文本节点的nodeName永远是#text
文档节点的nodeName永远是#document
注释：nodeName所包含的XML元素的标签名称永远是大写的
(2)nodeValue
对于文本节点，nodeValue属性包含文本。
对于属性节点，nodeValue属性包含属性值。
nodeValue属性对于文档节点和元素节点是不可用的。
(3)nodeType
nodeType属性可返回节点的类型。
最重要的节点类型是：
元素类型节点类型
元素1
属性2
文本3
注释8
文档9
5.一个HTMLDOM实例
当一个用户在文档中点击时，HTML文档的背景颜色如何被改变
<html>
<head>
<scripttype="text/javascript">
functionChangeColor(){
document.body.bgcolor="yellow"
}
</script>
</head>
<bodyonclick="ChangeColor()">
Clickonthisdocument!
</body>
</html>
6.参考
BOM
WindowJavaScript层级中的顶层对象，表示浏览器窗口。
Navigator包含客户端浏览器的信息。
Screen包含客户端显示屏的信息。
History包含了浏览器窗口访问过的URL。
Location包含了当前URL的信息。
HTMLDOM对象
对象描述
Document代表整个HTML文档，可被用来访问页面中的所有元素
Anchor代表<a>元素
Area代表图像映射中的<area>元素
Base代表<base>元素
Body代表<body>元素
Button代表<button>元素
Event代表某个事件的状态
Form代表<form>元素
Frame代表<frame>元素
Frameset代表<frameset>元素
Iframe代表<iframe>元素
Image代表<img>元素
Inputbutton代表HTML表单中的一个按钮
Inputcheckbox代表HTML表单中的复选框
Inputfile代表HTML表单中的文件上传
Inputhidden代表HTML表单中的隐藏域
Inputpassword代表HTML表单中的密码域
Inputradio代表HTML表单中的单选按钮
Inputreset代表HTML表单中的重置按钮
Inputsubmit代表HTML表单中的确认按钮
Inputtext代表HTML表单中的文本输入域（文本框）
Link代表<link>元素
Meta代表<meta>元素
Object代表<Object>元素
Option代表<option>元素
Select代表HTML表单中的选择列表
Style代表单独的样式声明
Table代表<table>元素
TableData代表<td>元素
TableRow代表<tr>元素
Textarea代表<textarea>元素
相关推荐
Vue和React是数据驱动视图，如何有效控制DOM操作?能不能把计算，更多的转移为js计算？因为js执行速度很快。patch函数-->patch,对比tag,对比tag与key,对比children