1.DOM的概念
网页是一种结构化的文档,使用一组预定义的XML或HTML标签进行标记。
DOM是一组用来描述脚本怎样与结构化文档进行交互和访问的Web标准。
DOM不是javascript,DOM不是DHTML,它是一个标准。
代码:
<html> <head> <title>HTML DOM</title> </head> <body> <h1>DOM的结构</h1> <p><a href="href">链接</a></p> </body> </html>
表示为DOM结构就如下图:
2.DOM中的层次
DOM继承关系如下图:
DOM中最基础的节点为Node。
| 节点种类 | 解释 | 产生方式 |
| Element | 表示起始标签和结束标签之间的内容,例如<tag></tab>或者<tag/>。这是唯一可以同时包含特性和子节点的节点类型。 | document.createElement(tagName) |
| Attr | 代表一对特性名和特性值。这个节点类型不能包含子节点。 | document.createAttribute(name) |
| Text | 代表XML文档中的在起始标签和结束标签之间,或者CDataSection内包含的普通文本。这个节点类型不能包含子节点。 | document.createTextNode(text) |
| Comment | 代表XML注释。这个节点不能包含子节点。 | document.createComment(text) |
| Document | 最顶层的节点,所有的其他节点都是附属于它的 | 一直存在 |
| DocumentFragment? | 可以像Document一样来保存其他节点。 | document.createDocumentFragment() |
| DocumentType? | DTD引用(使用<!DOCTYPE>语法)的对象表现形式,它不能包含子节点。 | ? |
| CDataSection | <![CDATA[]]>的对象表现形式。这个节点类型仅能包含文本节点Text作为子节点。 | document.createCDataSection(data) |
| Entity | 表示在DTD中的一个实体定义,例如<!ENTITY foo"foo">。这个节点类型不能包含子节点。 | ? |
| EntityReference? | 代表一个实体引用,例如"。这个节点类型不能包含子节点。 | document.createEntityReference(name) |
| ProcessingInstruction? | 目标的名称。 | document.createProcessingInstruction(target,data) |
| Notation | 代表在DTD中定义的记号。这个很少用到。 | ? |
3.常用对象及方法
核心对象Document
1.它能创建其它节点的工作
各种个样的document.createXXX()方法
2.查找Element对象,主要用到两个方法
document.getElementById(id);
document.getElementsByTagName(tagName);
常用方法:
createElement()、createTextNode()、appendChild()
<html>
<head>
<title>createElement() Example</title>
<script type="text/javascript">
function createMessage() {
var oP = document.createElement("p");
var oText = document.createTextNode("Hello World!");
oP.appendChild(oText);
document.body.appendChild(oP);
}
</script>
</head>
<body onload="createMessage()">
</body>
</html>
removeChild()、replaceChild()、insertBefore()
删除节点
<html>
<head>
<title>removeChild() Example</title>
<script type="text/javascript">
function removeMessage() {
var oP = document.body.getElementsByTagName("p")[0];
oP.parentNode.removeChild(oP);
}
</script>
</head>
<body onload="removeMessage()">
<p>Hello World!</p>
</body>
</html>
替换
<html>
<head>
<title>replaceChild() Example</title>
<script type="text/javascript">
function replaceMessage() {
var oNewP = document.createElement("p");
var oText = document.createTextNode("Hello Universe!");
oNewP.appendChild(oText);
var oOldP = document.body.getElementsByTagName("p")[0];
oOldP.parentNode.replaceChild(oNewP, oOldP);
}
</script>
</head>
<body onload="replaceMessage()">
<p>Hello World!</p>
</body>
</html>
新文本添加到旧文本之前
<html>
<head>
<title>insertBefore() Example</title>
<script type="text/javascript">
function insertMessage() {
var oNewP = document.createElement("p");
var oText = document.createTextNode("Hello Universe!");
oNewP.appendChild(oText);
var oOldP = document.getElementsByTagName("p")[0];
document.body.insertBefore(oNewP, oOldP);
}
</script>
</head>
<body onload="insertMessage()">
<p>Hello World!</p>
</body>
</html>
Attachments
-
test.txt
(4 bytes) - added by anonymous
3 years ago.
-
error.txt
(157 bytes) - added by anonymous
3 years ago.
test1
-
space in filename.txt
(21 bytes) - added by dserodio@…
3 years ago.
Attachment with a space in its name
-
green.gif
(262 bytes) - added by anonymous
3 years ago.
Test File
-
SimpleText.txt
(16 bytes) - added by anonymous
3 years ago.
-
svn.jpg
(12.9 KB) - added by anonymous
3 years ago.
-
HowToUploadAnImage.jpg
(27.8 KB) - added by anonymous
3 years ago.
Does it work?
-
biggrin.gif
(0.7 KB) - added by anonymous
3 years ago.
-
test.2.txt
(12 bytes) - added by anonymous
3 years ago.
-
admin_dft.gif
(254 bytes) - added by anonymous
3 years ago.
-
mein_datei2.2.txt
(17 bytes) - added by anonymous
2 years ago.
-
1.png
(6.6 KB) - added by anonymous
2 years ago.
-
meBnW.jpg
(66.5 KB) - added by anonymous
2 years ago.
-
WSWebSite.log
(28.2 KB) - added by Theresa
2 years ago.
a log
-
gnash-dbg.log
(59 bytes) - added by anonymous
20 months ago.
-
eclipse
(27.0 KB) - added by anonymous
20 months ago.
-
New Text Document.txt
(13 bytes) - added by anonymous
18 months ago.
-
shapes-rect-01-t.svg
(4.9 KB) - added by anonymous
18 months ago.
-
Bluehound.gif
(1.9 KB) - added by anonymous
16 months ago.
-
cacert.der
(0.8 KB) - added by anonymous
14 months ago.
-
test.3.txt
(49 bytes) - added by anonymous
12 months ago.
-
Patient-1.JPG
(88.4 KB) - added by smuneer
12 months ago.
-
test.py
(78 bytes) - added by xuel
11 months ago.
just have a try :)
-
temp.txt
(5 bytes) - added by anonymous
11 months ago.
this is a test file
-
distutils.patch
(1.1 KB) - added by anonymous
10 months ago.
-
NetRS Reciever Status.png
(82.0 KB) - added by anonymous
8 months ago.
NetRS Receiver Status page
-
sample_attachment.txt
(34 bytes) - added by anonymous
7 months ago.
-
test.jpg
(8.7 KB) - added by anonymous
7 months ago.
-
dom_tree.jpg
(37.7 KB) - added by zhouyuanzheng <flulover@…>
3 months ago.
-
ClassDiagram.png
(31.0 KB) - added by zhouyuanzheng <flulover@…>
3 months ago.
-
trac_logo.png
(5.5 KB) - added by anonymous
2 months ago.
-
dosbox.conf
(7.0 KB) - added by anonymous
4 weeks ago.




