DOM是针对HTML和XML文档的一个API
DOM描绘了一个层次化的节点树,允许开发人员轻松自如地添加、删除、替换、修改页面的某一部分
一、节点层次
DOM将HTML文档描绘成一个层次化的节点树,HTML文档中的任何内容都可以通过树中的一个节点来表示:
- HTML元素表示成元素节点
- HTML属性表示成属性节点
- 注释表示成注释节点
......
DOM中共有12种节点类型。
(一) Node类型
在javascript中,所有的节点类型都继承自Node类型。Node类型定义了节点类型的一些基本属性和方法,这些属性和方法被所有的节点共享。
1、基本属性
(1)nodeType:表明节点的类型
- 元素节点.nodeType = 1
- 文本节点.nodeType = 3
(2)nodeName:节点的名称
- 元素节点.nodeName = 元素的标签名(大写)
(3)nodeValue:节点的值
- 元素节点.nodeValue = null
2、节点关系
文档中所有的节点之间存在着各种关系,节点间的关系可以用传统的家族关系来描述。
(1)childNodes属性
- 作用:返回节点的所有子节点,这些子节点组成NodeList对象(NodeList对象并不是Array实例)
- 语法:someNode.childNode
-
访问保存在NodeList对象中的子节点
- someNode.childNodes[0];
- someNode.childNodes.item(0)
(2)parentNode属性
- 作用:指向文档树中的父节点
- 包含在childNodes列表中的所有节点都有相同的父节点
(3)firstChild、lastChild属性
- 分别指向childNodes列表中的第一个和最后一个节点
(4)previousSibling、nextSibling属性
(5)ownerDocument属性
- 该属性指向整个文档的文档节点
(6)hasChildNodes()方法
- 当节点包含一个或多个子节点时返回true
3、操作节点
DOM提供了一些操作节点的方法:
(1)添加节点
- appendChild():向NodeList列表的末尾添加一个节点,并返回新增的节点
- insertBefore(newNode,参照节点):向参照节点的前面插入newNode,并返回新节点
(2)替换节点
- replaceChild(新节点,要替换的节点):要替换的节点被新节点替换,并被方法返回
(3)删除节点
- removeChild(要删除的节点):删除要删除的节点,并返回要删除的节点
注意:上述四个方法操作的是某个节点的子节点,即这四个方法均需要先取得父节点(parentNode)
4、其他方法
(1)cloneNode(true/false)
- 作用:复制调用该方法的节点
- 参数为true时:执行深复制,即复制节点及其整个子节点树
- 参数为false时:执行浅复制,即只复制该节点本身
- 复制后的节点及其子节点属于文档,但是它没用父节点
(2)normalize()
- 作用:处理文档树中的文本节点,该方法会删除空文本节点/或者将相邻的文本节点合并为一个文本节点
(二) Document类型
Document类型可以表示HTML页面或者其他基于XML的文档,其中最常见的是作为HTMLDocument 实例的document对象,该对象表示整个HTML页面。Document节点具有下列特征:
- nodeType = 9
- nodeName = "#document"
- nodeValue = null
- parentNode = null
- ownerDocument = null
1.文档的子节点
DOM规定Document节点的子节点可以是以下几种:
(1)DocumentType
- 通常<!DOCTYPE>标签看成一个与文档其他部分不同的实体,可以通过doctype属性访问该标签
- 语法:var doctype = document.doctype
- 因为不同的浏览器对该属性的支持差别很大,所以该属性的用处不大
(2)Element
有两个内置属性可以快速地访问Document节点的子节点:
- documentElement:访问文档的<html>元素 //var html = document.documentElement
- body:访问<body>元素 //var body = document.body
(3)Comment
按照定义,出现在<html>元素外部的注释应该算是文档的子节点,然而不同的浏览器对这些外部注释的解析不同,故通常不在<html>元素外部使用注释。
(4)ProcessingInstruction
2、文档信息
document对象作为HTMLDocument的一个实例,还有几个标准Document对象没有的属性:
- title:获取<title>元素中的文本,即当前页面的标题 //document.title
- URL:返回地址栏中的URL
- domain:页面的域名
- referrer:返回链接到当前页面的URL
3、查找元素
(1)getElementById()
(2)getElementsByTagName()
- 该方法返回一个HTMLCollection对象,作为一个“动态”集合,该对象与NodeList很相似
-
访问HTMLCollection对象中元素的方法:
(假设, var images=document.getElementsByTagName("img");)- images[0]
- images.item(0)
- images.namedItem("myImage")=images["myImage"] //获取<img name="myImage"/>的图片
(3)getElementsByName()
4、特殊集合
为了方便访问文档的常用部分,document对象还提供了一些特殊的集合,这些集合都是HTMLCollection对象。
- document.anchors:包含文档中所有带name特性的<a>元素
- document.forms:包含文档中所有的<form>元素
- document.images:包含文档中所有的<img>元素
- document.links:包含文档中所有带href特性的<a>元素
5、DOM一致性检测
因为DOM分为多个级别,也包含多个部分,因此检测浏览器实现了DOM的哪些部分就十分必要。
- document.implementation属性就可以实现检测浏览器对DOM版本的支持情况
- document.implementation.hasFeature(要检测的DOM功能名称,版本号),若浏览器支持给定名称和版本的功能,该方法返回true。