首先,什么是DOM
?DOM
是Document Object Model(文档对象模型)的缩写。DOM
是中立与平台和语言的接口,它允许程序或脚本动态地访问更新文档的内容、样式以及结构。DOM
包含核心DOM
、XML DOM
和HTML DOM
,我们这里讨论HTML DOM
,HTML DOM
是关于如何获取、添加、修改和删除HTML元素的标准。
JavaScript中的例如getElementById()、getElementsByTagName()、getAttribute()和setAttribute()
等方法,这些都是DOM
的组成部分。
在HTML DOM
中HTML文档中所有内容都被视为节点,DOM
被视为节点树的HTML。
(1)整个文档视为一个文档节点
(2)每个HTML元素视为元素节点
(3)HTML元素中的文本视为文本节点
(4)每个HTML属性为属性节点
(5)注释为注释节点
HTML DOM
将HTML视为文档视为树结构,这种结构称为节点树:
树中元素的关系可以总结为父、子和同胞:
(1)在节点树中,顶端节点称为根节点
(2)除了根节点,每个节点都有父节点(parent)
(3)一个节点可以拥有任意多个子节点
(4)拥有相同父节点为同胞(兄弟或姐妹)节点
列如:
<html> //<html>为根节点,它没有父节点,它有两个子元素节点<head>、<body>
<head> //<head>有一个子元素节点<title>,<body>有两个子元素节点<h1>、<p>
<title>DOM 结构</title> //<title>有一个子文本节点:“DOM结构”,类似<h1>和<p>也有一个子文本节点
</head>
<body>
<h1>DOM 结构</h1> //<h1><p>为同胞节点
<p>Hello world!</p>
</body>
</html>
得出结论:定义HTML DOM结构,就是为了方便使用HTML DOM方法对节点进行操作。