DOM操作汇总

妍思码匠

已于 2023-08-07 17:11:39 修改

阅读量855

点赞数

分类专栏：笔记-JavaScript 文章标签： javascript

于 2023-05-23 10:49:06 首次发布

本文链接：https://blog.csdn.net/wjs0406/article/details/130804133

版权

笔记-JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

一，概念

Document Object Model文档对象模型，是w3c指定的标准（所有浏览器的厂商都要按照这个规范实现），专门用来操作网页内容的API。

二，DOM树

网页中的所有内容，在内存中都是以树的形式存储
在Dom树上，所有内容（元素、属性、文本）都是一个节点对象Node
document是dom树上的唯一一个根节点

节点对象Node的三大属性：NodeType、NodeName、NodeValue
NodeType：节点类型。有document、element、attribute、text 4种
NodeName：节点名（元素的标签名）。
NodeValue：节点值。包括document-null、element-null、attribute-属性值、text-文本内容

三，document元素对象

3.1 document元素常用属性

document.activeElement - 返回当前获取焦点的元素
document.cookie - 当前文档的cookie缓存

document.domain - 返回当前文档的域名

document.title - 当前文档的标题

document.doctype - 返回与文档相关的文档类型声明（DTD）

document.URL - 返回文档完整的URL

3.2 document元素常用方法

document.getElementById()、getElementByName等获取dom元素的方法
document.addEventListener(事件名, function) - 向文档添加事件
document.removeEventListener(事件名, function) - 移除文档的事件

其他详细属性和方法查看API

四，DOM元素对象

4.1 查找dom元素

说明：两大系列节点树Node和元素树Element系列。每个系列都有自己的方法（例如获取父节点，parentNode、parentElement）。两者的作用一致，只是node节点树系列兼容大部分浏览器，而且他是包含所有内容的树结构；而element元素树系列可能只兼容IE浏览器，他只包含元素内容的树结构。因此常用的方法，仅记node类即可。

4.1.1 不需要查找，可直接获取的

document - 根节点
document.documentElement - 获取html
document.head - 获取head
document.body - 获取body

4.1.2 按一个已知节点的关系查找

父子：

elem.parentNode - 父节点
elem.childNodes - 返回直接子节点的类数组集合
elem.firstChild - 第一个子节点
elem.lastChild - 最后一个子节点

兄弟：

elem.previousSibling - 前一个兄弟节点
elem.nextSibling - 后一个兄弟节点

4.1.3 按HTML查找

按id：

document.getElementById(id) - id全局唯一，上下文只能是document

按name：

document.getElementsByName(name) - 上下文只能是document，通常查找表单中所有name属性的集合

按标签名：

parent.getElementsByTagName('标签名') - 可在任意父元素上调用，查找子元素和后代元素的集合

按class类名：

parent.getElementsByClassName('class') - 可在任意父元素上调用，查找子元素和后代元素的集合，只要包含class就返回

4.1.4 按选择器查找

说明：再不考虑浏览器兼容的情况下，使用选择器查找方式适用于大部分的情况。

只找一个元素：

parent.querySelector(selector) - 返回目标元素

找多个元素：

parent.querySelectorAll(selector) - 返回目标元素的集合

示例：

document.querySelector('img');     // 查找所有img标签的节点
document.querySelector('#foo');    // 查找id为foo的节点
document.querySelector('.active'); // 查找类名包含active的节点
document.querySelector('img[id="bg1"][class="bg"]'); // 查找满足指定条件的img标签

4.2 创建/修改DOM元素

创建一个DOM元素：val dom = document.createElement([标签名])
设置/修改元素的内容：

（1）innerHTML - 能识别html标签

（2）innerText - 不能识别html标签

（3）id、value、title、等其他常用属性

（4）自定义属性：dom.属性名 = 属性值；或 dom.setAttribute(属性名, 属性值)

eg: dom.href= "http://xx"; dom.innerHTML = "说明文档";

设置/修改元素的样式：

（1）dom.style = '内嵌样式' // 直接操作css所有的内嵌样式

（2）dom.style.css样式名 = 'css样式值' // 可以指定某样式的值，css样式名使用驼峰

（2）dom.className = 'class1 class2' // 设置多个class类名，中间使用空格

将元素插入到指定位置：parent.appendChild(dom) - 插入末尾

parent.insertBefore(dom, child) - 在指定子元素前面插入

parent.replaceChild(dom, child) - 替换指定子元素

4.3 删除DOM元素

parent.removeChild(dom)

4.4 DOM元素其他常用的属性

element.attributes -- 返回元素的属性数组
element.tagName -- 返回元素的标签名
element.offsetHeight - 元素内容的css标准高度（content+padding+srollbar+border）
element.clientHeight - 元素内容的可视高度（content+padding）
element.scrollHeight - 元素内容的实际高度（content+padding+srollbar）
element.offsetTop - 当前元素整个容器到父元素顶部的距离
element.clientTop - 当前元素距离border的可视高度（ ===上边框的宽度border.top）
element.scrollTop - 当前元素视图中的滚动条滚动的距离

4.5 DOM元素其他常用的方法

element.getAttribute(attrName) - 获取元素的属性值
element.removeAttribute(attrName) - 删除元素的属性
element.hasAttribute(attrName) - 判断元素是否有某属性
element.focus() - 当前元素设置焦点
element.cloneNode(isDeep) - 克隆某个元素 // 默认参数不传：只复制当前节点；如果传入true：复制当前节点以及他的所有子孙节点

其他详细属性和方法查看API

五，属性对象

属性对象也有自己的常用属性和方法，例如：

attr.isId - 判断当前属性是否是id类型
attr.name - 属性名称
attr.value - 属性值
attr.specified - 判断当前属性节点是否有值

六，常用的DOM对象

6.1 Image对象

指代页面中一个 img 元素。可以用new Image()来创建。

6.2 Select对象

指代页面中一个 <select> 元素。

属性：

sel.selectedIndex - 获得当前选中项的下标位置
sel.value - 当前选中项的值
sel.options - 当前所有option元素的集合
sel.length - 选项的个数

（可以使用sel.options.length = 0;或sel.length = 0来清空选项）

方法：

sel.add(option) - 向末尾添加一个option选项
sel.remove(index) - 移除某位置的选项

事件：

sel.onchange() - 选中项发生变化时触发

6.3 option对象

指代页面中一个 option 元素。通过new Option(text, value)来创建。

属性opt对象.text可以替代innerHTML获取文本内容。

6.4 table对象

指代页面中一个 table 元素。

常用方法：

行分组：

table.createTHead() - 创建表格head行，返回行对象
table.createTBody() - 创建表格内容行，返回行对象
table.createTFoot() - 创建表格foot行，返回行对象
table.deleteTHead() - 删除head行
table.deleteTFoot() - 删除foot行
table.tHead - 获取head行对象
table.tBodies[i] - 获取内容第i行对象
table.tFoot - 获取foot行对象

行tr：包括（tHead / tBody / tFoot分组）

tXXXX.insertRow(0) - 在第一行插入一行
tXXXX.insertRow(i) - 在第i行后面插入一行
tXXXX.insertRow() - 在最后一行插入一行
tXXXX.deleteRow(i) - 删除第i行
tXXXX.rows() - 获取
tr.insertCell(i) - 在tr中创建td
tr.deleteCell(i) - 删除tr中的td
tr.cells - 获取