节点层次
文档节点是每个文档的根节点。<html>元素,是document的子节点,诚挚为文档元素。文档元素是文档的最外层元素,文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素。在HTML页面中,文档元素始终都是<html>元素。在xml中,没有预定义的元素,因此任何元素都可能成为文档元素。
Node类型
DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现。这个Node接口在JavaScript中是作为Node类型实现的;除IE外,在其他所有浏览器中都可以访问到这个类型。JavaScript中的所有节点类型都继承自Node类型,因此所有节点类型都共享着相同的基本属性和方法。
每个节点都有一个nodeType属性,表示节点的类型。
Node.ELEMENT_NODE 1
Node.ATTRIBUTE_NODE 2
Node.TEXT_NODE 3
Node.CDATA_SECTION_NODE 4
Node.ENTITY_REFERENCE_NODE 5
Node.ENTITY_NODE 6
Node.PROCESSING_INSTRUCTION_NODE 7
Node.COMMENT_NODE 8
Node.DOCUMENT_NODE 9
Node.DOCUMENT_TYPE_NODE 10
Node.DOCUMENT_FRAGMENT_NODE 11
Node.NOTATION_NODE 12
并不是所有节点类型都受到Web浏览器的支持。最常用的就是元素和文本节点。
nodeName和nodeValue属性
节点关系
childNodes:保存一个NodeList对象。NodeList是一个类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点。它不是Array的实例。独特之处在于,它实际上是结余DOM结构动态执行查询的结果。
访问方式:someNode.childNodes[1];someNode.childNodes.item(1);
parentNode
previousSibling、nextSibling、firstChild、lastChild
ownerDocument
操作节点
appendChild
insertBefore
replaceChild
removeChild
其他方法
cloneNode,参数为true深复制;false,浅复制
normalize
Document类型
在浏览器中document对象是HTMLDocument(继承自Document)的一个实例,表示整个HTML页面。而且,document对象是window对象的一个属性。因此可以将其作为全局对象来访问。
nodeType : 9
nodeName:#document
nodeValue:null
parentNode:null
ownerDocument:null
子节点类型可能是DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或Comment。
文档的子节点
还有两个内置的访问其子节点的快捷方式。documentElement,始终指向HTML页面中的<html>元素;childNodes。
document.documentElement;//<html>
document.childNodes[0];//<html>
document.body;//<body>
子节点DocumentType:<!DOCTYPE>
通过document.doctype属性访问,浏览器支持不一。
文档信息
title:<title>,document.title修改该值不会改变title元素
3个与页面的请求有关:
URL:完整的URL
domain:页面的域名
referrer:连接到当前页面的那个页面的URL
所有这些信息都存在于请求的HTTP头部,值不过是通过这些属性让我们能够在JavaScript中访问他们而已。
由于跨域安全限制,来自不同紫玉的页面无法通过JavaScript通信。而通过将每个页面的document.domain设置为相同的值,这些页面就可以互相访问对方包含的JavaScript对象了。
查找元素
getElementById:要取得的元素的ID,返回一个元素
getElementsByTagName:标签名,返回一个NodeList,其实是一个HTMLCollection对象。通过方括号、item、namedItem访问元素。
getElementsByName:name特性
特殊集合:
document.anchors,包含文档中所有带name特性的<a>元素
document.applets,
document.forms,包含所有<form>元素,同document.getElementsByTagName("form")
document.images,包含文档中所有的<img>元素,同document.getElementsByTagName("img")
document.links,包含所有带有href特性的<a>
DOM一致性检测
document.implementation的hasFeature方法,两个参数,要检测的DOM功能的名称及版本号。
文档写入
write、writeln、open、close
Element类型
nodeType:1
nodeName:元素的标签名
nodeValue:null
parentNode:可能是Document或Element
子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference
标签名:tagName或nodeName
HTML元素
所有HTML元素都由HTMLElement类型表示,不是直接通过这个类型,也是通过它的子类型表示。
id,元素在文档中的唯一标识符
title,有关元素的附加说明信息,一般通过工具提示条显式
lang,元素内容的语言代码,很少使用
dir,语言的方向,值为ltr或rtl
className,与元素的class特性对应
取得特性
getAttribute
setAttribute
removeAttribute
不经常使用getAttribute,而是只使用对象的属性。
attributes属性
包含一个NamedNodeMap,与NodeList类似。
getNamedItem(name)
removeNamedItem(name)
setNamedItem(node)
item(pos)
element.attributes.getNamedItem("id").nodeValue;
element.attributes["id"].nodeValue
创建元素
document.createElement(),只有一个参数,即要创建元素的标签名。
Text元素
nodeType:3
nodeName:#text
nodeValue:包含的文本
parent:一个Element
不支持子节点
操作方法:
appendData(text)
deleteData(offset, count)
insertData(offset, text)
replaceData(offset, count, text)
splitText(offset)
substringData(offset, count)
length
修改文本节点时注意,此时的字符串会经过HTML(或XML)编码,小于号、大于号或引号都会转义。
创建文本节点
document.createTextNode()
规范化文本节点
normalize()
分割文本节点
splitText()
Comment类型
nodeType:8
nodeName:#comment
nodeValue:注释的内容
parentNode:可能是Document或Element
不支持子节点
与Text类型继承自相同的基类,因此拥有除splitText之外的所有字符串操作方法。
document.createComment()
CDATASection类型
只针对XML文档,表示的是CDATA区域,与Comment类似,继承自Text类型,拥有除了splitText外的所有字符串操作方法
nodeType:4
nodeName:#cdata-section
nodeValue:CDATA区域中的内容
parentNode:可能是Document或Element
不支持子节点
DocumentType类型
nodeType:10
nodeName:doctype的名称
nodeValue:null
parentNode:Document
不支持子节点
DocumentFragment类型
Attr类型
name:特性名称
value:值
specified:布尔值,区别特性是在代码中指定的,还是默认的
document.createAttribute
DOM操作技术