JavaScript_DOM
DOM
Node类型
快速导航：节点类型 | Node属性 | 操纵 NodeList 中节点常用方法
Node.ATTRIBUTE_NODEArrtibute属性节点2
| 常量名 | 节点类型 | 常用 | 值 |
| Node.ELEMENT_NODE | Element | 元素节点 | 1 |
| Node.ATTRIBUTE_NODE | Attribute | 属性节点 | 2 |
| Node.TEXT_NODE | Text | 文本节点 | 3 |
| Node.CDATA_SECTION_NODE | CDATASection | 4 | |
| Node.ENTITY_REFERENCE_NODE | EntityReference | 5 | |
| Node.ENTITY_NODE | Entity | 6 | |
| Node.PROCESSING_INSTRUCTION_NODE | ProcessingInstruction | 7 | |
| Node.COMMENT_NODE | Comment | 注释节点 | 8 |
| Node.DOCUMENT_NODE | Document | 文档节点 | 9 |
| Node.DOCUMENT_TYPE_NODE | DoucmentType | 10 | |
| Node.DOCUMENT_FRAGMENT_NODE | DocumentFragment | 文档片段 | 11 |
| Node.NOTATION_NODE | Notation | 12 |
共6个常用节点类型：元素节点，属性节点，文本节点，注释节点，文档节点，文档片段
Node属性
1. 标签名 nodeName
2. 节点类型 nodeType
可用 (node.nodeType == Node.ELEMENT_NODE) 检测节点类型，由于IE不适用（不适用原因见JavaScript高级程序设计 P249）不建议使用
建议用数字比较 （node.nodeType == 1)
3. 子节点 childNode
存储一个由子节点组成的动态的 childNode对象集合
1. 第一个子节点 firstChild
2. 最后一个子节点 lastChild
firstChild & lastChild = childNode[0 or leng-1]
如果只有一个节点 firstChild = lastChild
如果没有节点 firstChild & lastChild = null
3.
4. 父节点 praentNode
5. 上个同胞节点 previousSibling
6. 下个同胞节点 nextSibling
previousSibling & nextSilbing 如果超出则返回 null
7. 指向文档节点 ownerDocument
childNode对象集合
动态的
注意：length的使用
可用 Array.prototype.slice.call() 将childNode转为数组，但在IE8已经更早版本不可用（JavaScript高级程序设计 250页提供了解决方案）
操纵 NodeList 中节点常用方法
1. 末尾添加：appendChild()
如果节点已存在，则移动到末尾位置
2. 指定添加：insertBefore(插入节点，参照节点)
作为同胞节点插入到参照节点之前，并返回插入的节点
如果参二传入null，则插入到 childNode 最后（与appendChild相同）
3. 替换节点：replaceChild(替换节点，被替换节点)
参一替换参二
4. 指定删除：removeChild()
删除并返回
5. 复制节点：cloneNode(boolean)
参数决定是否深复制
深复制：包括子节点树
返回副本节点，没有父节点需要插入节点树
IE：复制在IE会复制添加的事件处理程序
解决：复制前移除事件处理程序
6. 合并文本对象：normalize()
8. 查询childNode中是否有节点：hasChildNodes()
常用节点介绍
快速导航：元素 | 属性 | 文本 | 注释 | 文档 | 片段
1. 元素节点 Element
快速导航：Node属性值 | HTMLElement类型
Node属性值
1. nodeType = 1
2. nodeName = 标签名
tagName = 标签名
区别：tagName返回的标签名是全大写
建议：在使用时用 toLowerCase() 转为小写
Element属性
1. element.attributes属性
存储一个动态的NamedNodeMap对象集合
可使用 attributes[ "属性名" ] 直接访问
NamedNodeMap对象集合的方法
1. getNamedItem()
获取指定的属性
2. removeNamedItem()
删除指定的属性
与removeAttribute用法效果相同，区别removeNamedItem删除后返回节点
3. setNamedItem()
设置新属性节点
4. item()
返回参数数字处的节点
以上方法都不常用，建议使用getAttribute，setAttribute，removeAttribute
不过，attributes常用于遍历元素属性
注意：不同浏览器 attributes 顺序不同
注意：IE7以及更早版本可能返回HTML所有属性（包括未插入文档树的属性）
解决：使用每个属性都有的specified属性做排除检测，在IE中没有设置的属性都是false
例如：
for(){
xxxx
if(element.attributes[i].specified){
xxxx
}
}
HTMLElement类型
• element子类
• 代表HTML元素
• HTMLElement 常用属性(JavaScript高级程序设计 P263 264 提供了“HTML元素和HTMLElement关联表”)
1. id
2. title
3. lang
4. dir
5. className
上述属性可以直接获取值和设置值
常用方法
1. element.getAttribute()
• 如果属性不存在，则返回null
• 可以获取自定义属性
• 属性名不区分大小
• 建议：开发中常用 “ . ” 获取对象属性，getAttribute()常用于获取自定义属性
注意：" . 属性名 = xxx " 只能设置已经存在的属性
附：关于自定义属性
建议：根据H5规范，自定义属性加 date- 前缀
2. element.setAttribute()
• 如果属性不存在，则创建
• 如果属性存在，则覆盖
• 可用于设置自定义属性
建议：使用" . "设置值，而非setAttribute
3. element.removeAttribute()
2. 属性节点 Attribute
快速导航：Node属性值 | 常用属性
Node属性值
1. nodeType = 2
2. nodeName = 属性名
3. nodeValue = 属性值
常用属性
建议：不要直接访问元素的属性节点，使用getAttribute,setAttribute,removeAttribute方法更好
1. attr.name
2. attr.value
3. attr.specified
3. 文本节点 Text
快速导航：Node属性值 | 常用方法
对文本的操作时即时的
Node属性值
1. nodeTyoe = 3
2. nodeName = "#text"
3. nodeValue = 文本
注意：
如果标签内没有文本，则没有文本对象
如果有一个字符（就算是空格），也会创建一个文本对象
4. 文本字符数量
1. length
2. nodeValue.length
3. data.length
常用方法
1. 分割文本对象：text.spliText(“几个字符分割”)
分割并返回
2. 合并文本对象：normalize()
父节点上调用
4. 注释节点 Comment
快速导航：
Node属性值
1. nodeType = 8
2. nodeName = "#comment"
3. nodeValue = 注释内容
5. 文档节点 Document
快速导航：
每个文档节点只有一个文档元素<html>
Documemt是HTMLDocument的实例
Document是window对象的属性
Node属性值
1. nodeType = 9
2. nodeName = "#document"
HTMLDocument属性
HTMLDoucment 实例 document
1. document.doctype
指向<!DOCTYPE>
由于各浏览器不同支持，故使用有限
2. document.documentElement
指向<html>
也可用 document.childNode[0] or document.firstChild 获取<html>
3. document.title
指向<title>
4. document.body
指向<body>
5. document.childNodes
存储动态的NodeList对象
可用 getElementsByTagName取childNodes中元素节点
注意：不止获得直接子节点，间接子节点也会获取
7. document.URL
当前网页的URL
8. document.domain
域名，可设置，但被限制设置内容（详见JavaScript高级程序设计 P256）
9.documnet.referrer
来源网页的URL，如果无来源则为空字符
HTMLDocument方法
注意：在获取元素子节点时，因为不同浏览器识别子节点的能里不同，一定要做类型检测
1. document.getElementById()
注意：ID的大小写
只返回匹配到的第一个元素
IE8：如果ID值与其他标签的 name属性重复，会调取其他标签
解决：避免ID与name的重复
2. document.getElementsTagName()
返回动态的 HTMLCollection对象集合
可传入" * "获取所有元素
注意：注释也是节点（<html>外注释不算）
用在HTML时不区分大小写，XML区分
常用于获取单选按钮的节点
对于单选按钮，nameItem只获取第一项
3. document.createElement()
创建Element节点
IE：可传入HTML标签代码片段，这种方式可以规避一些IE7以及更早版本关于动态创建的问题
1. 动态创建的<iframe>的name属性不能设置
2. 动态创建的<input>不能被 reset() 重设
3. 动态创建的<button>如果type是reset，则不能重设表单
4. 动态创建的一批同name单选按钮，值不共享
由于createElement传入标签片段，需要浏览器检测，建议只在避开问题时使用
4. document.createTextNode()
创建Text节点
默认情况下，每个元素只有一个文本节点，但可以添加其他文本节点
5. 创建文档对象：document.createDocumentFragment()
6. 输入流写入网页
1. document.write()
2. document.writeln()
write & writeln唯一参数：写入的字符串
ln换行
write & writeln可直接传入完整的标签片段
例如：documnet.write("<a href='xxx'>" + "<\/a>")
注意：斜杠前需要加反斜杠转义
3. document.open()
4. document.close()
打开 or 关闭网页输出流
7. document.implementaiton.hasFeature()
• 检测浏览器实现了DOM的哪些功能（JavaScript高级程序设计 P259 列出了可以检测的不同值与版本号）
• 缺点：检测由用户指定，并没有要求对齐规范
• 建议：在使用DOM的一些特殊功能前，同时使用hasFeature和能力检测
HTMLCollection对象
1. 可用方括号HTMLCollection[ 索引 or 字符串 ]
如果时索引调用item，如果时字符串调nameItem
2. HTMLCollection.item(索引)
3. HTMLCollection.nameItem("属性名")
其他一些动态属性集合
1. document.anchors
存储文档中所有带name属性的<a>
2. document.applets
存储文档中所有<applet>（applet已经不再使用）
3. document.forms
存储文档中所有<form>
4. document.images
存储文档中所有<img>
5. document.links
存储文档中所有带href属性的<a>
6. 文档片段
存储“预备节点”
Node属性值
1. nodeType = 11
2. nodeName = "#document-fragment"
文档片段的使用
先创建文档片段，在将创建好的节点添加进文档片段，使用时直接将文档片段加入文档树
浙公网安备 33010602011771号