DOM(文档对象模型) 是针对 html 和 XML 文档的一个 API(应用程序编程接口).DOM 描绘了一个层次化的节点树, 允许开发人员添加, 移除和修改页面的某一部分.
一, document
JavaScript 通过 Document 类型表示文档. document 对象是 Document 的一个实例, 表示整个 HTML 页面, 也是 window 对象的一个属性, 可当成全局对象来访问.
1.document 的属性:
a.document.title: 保存页面标题 - 包含在 title 元素中的文本, 也可以修改这个属性, 结果反映在浏览器的标题栏中, 但不会改变 title 元素.
b. document.URL: 保存页面完整的 URL
c. docuemnt.domain: 保存页面的域名, 可以修改该属性, 只能修改为 URL 中包含的域. 在页面包含框架时, 不同子域的页面通讯, 可以通过修改该属性设为相同的值即可.
d. document.referrer: 保存着链接到当前页面的那个页面的 URL, 没有源页面, 则为空字符串
e. document.activeElement: 始终引用 DOM 中当前获得焦点的元素.(元素获得焦点的方式有: 页面加载, 用户输入, 调用 foucs() 方法)
f. document.readyState: 判断文档是否加载完成, 有两个值: loading 表示正在加载; complete 表示已经加载完成
g. document.compatMode : 检测页面的兼容模式, 有两个值: CSSlCompat 表示标准模式, BackCompat 表示混杂模式
2. document 的方法
a. document.hasFoucs() : 判断文档是否获得焦点, 是返回 true, 否则返回 false.(主要用于提高 web 的无障碍性)
二, 节点
1. 节点类型
每个节点都有三个属性: nodeType,nodeName,nodeValue.
a.nodeType 属性, 表示节点的类型
节点 | nodeType 值 |
---|---|
元素节点 | 1 |
属性节点 | 2 |
文本节点 | 3 |
document | 9 |
b. 节点名称 nodeName
判断节点是哪种元素, 可以根据节点的 nodeName 属性
节点 | nodeName 值 |
---|---|
元素节点 | 大写的元素标签名 |
document | #document |
文本节点 | #text |
属性节点 | 属性名 |
c. 节点的值 nodeValue
节点 | nodeValue 值 |
---|---|
元素节点 | null 或 undefined |
文本节点 | 文本内容 |
属性节点 | 属性值 |
document | null |
- <div id='div'> 内容内容 </div>
- <script>
- document.getElementById('div').nodeType;//1
- document.getElementById('div').nodeName;//"DIV"
- document.getElementById('div').nodeValue;//null
- </script>
2. 节点关系
父子关系
a. node.childNodes: 该属性保存一个 NodeList 对象, 是一个类数组对象, 获得 node 下的所有直接子节点. childNodes 返回的是动态集合, 不保存所有的节点, 只保存节点的引用, 每次访问该集合都要重新查找 DOM 树.
b. node.parentNode: 该属性获得 node 的直接上级父节点.
c. node.firstChild: 获取 node 的第一个子节点
d. node.lastChild: 获取 node 的最后一个子节点
兄弟关系
a. node.previousSibling: node 的上一个兄弟元素
b. node.nextSibling: node 的下一个兄弟元素
注: 除 praentNode 外, 其他关系属性都会受到看不见的空字符干扰, 包括: 回车, 制表符, 空格
三, 操作节点
1. 查找节点
a. docuemnt.getElementById(id): 通过 id 查找元素, 无返回 null
b. document.getElementsByTagName(标签名): 返回包含一个包含指定标签名的 NodeList
c. document.getElementsByName(name 名): 返回所有包含 给定 name 名的元素集合
d. document/node.getElementsByClassName(classname): 返回所有包含 给定 classname 名的元素集合
e. document.querySelector(css 选择符): 返回匹配选择符的第一个元素
f. document.querySlectorAll(css 选择符): 返回匹配选择符的所有元素集合
g. dcoument.forms: 返回所有 form 元素
h. document.links: 返回文档所有带 href 属性的 a 元素
i. document.anchors: 返回文档所有带 name 属性的 a 元素
j. document.images: 返回所有 img 元素
2. 创建节点
a. node.cloneNode(boolean): 该方法会创建 node 的一个完全相同的副本. boolean 为 true, 会深复制, 即会复制 node 节点及其所有子节点; boolean 为 false , 会执行浅复制, 即只复制 node 节点本身.
b. documen.createElement(标签名): 创建一个新元素
c. document.createTextNode(要插入到节点的文本): 创建一个新的文本节点
d. document.createDocumentFragment(): 创建一个文档片段对象. 当要创建多个平行子节点时, 可以先创建文档片段对象, 再将新子节点临时追加到里面, 最后将文档片段追加到父元素中. 避免多次修改 DOM.
3. 增加节点
a. node.appendChild(newNode): 向 node 的子元素末尾添加一个 newNode 节点. newNode 如果是一个页面已有的元素, 那该节点会从原来的位置移到新位置.
b. node.insertBefore(newNode,someChild): 将 newNode 插入到 node 的子元素 someChild 前面. 若 someChild 为 null , 则会插入到末尾.
4. 删除节点
a. node.replaceChild(newNode,someChild): 将 node 的子节点 someChild 替换为 newNode
b. node.removeChild(someChild): 从 node 的子元素中移除 someChild 节点
注: replaceChild 和 removeChild 方法都返回移除的节点 someChild,someChild 节点还在文档中, 但是页面上没有自己的位置.
5. 读写节点内容
a.node.innerHTML: 读写元素的所有子节点的 HTML 内容
b.node.outerHTML: 读写元素及其所有子节点的 HTML 内容
6. 节点属性
a. node.getAttribute(属性名): 获取元素属性值, 不存在该属性, 返回 null
b. node.setAttribute(属性名, 属性值): 设置元素属性
c. node.removeAttribute(属性名): 删除元素的属性
7.classList 属性
元素的 classList 属性是 DOMTokenList 类型的实例, 是一个类数组对象. 里面保存了元素的 class 类名. 有 length 属性表示类名的个数, value 属性表示 class 值的字符串. 这个类型的方法有:
a.div.classList.remove(类名): 删除给定的类名
b.div.classList.add(类名): 添加给定的类名
c.div.classList.contains(类名): 判断给定的类名是否存在, 存在返回 true, 否则返回 false
d.div.classList.toggle(类名): 如果存在给定的类名, 则删除它, 如果不存在则添加它
8. 节点样式
node.style: 节点的 style 属性, 保存着通过 HTML 的 style 特性指定的所有样式信息, 不包含通过外部样式表或嵌入样式表层叠而来的样式. 在 style 特性中指定的 css 样式属性都将表现为这个 style 对象的属性.
9. 元素大小
(1) 偏移量
a. node.offsetHeight: 元素在垂直方向上占用的空间大小, 以像素计. 包括元素的高度,(可见的) 水平滚动条的宽度, 上边框高度和下边框高度.
b. node.offsetWidth: 元素在水平方向上占用的空间大小, 以像素计. 包括元素的宽度,(可见的) 垂直滚动条的宽度, 左边框宽度和右边框宽度.
c. node.offsetLeft: 元素的左外边框至包含元素的左内边框之间的像素距离.
d. node.offsetTop: 元素的上外边框至包含元素的上内边框之间的像素距离.
(2) 内容大小
a. node.clientWidth: 元素内容区高度加上上下内边距高度
b. node.clientHeight: 元素内容区宽度加上左右内边距宽度
(3) 滚动大小
a. node.scrollHeight: 滚动元素内的滚动内容的总高度
b. node.scrollWidth: 滚动元素内的滚动内容的总宽度
c. node.scrollLeft: 被隐藏在内容区域左侧的像素数, 设置这个属性可以改变元素的横向滚动位置
d. node.scrollTop: 被隐藏在内容区域上方的像素数, 设置这个属性可以改变元素的纵向滚动位置
四, 其他方法
1.scrollIntoView() 方法:
scrollIntoView() 方法可以在所有 HTML 元素上调用, 通过滚动浏览器窗口或者某个容器元素, 调用元素就可以出现在视口中. 如果给该方法传入 true 作为参数, 或者不传参数, 那么窗口滚动之后会让调用云阿苏的顶部与视口顶部尽可能平齐. 如果传入 false 作为参数, 调用元素会尽可能全部出现在视口中.
2. contains() 方法
contains() 方法用于检测某个节点是不是调用该方法节点的子节点. 例如:
document.body.contains(document.getElementById('div'));//true
3.contentDocument 属性
contentDocument 属性是 Document 类型的实例, 它包含一个指针, 指向表示框架内容的文档对象, 通过这个属性可以直接通过元素获取文档对象, 例如:
- var iframe = document.getElementById('myIframe');
- var ifrDoc = iframe.contentDocument;
- var div = ifrDoc.getElementById('div');// 获取子页面的元素
来源: http://www.qdfuns.com/article/46690/065211d6eb76fede34c6caff8df6d977.html