DOM
作者: dkvirus 发表于: 2017-06-30 23:36:00 最近更新: 2018-07-06 12:29:57

一、DOM 操作之 document 对象

DOM(Document Object Model)文档对象模型。document 对象是视图窗口,也是网页里我们看到的主要内容,如下图所示。

当浏览器接收到服务器响应的 html 字符串并渲染成网页时,这个 html文档 就是 document。一切与 document 对象有关的操作都叫做 DOM 操作。

document 对象是 window 对象的一个属性,so?DOM 是 BOM 的子集……

document对象范围

1. js 选择器

属性 说明
document.getElementsByClassName() 根据 class 找元素
document.getElementById() 根据 id 找元素
document.getElementsByName() 根据元素的 name 属性找元素
document.getElementsByTagName() 根据元素的标签名找元素
document.querySelector() 根据元素样式找元素,可以是 #id 或者 .class,返回第一个找到的元素
document.querySelectorAll() 根据元素样式找元素,返回一个数组
document.body 找文档中 body 元素
document.forms 找文档中的 form 元素
document.scripts 找文档中的 script 元素
document.images 找文档中所有 img 元素
document.anchors 找有 name 属性的 a 标签,通常做锚链接用
document.links 找有 href 属性的 a 标签,通常做跳转链接用

2. js 节点元素

1
2
3
4
5
6
7
8
9
<html>
<head>
<title>demo</title>
</head>
<body>
<!-- 这是一行注释 -->
<h3 class="title">测试文字</h3>
</body>
</html>

上面是一个 html 文档,转换为树形结构如下:

1
2
3
4
5
6
7
8
|-- html
|-- head
|-- title
|-- body
|-- annotation(注释节点)
|-- h3
|-- class="title"(属性节点)
|-- innerHTML="测试文字"(文本节点)

html 文档构成了节点树,其中 html 标签叫做 元素节点

annotation 是 html 文档中的注释,也是其中一个节点,叫做 注释节点

<h3 class="title">测试文字</h3> 中 class=”title” 是标签的属性,在树形结构中叫做 属性节点;写在标签中的文字叫做 文本节点

document 提供方法让我们可以随意控制元素节点、注释节点、属性节点和文本节点。

属性 说明
document.createElement() 创建元素节点
document.createAttribute() 创建一个属性节点
document.createComment() 创建注释节点
document.createTextNode() 创建文本节点

示例:

1
2
3
4
5
6
7
8
9
10
11
// 创建 button 元素
var btn = document.createElement('BUTTON');
// 创建文本节点并塞到 btn 元素中
var txt = document.createTextNode('点我');
btn.appendChild(txt);
// 创建属性节点并设值为 'button',最后塞给 btn
var attr = document.createAttribute('type');
attr.value = 'button';
btn.setAttributeNode(attr);
// 把 btn 元素塞给 document.body 元素
document.body.appendChild(btn);

3. 事件

document.addEventListener(event, function, useCapture)

其中:useCapture 为 true 事件句柄在捕获阶段执行,为 false 事件句柄在冒泡阶段执行。

1
2
3
4
5
6
7
8
9
// 添加事件监听
document.addEventListener("click", myFunction);

function myFunction () {
document.getElementById("demo").innerHTML = "Hello World";
}

// 移除事件监听,不加第二个参数就是移除所有 click 事件监听
document.removeEventListener("click", myFunction);

4. 文档地址

属性 文档
document.baseURI https://blog.dkvirus.top/book/CSS3/%E8%83%8C%E6%99%AF%E4%B9%8B%20background"
document.documentURI https://blog.dkvirus.top/book/CSS3/%E8%83%8C%E6%99%AF%E4%B9%8B%20background"
document.URL https://blog.dkvirus.top/book/CSS3/%E8%83%8C%E6%99%AF%E4%B9%8B%20background"
document.referrer https://blog.dkvirus.top/"
document.domain 返回文档域名 “blog.dkvirus.top”

5. 文档其它属性

属性 文档
document.cookie 获取文档的 cookie,当年探索 xss 时千方百计想要找的 cookie 原来在这里
document.inputEncoding 返回文档的编码方式 UTF-8/GBK
document.lastModified 返回文档最后修改时间 “06/30/2018 23:21:01”
document.readyState 返回文档加载状态 “interactive” 正在加载中,”complete” 加载完成
document.title 返回/设置文档 title 属性,让动态设置网页标题变得极其方便

二、DOM 操作之元素节点对象

html 中所有东东都是节点。html 标签是 元素节点、html 标签的属性是 属性节点、html 标签内的文字是 文本节点。document 对象继承节点对象的所有属性和方法,在 document 一文中已经介绍了大多数的属性和方法,本文补充介绍。

1. 元素节点选择器

属性 说明
element.childNodes 获取元素所有子节点
element.parentNode 获取元素的父节点
element.firstChild 获取元素的第一个子节点
element.lastChild 获取元素的最后一个子节点
element.nextSibling 获取元素的下一个兄弟节点
element.previousSibling 获取元素的上一个兄弟节点

2. 元素节点增删改查

属性 说明
element.appendChild() 添加子节点
element.removeChild() 删除子节点
element.replaceChild() 替换子节点
element.hasChildNodes() 返回元素节点是否具有子元素节点,有的话返回 true,否则返回 false
element.insertBefore(newNode, oldNode) 在一个元素节点前插入另一个元素节点

3. 属性节点属性

属性 说明
element.attributes 获取元素节点所有属性
element.className 获取元素的 class 属性
element.id 获取元素的 id 属性
element.style 获取元素的 style 属性
element.title 获取元素的 title 属性

4. 属性节点增删改查

属性 说明
element.setAttribute() 设置或者改变指定属性并指定值
element.getAttribute() 元素节点获取指定属性
element.removeAttribute() 删除指定属性
element.hasAttribute() 判断元素节点中是否有某属性 true/false
element.hasAttributes() 判断元素节点中是否含有属性,只要有属性就返回 true,否则返回 false

5. 尺寸相关

属性 说明
element.clientHeight 获取元素可视高度(不包括边框、内边距、滚动条)
element.clientWidth 获取元素可视宽度(不包括边框、内边距、滚动条)
element.scrollHeight 返回整个元素的高度(包括带滚动条的隐蔽的地方)
element.scrollWidth 返回元素的整个宽度(包括带滚动条的隐蔽的地方)
element.scrollLeft 返回当前视图中的实际元素的左边缘和左边缘之间的距离
element.scrollTop 返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离
element.offsetHeight 元素的高度包括边框和填充,但不是边距
element.offsetWidth 元素的宽度,包括边框和填充,但不是边距
element.offsetLeft 返回当前元素的相对水平偏移位置的偏移容器
element.offsetParent 返回元素的偏移容器

6. 文本节点

属性 说明
element.innerHTML 获取/设置元素的文本内容
首页
友链
归档
dkvirus
动态
RSS