DOM=DocumentObject Model,文档对象模型。
Dom有三个不同的部分。
1、核心DOM 也是最基础的文档结构的标准模型
2、XMLDOM 针对XML文档的标准模型
3、HTML DOM 针对HTML文档的标准模型
对于一个新生程序猿来说。HTML是什么,事实上并不重要。可是都知道。html文件,能够用浏览器打开。
HTML和XML。基本同样。仅仅只是是。HTML中节点 标记,是预先定义好的。
而XML中的节点。由文档的作者定义。所以XML是可扩展的。
HTML: 超文本标记语言。主要功能是能被浏览器解析 显示出来。HTML能够看作是一种特殊的标记语言。
XML:可扩展标记语言。
而DOM作为以上的标准。当然会对其上面进行规划:
依据DOM,文档每一个成分都是一个节点。
对于上面的文档。
事实上就是一颗树。
通过一个样例来了解一下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM</title>
<script src="base.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<h1>标题H1</h1>
<p>p标签</p>
<ul>
<li>栏目一</li>
<li>栏目二</li>
<li>栏目三</li>
</ul>
<div id='box' name='boxs'>測试div</div>
</body>
</html>
什么是节点?
文档中的全部标记,都称之为节点。
DOM节点树中的节点分为:
元素节点、文本节点、属性节点。
元素节点:标记名称 如 html body div等
文本节点:标记的内容 如 "測试div" "p标签" 等等
属性节点:用于修饰 标记名称的。也算是 标记的属性。 如 :id='boxs'
对元素元素的查询:
元素的查询,有好多种方式。
依据标记名称(getElementsByTagName)、id名(getElementById)、name名(getElementsByName)。
都能够进行查找
innerHTML:获取元素节点中的文本节点
元素属性节点的改动。查到元素之后,也能够进行 属性的改动 attribute
查找元素的时候。假设查到的元素 不止一个,那么返回的为一个节点数组。因此在使用的时候一定不能缺少数组标号。通过childNode属性来获取全部子节点
对与节点来说。也是一种树形结构。当查询到一个元素节点后,这个元素节点中 也包含非常多小节点。
如上所看到的的节点,由 属性节点 和 文本节点构成。使用childNodes.length 获取元素节点中的全部子节点
使用的时候。与数组类似 childNodes[i] 对第i个子节点进行操作
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemM0NzQyMzU5MTg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
对子节点的操作
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemM0NzQyMzU5MTg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
DOM基础非常多,记是肯定记不住的。浏览一遍。了解一下,在下次使用的时候,知道有那么一回事。知道在哪里查资料即可了。
当然,也能够依据IDE的智能提示来做。