Skip to content

Commit a619337

Browse files
anbanganbang
committed
DOM操作
1 parent 1360e8f commit a619337

6 files changed

Lines changed: 608 additions & 15 deletions

File tree

‎DOM操作和封装DOM库/DOM面向对象.md‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
# DOM面向对象
2+
3+
**，低版本IE 中的所有 DOM 对象都是以 COM对象的形式实现的。这意味着 IE 中的DOM 对象与原生 JavaScript 对象的行为或活动特点并不一致。这些差异需要注意。**
4+
5+
- DOM节点的层次
6+
- Node类型
7+
- Document类型
8+
- Element类型
9+
- Text类型
10+
- Comment类型
11+
- CDATASection类型
12+
- DocumentType类型
13+
- DocumentFragment类型
14+
- Attr类型
15+
16+
### DOM节点的层次
17+
18+
DOM是树形的结构，
19+
20+
<!doctype html>
21+
<html>
22+
<head>
23+
<meta charset="UTF-8">
24+
<title>Document</title>
25+
<link rel="stylesheet" href="./a.css"/>
26+
</head>
27+
<body>
28+
<p>hello word</p>
29+
<script src="index.js"></script>
30+
</body>
31+
</html>
32+
33+
DOM的结构如下
34+
35+
![](http://i.imgur.com/tY1ymHt.png)
36+
37+
38+
### Node类型
39+
40+
DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息及（或）标记。每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构
41+
42+
文档节点只有一个子节点，即 <html> 元素，我们称之为**文档元素**。文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中。每个文
43+
档只能有一个文档元素。在 HTML 页面中，文档元素始终都是 <html> 元素。在 XML 中，没有预定义的元素，因此任何元素都可能成为文档元素。
44+
45+
每一段标记都可以通过树中的一个节点来表示：HTML 元素通过元素节点表示，特性（attribute）通过特性节点表示，文档类型通过文档类型节点表示，而注释则通过注释节点表示。总共有 12 种节点类型(nodeType)，这些类型都继承自一个基类型。
46+
47+
<p>hello word</p>
48+
<p id="test1">hello word</p>
49+
<p>hello word</p>
50+
<p>hello word</p>
51+
52+
<script>
53+
var testOne=document.getElementById("test1");
54+
console.dir(testOne);//p#test1
55+
console.dir(testOne.__proto__);//HTMLParagraphElement
56+
console.dir(testOne.__proto__.__proto__);//HTMLElement
57+
console.dir(testOne.__proto__.__proto__.__proto__);//Element
58+
console.dir(testOne.__proto__.__proto__.__proto__.__proto__);//Node,重点关注这个属性；
59+
console.dir(testOne.__proto__.__proto__.__proto__.__proto__.__proto__);//EventTarget
60+
console.dir(testOne.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__);//Object
61+
</script>
62+
63+
可以输出看下Node上面的属性和方法；
64+
65+
重点关心下面几个**属性**；
66+
67+
- nodeType
68+
- nodeName
69+
- nodeValue
70+
- childNodes
71+
- children
72+
- firstChild
73+
- lastChild
74+
- nextSibling
75+
- previousSibling
76+
- parentNode
77+
78+
Node上面的**方法**
79+
80+
- appendChild
81+
- insertBefore
82+
- replaceChild
83+
- removeChild
84+
- cloneNode
85+
- hasChildNodes
86+
- normalize
87+
88+
DOM1 级定义了一个 Node 接口，该接口将由 DOM 中的所有节点类型实现。这个 Node 接口在JavaScript 中是作为 Node 类型实现的；除了 IE 之外，在其他所有浏览器中都可以访问到这个类型。JavaScript 中的所有节点类型都继承自 Node 类型，因此所有节点类型都共享着相同的基本属性和方法。
89+
90+
##### nodeType
91+
92+
ELEMENT_NODE:1
93+
ATTRIBUTE_NODE:2
94+
TEXT_NODE:3
95+
CDATA_SECTION_NODE:4
96+
ENTITY_REFERENCE_NODE:5
97+
ENTITY_NODE:6
98+
PROCESSING_INSTRUCTION_NODE:7
99+
COMMENT_NODE:8
100+
DOCUMENT_NODE:9
101+
DOCUMENT_TYPE_NODE:10
102+
DOCUMENT_FRAGMENT_NODE:11
103+
NOTATION_NODE:12
104+

0 commit comments

Comments
 (0)