本文根据(JavaScript高级程序设计(第三版))整理笔记
Node类型
- JavaScript中的所有节点类型都继承自Node类型, 每个节点有一个
nodeType
属性. 用于表明节点的类型 nodeType
有一下值:Node.ELEMENT_NODE
, 其值为1
, 表示元素节点Node.TEXT_NODE
, 其值为3
, 文本节点Node.PROCESSING_INSTRUCTION_NODE
, 值为7
,Node.COMMENT_NODE
, 其值为8
, 注释节点Node.DOCUMENT_TYPE_NODE
, 其值为9
, Document节点Node.DOCUMENT_TYPE_NODE
, 其值为10
, 描述DocumentType节点. <!DOCTYPE html>Node.DOCUMENT_FRAGMENT_NODE
, 其值为11
,DocumentFragment
节点
属性
- 节点有
nodeName
和nodeValue
属性, 表示节点名和节点值. 对于元素节点,nodeName
返回元素的标签名,nodeValue
返回null
. - 节点的
childNodes
属性返回节点的子节点, 它是一个NodeList
类数组对象(动态), 可以通过方括号和item(index)
方法取得子节点 - 每个节点有个
parentNode
属性, 指向它的父节点 - 节点的
previousSibling
和nextSibling
属性分别返回节点的上一兄弟节点和下一兄弟节点. - 节点的
firstChild
返回节点的第一个子节点,lastChild
返回节点的最后一个子节点
+ hasChildNodes()
方法返回true/false
, 当节点有子节点时, 返回true
方法
appendChild()
向childNodes
列表的末尾添加节点. 注意: 若加入的节点时已存在于文档的节点, 则将此节点移动到新位置.insertBefore(node, posNode)
, 在posNode节点之前插入node节点replaceChild(insNode, repNode)
将repNode节点替换为insNode节点removeChild(node)
将node节点移除- 可以用
cloneNode()
赋值一个节点, 当传入true
参数时执行深复制, 传入false
执行潜复制 - 假如出现了文本节点不包含文本或者连续出现两个文本节点, 则可以用normalize()方法. 这个方法会删除空的文本节点, 也会合并相邻的节点
Documet类型
- JavaScript中
Document
表示文档, 浏览器中document
为HTMLDocument
的实例.HTMLDocument
继承自Document
. document
同时也是window
的一个属性.nodeType
= 9nodeName
="#document"
nodeValue
= nullparentNode
= nulldocument.documentElement
指向<html>元素document.body
指向<body>元素document.doctype
指向<DOCTYPE>document.title
指向<title>document.URL
指向网页的URL
document.domain
返回域名document.referrer
返回来源页的URL
document.getElementById()
通过Id
返回元素document.getElementsByTagName()
通过标签名返回元素集合, 它是HTMLCollection
对象. 这个对象有一个namedItem
方法, 也可以调用item()
方法
document
还有一些属性集合也为HTMLCollection
对象
document.anchors
返回所有带有name
属性的<a>元素document.forms
返回文档中所有的<form>元素document.images
返回所有的<img>元素document.links
返回带有href属性的<a>元素- 可以通过
document.implementation
检测DOM实现的功能, 他有一个hasFeature()
方法 - 通过
document.write()
,document.writeln()
,document.open()
和document.close()
方法向文档写入信息.
Element类型
nodeType
= 1nodeName
为标签名nodeValue
= nullparentNode
=Document
或者Element
nodeName
和tagName
返回相同的值
HTML元素有以下的标准特性:id
: 元素在文档中的唯一标识title
: 对元素的说明lang
: 元素内容的语言代码dir
: 语言方向. ltr为从左至右, rtl为从右至左className
: 对应元素的class属性getAttribute()
获取元素的属性setAttribute()
设置元素的属性removeAttribute()
删除属性
可以对Element类型的值使用attributes
属性, 它包含一个NamedNodeMap
(动态)对象, 有如下方法:getNamedItem(name)
返回nodeName
为name
的节点removeNamedItem(name)
从列表中移除nodeName
为name
的节点setNamedItem(node)
向列表中添加节点, 以节点的nodeName
为索引item(pos)
返回pos
索引处的节点- 我们还可以通过
document.createElement()
创建新元素
Text类型
nodeType
= 3nodeName
="#text"
nodeValue
为节点所包含的文本parentNode
为Element
Text
类型的data
属性等同于nodeValue
, 以下方法可以操作节点的文本:appendData(text)
: 将text添加到节点末尾deleteData(offset, count)
从offset
指定的位置开始删除count
个字符insertData(offset, text)
在offset
指定的位置插入text
replaceData(offset, count, text)
用text
替换从offset
指定的位置开始到offset+count
为止处的字符串splitText(offset)
从offset
指定的位置将当前文本节点分成两个文本节点subsringData(offset, count)
提取从offset
指定的位置开始到offset+count
为止处的字符串- 文本节点还有一个
length
属性, 保存着节点中字符的数目. - 默认情况下, 每个可以包含内容的元素最多只能有一个文本节点, 而且必须确实有内容存在.
Comment类型
这个节点类型表示的是文档中的注释
nodeType
= 8nodeName
="#comment"
nodeValue
为注释的内容parentNode
为Document
或Element
document.createComment()
可以创建注释
DocumentFragment类型
它表示文档片段
nodeType
= 11nodeName
="#document-fragment"
nodeValue
= nullparentNode
= null- 可以用
document.createDocumentFragment()
方法创建节点