床前明月管
疑是地上霜
我是郭德纲
DOM、BOM 操作超级集合
本章内容：
- 定义
- 节点类型
- 节点关系
- 选择器
- 样式操作方法style
- 表格操作方法
- 表单操作方法
- 元素节点ELEMENT
- 属性节点attributes
- 文本节点TEXT
- 文档节点 Document
- 位置操作方法
- 定时器
- 弹出框
- location
- 其它
- 事件操作
- 实例
定义
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。
节点类型
12中节点类型都有NodeType属性来表明节点类型
| 节点类型 | 描述 | |
|---|---|---|
| 1 | Element | 代表元素 |
| 2 | Attr | 代表属性 |
| 3 | Text | 代表元素或属性中的文本内容。 |
| 4 | CDATASection | 代表文档中的 CDATA 部分（不会由解析器解析的文本）。 |
| 5 | EntityReference | 代表实体引用。 |
| 6 | Entity | 代表实体。 |
| 7 | ProcessingInstruction | 代表处理指令。 |
| 8 | Comment | 代表注释。 |
| 9 | Document | 代表整个文档（DOM 树的根节点）。 |
| 10 | DocumentType | 向为文档定义的实体提供接口 |
| 11 | DocumentFragment | 代表轻量级的 Document 对象，能够容纳文档的某个部分 |
| 12 | Notation | 代表 DTD 中声明的符号。 |
节点关系
| nodeType | 返回节点类型的数字值（1~12） |
| nodeName | 元素节点:标签名称(大写)、属性节点:属性名称、文本节点:#text、文档节点:#document |
| nodeValue | 文本节点:包含文本、属性节点:包含属性、元素节点和文档节点:null |
| parentNode | 父节点 |
| parentElement | 父节点标签元素 |
| childNodes | 所有子节点 |
| children | 第一层子节点 |
| firstChild | 第一个子节点，Node 对象形式 |
| firstElementChild | 第一个子标签元素 |
| lastChild | 最后一个子节点 |
| lastElementChild | 最后一个子标签元素 |
| previousSibling | 上一个兄弟节点 |
| previousElementSibling | 上一个兄弟标签元素 |
| nextSibling | 下一个兄弟节点 |
| nextElementSibling | 下一个兄弟标签元素 |
| childElementCount | 第一层子元素的个数(不包括文本节点和注释) |
| ownerDocument | 指向整个文档的文档节点 |
Title
节点关系方法：
hasChildNodes() 包含一个或多个节点时返回true
contains() 如果是后代节点返回true
isSameNode()、isEqualNode() 传入节点与引用节点的引用为同一个对象返回true
compareDocumentPostion() 确定节点之间的各种关系
数值 关系 1 给定节点不在当前文档中 2 给定节点位于参考节点之前 4 给定节点位于参考节点之后 8 给定节点包含参考节点 16 给定节点被参考节点包含compareDocumentPostion() 节点对应关系
Title
选择器
|
getElementById() |
一个参数:元素标签的ID |
| getElementsByTagName() | 一个参数:元素标签名 |
| getElementsByName() | 一个参数:name属性名 |
| getElementsByClassName() | 一个参数:包含一个或多个类名的字符串 |
|
classList |
返回所有类名的数组
|
| querySelector() | 接收CSS选择符，返回匹配到的第一个元素，没有则null |
| querySelectorAll() | 接收CSS选择符，返回一个数组，没有则返回[] |
样式操作方法style
| style.cssText | 可对style中的代码进行读写 |
| style.item() | 返回给定位置的CSS属性的名称 |
| style.length | style代码块中参数个数 |
| style.getPropertyValue() | 返回给定属性的字符串值 |
| style.getPropertyPriority() | 检测给定属性是否设置了!important，设置了返回"important";否则返回空字符串 |
| style.removeProperty() | 删除指定属性 |
| style.setProperty() | 设置属性，可三个参数:设置属性名，设置属性值，是否设置为"important"(可不写或写"") |
Title
8
表格操作方法
|
createTHead() |
创建元素，返回引用
deleteTHead() 删除元素
createTBody() 创建 | ||||
|
insertRow(0) |
插入 | ||||
|
deleteRow(pos) |
删除指定位置的行 | ||||
|
insertCell(0) |
插入 | 元素，从0开始 | |||
|
deleteCell(pos) |
删除指定位置的单元格 |
Title
表单操作方法
|
document.forms |
获取所有表单 |
|
提交表单 |
元素节点ELEMENT
nodeType:1
| nodeName | 访问元素的标签名 |
| tagName | 访问元素的标签名 |
| createElement() | 创建节点 |
| appendChild() | 末尾添加节点，并返回新增节点 |
| insertBefore() | 参照节点之前插入节点，两个参数：要插入的节点和参照节点 |
| insertAfter() | 参照节点之后插入节点，两个参数：要插入的节点和参照节点 |
| replaceChild() | 替换节点，两个参数：要插入的节点和要替换的节点(被移除) |
| removeChild() | 移除节点 |
| cloneNode() | 克隆，一个布尔值参数，true为深拷贝，false为浅拷贝 |
| importNode() | 从文档中复制一个节点，两个参数：要复制的节点和布尔值(是否复制子节点) |
| insertAdjacentHTML() |
插入文本，两个参数：插入的位置和要插入文本
|
Title
title
属性节点attributes
nodeType:2
|
attributes |
获取所有标签属性 |
| getAttribute() | 获取指定标签属性 |
| setAttribute() | 设置指定标签属 |
| removeAttribute() | 移除指定标签属 |
|
var s = document.createAttribute("age") s.nodeValue = "18" |
创建age属性 设置属性值为18 |
Title
Title
文本节点TEXT
nodeType:3
| innerText | 所有的纯文本内容，包括子标签中的文本 |
| outerText | 与innerText类似 |
| innerHTML | 所有子节点(包括元素、注释和文本节点) |
| outerHTML | 返回自身节点与所有子节点 |
| textContent | 与innerText类似，返回的内容带样式 |
| data | 文本内容 |
| length | 文本长度 |
| createTextNode() | 创建文本 |
| normalize() | 删除文本与文本之间的空白 |
| splitText() | 分割 |
| appendData() | 追加 |
| deleteData(offset,count) | 从offset指定的位置开始删除count个字符 |
| insertData(offset,text) | 在offset指定的位置插入text |
| replaceData(offset,count,text) | 替换，从offset开始到offscount处的文本被text替换 |
| substringData(offset,count) | 提取从ffset开始到offscount处的文本 |
Title
Nick
Title
1
2
3
文档节点 Document
nodeType:9
| document.documentElement | 代表页面中的元素 | ||||||||||||||||||||||||||||||||||||
| document.body | 代表页面中的元素 | ||||||||||||||||||||||||||||||||||||
| document.doctype | 代表标签 | ||||||||||||||||||||||||||||||||||||
| document.head | 代表页面中的元素 | ||||||||||||||||||||||||||||||||||||
| document.title | 代表定时器
定时器示例
弹出框
var result = prompt("What is your name?" ,"Nick"); if(result != null){ alert("welcome,"+result); } console.log(result)prompt location
其它
//后退一页 history.go(-1) //前进一页 history.go(1); //前进两页 history.go(2); //无参数时，刷新当前页面 history.go() //后退一页 history.back() //前进一页 history.forward()history 方法 事件操作实例：
搜索框
跑马灯
全选、反选
模态对话框
书签章节
菜单
返回顶部
相关 |