HTML DOM
2019-04-18 本文已影响0人
jarWorker
DOM
DOM（document object model）文档对象模型是定义和访问的HTML和 XML 的标准方法，HTML DOM将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
节点树
节点树
使用 HTML DOM，树中的所有节点均可以利用 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。
HTML 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML DOM</title>
</head>
<body>
<!-- 我是注释-->
<div>
<ul>
<li style="color:#66afe9">张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ul>
</div>
</body>
</html>
HTML DOM 节点
- 整个文档是一个文档节点（如:
html文件就是一个文档节点） - 每个 HTML 元素是元素节点（如:
<div>...</div>） - HTML 元素内的文本是文本节点(如:
张三) - 每个 HTML 属性是属性节点（如:
style="color:#66afe9"） - 注释是注释节点（如:
< ! -- 我是注释 -- >）
节点父、子和同胞
-
<html>节点没有父节点；它是根节点。 - 元素节点：
<head>和<body>的父节点是<html>节点，即文档节点：<html>节点拥有两个子节点：<head>和<body> - 文本节点：
张三的父节点是<li>节点 - 4个
<li>是同胞元素节点 -
<li style="color:#66afe9">张三</li>是<ul>的第一个子节点 -
<li >赵六</li>是<ul>的最后一个子节点
`
