-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathJavascript-DOM.html
20 lines (19 loc) · 10.1 KB
/
Javascript-DOM.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<title>Javascript-DOM</title>
<basefont face="微软雅黑" size="2" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="exporter-version" content="Evernote Windows/304720 (zh-CN, DDL); Windows/10.0.14393 (Win64);"/>
<style>
body, td {
font-family: 微软雅黑;
font-size: 10pt;
}
</style>
</head>
<body>
<a name="2243"/>
<h1>Javascript-DOM</h1>
<div>
<span><div><ol style="margin-top: 0mm; margin-bottom: 0mm; margin-left: 0mm; padding-left: 0pt;"><li style="list-style-type: none;"><ol style="margin-bottom: 0mm; margin-left: 0mm; padding-left: 0pt;"><li style="margin-left: 12pt; margin-right: 0pt; padding-left: 10pt; text-indent:0pt; font-family: Courier New; font-size: 16pt; font-weight: Bold; color: #010101;"><div style="margin-top: 0pt; margin-bottom: 13pt;"><h2 align="justify"><font color="#010101" face="Courier New" size="4"><span style="font-size:16pt; font-family:Courier New; color:#010101; font-weight:Bold; font-style:Normal; font-decoration:Normal"><b>DOM</b></span></font><font color="#010101" face="黑体" size="4"><span style="font-size:16pt"><b>简介</b></span></font></h2></div></li></ol></li></ol><div align="justify" style="min-height: 13pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> </span></font><font color="#010101" face="宋体" size="2"><span style="font-size:10pt">全称Document Object Model，即文档对象模型。</span></font></div><div align="justify" style="min-height: 14pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> DOM</span></font><font color="#010101" face="宋体" size="2"><span style="font-size:10pt">描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。</span></font></div><div align="justify" style="min-height: 13pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> </span></font><font color="#010101" face="宋体" size="2"><span style="font-size:10pt">浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的，</span></font></div><div align="justify" style="min-height: 13pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> </span></font><font color="#010101" face="宋体" size="2"><span style="font-size:10pt">而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，</span></font></div><div align="justify" style="min-height: 13pt;"><div><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> </span></font><font color="#010101" face="宋体" size="2"><span style="font-size:10pt">组建好之后，按照树的结构将页面显示在浏览器的窗口中。</span></font></div><div><span style="font-family: 宋体;"><span style="color: rgb(1, 1, 1);"><img src="Javascript-DOM_files/dom树.png" type="image/png"/><br/></span></span></div></div><ol start="2" style="margin-top: 0mm; margin-bottom: 0mm; margin-left: 0mm; padding-left: 0pt;"><li style="list-style-type: none;"><ol start="2" style="margin-bottom: 0mm; margin-left: 0mm; padding-left: 0pt;"><li style="margin-left: 12pt; margin-right: 0pt; padding-left: 10pt; text-indent:0pt; font-family: Courier New; font-size: 16pt; font-weight: Bold; color: #010101;"><div style="margin-top: 0pt; margin-bottom: 13pt;"><h2 align="justify"><font color="#010101" face="黑体" size="4"><span style="font-size:16pt; font-family:����; color:#010101; font-weight:Bold; font-style:Normal; font-decoration:Normal"><b>节点层次</b></span></font></h2></div></li></ol></li></ol><div align="justify" style="min-height: 14pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> HTML</span></font><font color="#010101" face="宋体" size="2"><span style="font-size:10pt">网页是可以看做是一个树状的结构，如下：</span></font></div><div align="justify" style="min-height: 10pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> html</span></font></div><div align="justify" style="min-height: 10pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> |-- head</span></font></div><div align="justify" style="min-height: 10pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> | |-- title</span></font></div><div align="justify" style="min-height: 10pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> | |-- meta</span></font></div><div align="justify" style="min-height: 10pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> | ...</span></font></div><div align="justify" style="min-height: 10pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> |-- body</span></font></div><div align="justify" style="min-height: 10pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> | |-- div</span></font></div><div align="justify" style="min-height: 10pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> | |-- form</span></font></div><div align="justify" style="min-height: 10pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> | | |-- input</span></font></div><div align="justify" style="min-height: 10pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> | | |-- textarea</span></font></div><div align="justify" style="min-height: 10pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> ... ... ...</span></font></div><div align="justify" style="min-height: 13pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> </span></font><font color="#010101" face="宋体" size="2"><span style="font-size:10pt">这是一颗树，是由多个节点（Node）组成的，节点的类型有很多种。</span></font></div><div align="justify" style="min-height: 13pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> </span></font><font color="#010101" face="宋体" size="2"><span style="font-size:10pt">节点最多有一个父节点，可以有多个子节点。</span></font></div><div align="justify" style="min-height: 14pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt">HTML DOM</span></font> <font color="#010101" face="宋体" size="2"><span style="font-size:10pt">定义了访问和操作HTML文档的标准方法。</span></font></div><div align="justify" style="min-height: 10pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> document</span></font></div><div align="justify" style="min-height: 13pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> </span></font><font color="#010101" face="宋体" size="2"><span style="font-size:10pt">代表当前页面的整个文档树。</span></font></div><div align="justify" style="min-height: 13pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> </span></font><font color="#010101" face="宋体" size="2"><span style="font-size:10pt">访问属性</span></font></div><div align="justify" style="min-height: 10pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> all</span></font></div><div align="justify" style="min-height: 10pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> forms</span></font></div><div align="justify" style="min-height: 10pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> images</span></font></div><div align="justify" style="min-height: 10pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> links</span></font></div><div align="justify" style="min-height: 10pt;"><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> body</span></font></div><div align="justify" style="min-height: 13pt;"><div><font color="#010101" face="Courier New" size="2"><span style="font-size:10pt"> </span></font><font color="#010101" face="宋体" size="2"><span style="font-size:10pt">访问方法(最常用的DOM方法)</span></font></div><div><span style="font-family: 宋体;"><span style="color: rgb(1, 1, 1);"><a href="Javascript-DOM_files/10通过关系找标签.html"><img src="Javascript-DOM_files/4f3a0c04587347f99628b7b910479bfb.png" alt="10通过关系找标签.html"></a><a href="Javascript-DOM_files/11创建节点、插入节点.html"><img src="Javascript-DOM_files/8b2a0076ad3a24300d487dd110e8a7d9.png" alt="11创建节点、插入节点.html"></a><a href="Javascript-DOM_files/12增加附件.html"><img src="Javascript-DOM_files/c97c2b02e05f18f0c5c9c965390592aa.png" alt="12增加附件.html"></a><a href="Javascript-DOM_files/13城市的联动框.html"><img src="Javascript-DOM_files/8998d6ffc1a1869fd82f58668a287816.png" alt="13城市的联动框.html"></a><a href="Javascript-DOM_files/14时间的联动框.html"><img src="Javascript-DOM_files/fed79dd5f5812850b682fabd231d5060.png" alt="14时间的联动框.html"></a><a href="Javascript-DOM_files/15操作css样式.html"><img src="Javascript-DOM_files/f7c3236e8409a18ef6465f96134bafb0.png" alt="15操作css样式.html"></a><a href="Javascript-DOM_files/7.Dom编程的入门.html"><img src="Javascript-DOM_files/495688ff7494cbc39429fa25da498024.png" alt="7.Dom编程的入门.html"></a><a href="Javascript-DOM_files/8根据html标签的属性找节点.html"><img src="Javascript-DOM_files/a67a08118bd39f8c9e5b1b5d293edbb4.png" alt="8根据html标签的属性找节点.html"></a><a href="Javascript-DOM_files/9根据属性找标签的练习.html"><img src="Javascript-DOM_files/41a3be18ada9d347534349d90ac16f35.png" alt="9根据属性找标签的练习.html"></a><br/></span></span></div></div></div></span>
</div></body></html>