第三章 DOM 操作
1 获取元素
1.1 根据id名获取
document.getElementById(idName)
1.2 根据标签名获取
document.getElementsByTagName(tagName) // 返回一个集合 (类数组对象) 从整个文档获取
element.getElementsByTagName(tagName) // 从element的后代元素中获取
1.3 根据类名获取
document.getElementsByClassName(className) // 返回一个集合(类数组对象) 从整个文档获取
element.getElementsByClassName(className) // 从element的后代中获取
需要 IE9 以上浏览器支持!
1.4 根据 name 属性值获取
document.getElementsByName() //返回集合 只有document才有该方法
1.5 根据选择器获取
document.querySelector(选择器) //选择器第一个满足选择器条件的
document.querySelectorAll(选择器) //选择所有满足选择器条件的,返回nodeList(类数组对象)
element.querySelector(选择器)
element.querySelectorAll(选择器)
需要 IE8 以上浏览器支持!
比较推荐这种用法。
1.6 获取所有的元素
document.all //所有的元素组成的集合(类数组对象)
//document.all的妙用
if (document.all) {
//说明是IE浏览器 IE10以及以下版本
} else {
// 说明非IE浏览器 IE11以及EDGE
}
2 文档结构
2.1 作为节点树
parentNode 父节点
childNode 所有子节点的集合
firstChild 第一个子节点
lastChild 最后一个子节点
previousSibling 上一个兄弟节点
nextSibling 下一个兄弟节点
2.2 作为元素树
parentElement 父元素
children 所有子元素的集合
firstElementChild 第一个子元素 IE9+
lastElementChild 最后一个子元素 IE9+
previousElementSibling 上一个兄弟元素
nextElementSibling 下一个兄弟元素
childElementCount 子元素的数量
ownerDocument 元素所属的文档对象(document)
3 属性操作
3.1 内置属性
element.属性名;
3.2 自定义属性
element.getAttribute(attrName) 获取属性的值(只有写到html上的属性,都可获取;一般用于自定义属性)
element.setAttribute(attrName, value) 设置属性的值(一般用于自定义属性)
3.3 data-
开头的自定义属性
element.dataset.名字
4 CSS操作
4.1 style属性
element,style.属性名 读写css属性
只能读写标签内写在style里面的css属性,设置的css属性添加到标签内的style里
4.2 读取计算样式(只读)
getComputed(元素).属性; //非IE(IE11和Edge)
元素.currentStyle.属性 //IE 获取不到复合属性(background、border)
4.3 元素的 class 属性
① className
element.className 可读可写
返回字符串
元素的class属性的值
② classList (IE9+)
对象,类数组对象。元素所有class值的列表。
方法:
add() 添加一个class值
remove() 删除一个class值
toggle() 切换一个class值(没有就添加,有就删除)
5 元素的文本内容
用于双标签元素
可读可写
把内容当做HTML:
innerHTML
outerHTML
把内容当做文本
innerText
textContent
6 元素尺寸位置
6.1 元素的尺寸(只读)
offsetWidth / offsetHeight 元素尺寸(内容宽高+内边距宽高+边框)
clientWidth / clientHeihgt 元素尺寸(内容宽高+内边距宽高)
scrollWidth / scrollHeight 元素尺寸(如果子元素没有溢出,同client系列;如果子元素溢出:子元素宽度+一个方向的内边距)
getBoundingClientRect() 返回对象(对象中包含width和height属性) IE8中没有width和heihgt属性
6.2 元素的位置(只读)
offsetLeft / offsetTop 元素位置,在第一个定位的祖先元素上的位置,如果都没定位在根元素上的位置
clientLeft / clientTop 元素边框的宽度
getBoundingClientRect() 返回对象 元素在视口上的位置
left 元素的坐左边距离视口左边的距离
top
right 元素的最右边距离视口左边的距离
bottom
x 同left
y 同top
6.3 内容位置 (可读可写)
scrollLeft 元素内容的滚动位置; 值增大,内容向左滚;
scrollTop
生效前提: 子元素溢出父元素,设置父元素overflow:hidden/auto/scroll
7 节点的添加/删除/替换/克隆
7.1 创建元素节点
document.createElement(tagName)
7.2 添加子节点
parentElement.appendChild(node) 追加子节点
parentElement.insertBefore(newNode, oldNode) 指定位置插入节点
7.3 删除子节点
parentElement.removeChild(node)
7.4 替换子节点
parentElement.replaceChild(newNode, oldNode) 会把旧的节点删掉换成新的节点
7.5 克隆节点
element.cloneNode(true) 克隆节点
参数 true 深度克隆,元素自己和后代元素都会克隆
false (默认) 只克隆元素自己,不克隆后代元素
8 Document
8.1 属性
referrer 历史记录中上一个地址(只读)
URL 页面地址(只读)
domain 域名(只读)
lastModified 文件的最后一次修改时间(只读)
title 网页标题(可读可写)
cookie 会话内容(可读可写)
documentElement 获取html元素
body 获取body元素
head 获取的head元素
all 获取所有的元素
8.2 方法
write()
9 documentFragment
9.1 关于documentFragment 对象
1)documentFragment 也是一类节点, nodeType 是 11,并不是元素对象,它通常作为其他节点的一个临时的容器。
2)可以给 documentFragment 对象添加子节点,documentFragment 节点也可以作为其他节点(元素)的子节点。
3)documentFragment 不是真实 DOM 树的一部分,它的变化不会触发 DOM 树的重新渲染,且不会导致性能等问题。
9.2 创建 documentFragment 对象
document.createDocumentFragment();
9.3 documentFragment 对象的应用场景
1)如果连续给一个元素添加多个子元素,可以先把子元素添加到 documentFragment 对象中,最后把 documentFragment 对象添加到父元素中,减少浏览器渲染次数。
2)利用 documentFragment 实现对一组元素进行倒序排列。