一、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)
删除一个孩子节点