一、DOM简介
1.
DOM
是
”DocumentObject Model”
（文档对象模型）的首字母缩写。当创建了一个网页并把它加载到
Web
浏览器中时，就会在幕后创建一个文档对象模型
2.
DOM
表示被加载到浏览器窗口里的当前页面：浏览器向我们提供了当前页面的模型，而我们可以通过
JavaScript
访问这个模型
3.
DOM
把一份文档表示为一棵树
二、DOM树结构
二、DOM树结构
浏览器加载该页面并将之转换为树形结构：
1.DOM
树中的一切是以最外层的
HTML
包含元素，即
html
元素开始的。使用树的比喻，这叫做根元素（
root element
）
2.
从根流出的线表示不同标记部分之间的关系。
head
和
body
元素是
html
根元素的孩子（
child
）；
title
是
head
的孩子，而文本 “
Trees,trees, everywhere”
是
title
的孩子；相对的，
head
是
title
的父亲（
parent
），
title
是文本 “
Trees,trees, everywhere”
的父亲。处在同一层次的且互不包含的两个分支（如
head
和
body
）之间称为兄弟（
sibling
）关系。整个树就这样组织下去，直到浏览器获得与上图类似的结构
通常把这样的树结构成为一棵节点树
三、节点
三、节点
1
.DOM
文档是由节点构成的集合，此时的节点是文档树上的树枝或者树叶
2.
DOM
中节点的类型：
1.
元素节点（
element node
），诸如
<head>
、
<p>
、
<div>
等。元素节点可以包含其它的元素，唯一没有被包含在其它元素里的元素是
<html>
，它是根元素
2.
属性节点（
attribute node
），元素或多或少地有一些属性，属性可以对元素做出一些具体的描述。因为属性总是被放到起始标签里，所以属性节点总是被包含在元素节点中
3.
文本节点（
text node
），
<h1>
元素中包含着文本节点“
Trees,trees, everywhere”
四、基本DOM方法
五、重要DOM属性
四、基本DOM方法
1.
getElementById
(id)：
返回一个给定
id
属性的元素节点相对应的对象。这个方法是与
document
对象相关联的函数。其中
document
对象代表着整个
HTML
文档并可以用来访问所有页面中的元素
2.
getElementsByTagName
(
tagname
)：
返回一个对象数组，它们分别对应着文档里的一个特定的元素节点
3.
getAttribute
()：
返回对象的属性值
4.
setAttribute
()
nodeName
修改对象的属性值五、重要DOM属性
1.
childNodes
可以将节点树中任何一个元素的所有子元素检索出来，这个属性返回一个数组，包含了给定元素节点的全体子元素
2.nodeName
返回元素节点的名称。注意，返回的结果全部是大写
3.
nodeType
用来区分节点的类型，元素节点的
nodeType
属性值是
1
，属性节点的
nodeType
属性值是
2
，文本节点的
nodeType
属性值是
3
4.
nodeValue
可以用来存取文本节点的值。对于元素节点或属性节点这个属性返回空
5.
firstChild
和
lastChild
第一个和最后一个孩子节点。
node.firstChild
等价于
node.childNodes
[0]
，
node.lastChild
等价于
node.childNodes
[
node.childNodes.length
– 1]
6.
parentNode
返回元素的父节点
7.
nextSibling
返回下一个兄弟节点
六、改变网页结构的DOM方法
六、改变网页结构的DOM方法
1.
createElement
(
tagname
)
创建新的元素节点，此方法与
document
对象相关联。新建的元素节点并未与节点树相连
2.
appendChild
(node)
把新建的节点插入到节点树的某个节点下，成为这个节点的子节点
3.
createTextNode
(text)
创建文本节点
4.
insertBefore
(
newNode
,
targetNode
)
把一个新元素插入到一个现有元素的前面
5.
replaceChild
(
newChild
,
oldChild
)
替换一个孩子节点
6.
removeChild
(node)
删除一个孩子节点
1527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
