DOM事件对象

DOM节点层次,DOM事件类型

DOM是针对HTML和XML文档的一个API。

IE中所有的DOM对象都是以COM对象的形式实现的

节点层次

  • DOM可以将任何HTML或XML文档描绘长城一个多层节点构成的结构。
  • 每个节点拥有各自的特点数据方法,并与其他节点存在关系。

  • 文档节点是每个文档的根节点。在HTML文件中,文档节点只有一个子节点,既元素,我们称之为文档元素。文档元素是文档最外层的元素,文档中其他元素都包含在文档元素中。

每段标记都可以通过树中的一个节点表示。节点类型一共分为12种:

Node类型

DOM1级定义了一个Node接口,该接口由DOM中所有的节点类型实现。除IE外其他浏览器都可访问Node类型,Javascript中所有的节点类型都继承自Node类型

nodeType属性:每个节点都拥有该属性。

类型 数值 说明
Node.ELEMENT_NODE 1 代表元素
Node.ATTERIBUTE_NODE 2 代表属性
Node.TEXT_NODE 3 代表元素或属性中的文本内容
Node.CDATA_SECTION_NODE 4 代表文档中的CDATA部分
Node.ENTITY_REFERENCE_NODE 5 代表实体引用
Node.ENTITY_NODE 6 代表实体
Node.PROCESSING_INSTRUCTION_NODE 7 代表处理指令
Node.COMMENT_NODE 8 代表注释
Node.DOCUMENT_NODE 9 道标整个文档(DOM树根节点)
Node.DOCUMENT_TYPE_NODE 10 想为文档定义的实体提供接口
Node.DOCUMENT_FRAGENT_NODE 11 代表轻量级的文档对象
Node.NOTATION_NODE 12 代表dtd中声明的符号
nodeNamenodeValue 属性:
  • nodeName:节点名称
  • nodeValue:节点内容
节点关系:

子元素、父元素、兄弟元素。

childNodes属性:每一个节点都存在一个childNodes属性,其中保存着一个NodeList类数组对象,保存一组有序的节点,可以通过位置访问这些节点。

NodeList对象是基于DOM结构动态执行查询的结果,DOM结构的变化能够自动反映在NodeList对象中。该对象也想数组一样具有length属性。

parentNode属性:该属性指向文档树中的父结点。

NodeList列表中的每一个节点都有nextSibling属性和previousSibling属性用来访问该节点的下一个节点和上一个节点

父节点的firstChild属性和lastChild属性分别指向NodeList列表中的第一个和最后一个节点。

hasChildNodes()方法:该节点下是否拥有子节点。

ownerDocument属性:指向表示整个文档的文档节点,既根节点。

操作节点:

appendChild( newNode )方法:向childNodes列表末尾添加一个节点。

如果将childNodes列表中的节点使用appendChild()方法,则会将该节点移动至该列表末尾

insertBefore( newNode, ReferenceNode)方法:在参照节点前将新节点插入进childNodes列表。

如果参照节点为NULL,则该方法与appendChild()作用一致

replaceChild( newNode, oldNode )方法:用新节点替换掉旧的节点。

removeChild( Node )方法:从NodeList列表中删除一个节点,并返回这个被删除的节点。

其他方法:

cloneNode( Boolean )方法:复制一个节点,参数为是否进行深复制。

当参数为true时,复制节点及其整个子节点树。为false时,只复制节点本身。

normalize()方法:处理文档树中的文本节点。

Document类型

Javascript中通过Document类型表示文档。在浏览器中,document对象是HTMLDocument的一个实例,表示整个HTML页面。

document对象是window对象的一个属性,因此可以将它当做一个全局对象来访问

Document节点的特征

  • nodeType的值为9
  • nodeName的值为“#document”
  • nodeValue的值为null
  • parentNode的值为null
  • ownerDocument的值为null
  • 子节点:DocumentType(最多一个),Element(最多一个),ProcessingInstructionComment
文档子节点:

document.documentElement属性:指向文档中元素

childNodes列表:指向所有子节点

document.body属性:指向元素

document.doctype属性:访问<!DOCTYPE>标签内的信息 ( 浏览器支持不一致,作用有限 )

文档信息:

document.tittle属性:读或写HTML文档标题

document.URL属性:获取地址栏中的URL

document.domain属性:获取页面域名

document.referrer属性:链接当前页面的页面URL,如果没有则为空字符串

这四个属性只有tittledomain是可设置的,当页面URL为二级域名时,domian的属性值必须是该域名的一级域名

查找元素:

document.getElementById("ID");:通过ID获取标签 单个元素

document.getElementsByTagName("Tagname");:通过标签名获取标签 动态类数组对象

document.getElementByName("Name");:通过Name属性名称获取标签 只有HTMLDocument类型标签才有的方法,返回的也是一个动态类数组对象

特殊集合:

document.anchors:包含所有带name属性的元素

document.applets:包含所有元素 不建议使用

document.forms:包含所有

元素,与document.getElementsByTagName("form");等价

document.images:包含所有元素,与document.getElementsByTagName("image");等价

document.links:包含文档中所有带href特性的元素

DOM一致性检测:

document.implementation.hasFeature("function", "Version"); :检测DOM功能对应的版本号,返回布尔值

文档写入:

document.write("Str");:原样输出字符串内容

document.writeln("Str");:在字符串内容末尾添加一个‘\n’,并输出

如果文档结束后加载document.write,则页面会被重写

document.open();:打开网页的输出流

document.close();:关闭网页的输出流

Element类型

用于表现XML或HTML元素,提供对元素的标签名,子节点及特性的访问。

Element节点具有以下特征

  • nodeType的值为1
  • nodeName的值为元素的标签名
  • nodeValue的值为null
  • parentNode可能是DoucmentElement
  • 子节点:ElementTextCommentProcessingInstructionCDATASectionEntityReference

TagName == nodeName

HTML元素:

特性:idtittlelangdirclassname

取得特性:

getAttribute(“attr”);:取得特性的值,也可以是自定义特性

style:

属性值访问则返回一个对象

getAttribute()方式访问返回CSS文本

onclick等事件处理程序

属性值访问则返回一个Javascript函数

getAttribute()方式访问返回代码字符串

设置特性:

setAttribute("attr", "value");:设置特性,如果特性存在则覆盖,如果不存在则新建

removeAttribute("attr");:删除指定特性及特性的值

attributes属性:

NameNodeMap:动态的类数组集合。

元素的每一个特性都由一个Attr节点表示,每个节点都保存在NameNodeMap对象中

NameNodeMap对象方法:

  • getNameItem( name ):返回nodeName属性等于name的节点
  • removeNamedItem( name ):移除nodeName属性等于name的节点
  • setNamedItem( node ):向列表中添加节点,以节点的nodeName属性为索引
  • item( index ):返回位于index位置处的节点

removeNodeItem() == removeAttriibute()

创建元素:

document.createElement("TagName");:创建一个新元素

要把新元素添加到文档树,可以用appendChild()insertBrfore()replaceChild()方法

元素的子节点:
1
2
3
4
5
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
</ul>
  • 在IE浏览器中:ul元素的子节点有3个,分别是3个li元素。

  • 在其他浏览器中:ul元素子节点有7个,分别是3个li元素,和4个li元素两边的空白符

在使用子节点时,要注意检查nodeType属性,防止错误

Text类型

照字面解释的纯文本内容。

Text节点具有以下特征

  • nodeType值是3
  • nodeName的值是"#Text"
  • nodeValue的值为节点所包含的文本
  • parentNode是一个Element
  • 不支持(没有)子节点

nodeValue == data

操作节点中的文本:

  • appendDate(text);:将text添加至节点的末尾

  • deleteData(offset, count);:从指定offset开始删除count个字符

  • insertData(offset, text);:从offset指定的位置插入text

  • replaceData(offset, count, text);:用text替换从offset指定的位置到offset+count结束

  • splitText(offset);:从offset指定位置将当前文本节点分成两个文本节点
  • substringData(offset, count);:提取从offset指定的位置开始到offset+count为止的字符串

length属性:保存文本节点中字符的数量

创建文本节点:

document.createTextNode(text);:创建新的文本节点

规范化文本节点:

normalize()方法:如果在一个包含两个或多个文本节点的父元素上调用该方法,则会将所有文本节点合并成一个节点。

分割文本节点:

splitText( index );:根据指定位置分割文本节点

Comment类型

Comment类型既注释类型,它具有以下特征

  • nodeType的值是8
  • nodeName的值为"#comment"
  • nodeValue的值是注释的内容
  • parentNode可能是ElementDocument
  • 不支持(没有)子节点

Comment类型与Text类型继承于相同的基类,因此它拥有除splitText()所有的字符串操作方法

CDATASection类型

只针对基于XML的文档,表示的是CDATA区域。

Comment类似,CDATASection类型继承自Text类型,拥有除splitText()所有的字符串操作方法

CDATASection类型具有以下特征

  • nodeType的值为4
  • nodeName的值为"#data-section"
  • nodeValue的值是CDATA区域中的内容
  • parentNode可能是ElementDocument
  • 不支持(没有)子节点

DoucmentType类型

包含着与文档的doctype有关的所有信息,具有以下特征

  • nodeType的值为10

  • nodeName的值为doctype的名称

  • nodeValue的值为null

  • parentNode的值是Document

  • 不支持(没有)子节点

    仅有Firefox、Safari、Opera支持

DOM1级中:

不能动态创建DocumentType对象,只能通过解析代码的方式来创建。对象保存在document.doctype中。

DocumentType对象属性

  • name:表示文档类型的名称
  • entities:文档类型描述的实体的NamedNodeMap对象
  • notations:文档类型的描述符号的NamedNodeMap对象

一般情况下entities和notations都是空列表

Attr类型

不建议直接访问属性节点

元素的特性在DOM中以Attr类型来表示。在所有浏览器中都可以访问Attr类型的构造函数和原型。

特性就是存在于元素的attributes属性中的节点,它具有以下特征

  • nodeType的值为2
  • nodeName的值为特性的名称
  • nodeValue的值为特性的值
  • parentNode的值是null
  • 在HTML中不支持(没有)子节点
  • 在 XML 中子节点可能是Text或 EntityReference
属性:
  • name:特性名称

  • value:特性的值

  • specified:布尔值,判断是自定义特性还是默认特性

DOM操作技术

动态脚本

页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本。

动态添加脚本方式插入外部文件直接插入Javascript代码

插入外部文件:

1
2
3
4
5
6
7
8
9
10
11
// 准备插入脚本的的代码
<script type="text/javascript" src="script.js"></script>
// 利用DOM方式插入脚本并封装成一个函数
function loadScript(url) {
var script = document.createElement("script"); // 创建Script对象
script.type = "text/javascript"; // 设置类型
script.src = url; // 设置脚本地址
document.body.appendChild(script); // 将脚本添加至body元素中
}
//加载外部脚本
loadScript("script.js");

直接插入Javascript代码:

1
2
3
4
5
6
7
8
9
10
11
// 准备插入脚本的的代码
<script type="text/javascript" src="script.js">
function sayHi(){
alert("Hi");
}
</script>
// 利用DOM方式插入脚本
var script = document.createElement("script"); // 创建Script对象
script.type = "text/javascript"; // 设置类型
script.text = "fucntion sayHi(){ alert('Hi') }"; // 设置脚本地址
document.body.appendChild(script); // 将脚本添加至body元素中

动态样式

添加CSS样式的两种方式:包含外部文件,

客官里面请~