JS DOM知识总结全！！

最新推荐文章于 2022-10-20 23:21:37 发布

不是小洋

最新推荐文章于 2022-10-20 23:21:37 发布

阅读量391

点赞数 3

分类专栏： JavaScript 文章标签： javascript dom dom操作

本文链接：https://blog.csdn.net/weixin_46534854/article/details/115518847

版权

JavaScript 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

本文详细介绍了DOM（文档对象模型）的概念，包括节点类型、节点属性、元素获取方法，如通过ID、标签名、类名等。还涵盖了元素的样式操作、属性操作、文本内容读写以及元素的尺寸和位置的获取。此外，讨论了文档结构、节点创建、添加、删除、替换和克隆，以及表单和表格元素的相关操作。最后提到了documentFragment对象在优化DOM操作中的作用。

摘要由CSDN通过智能技术生成

1 DOM 介绍

**MDN 文档对象模型手册：**https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model

1）DOM 英文全称“Document Object Model”，译为“文档对象模型”。

2）DOM 是一个与平台和编程语言无关的接口，通过这个接口程序和脚本可以动态的访问和修改文档的内容、结构和样式。

2 Node 节点

2.1 五大节点类型

document 文档节点 nodeType:9
element	元素节点 nodeType:1  nodeName 获取元素的标签名
attribute 属性节点 nodeType:2
text 文本节点 nodeType:3
comment 注释节点 nodeType:8

2.2 节点的属性

nodeName		获取节点的名字
nodeValue		获取节点的值
nodeType		获取节点的类型，用数字表示

3 获取元素

① 通过 ID 名

document.getElementById('ID名');

总结：

方法返回一个元素对象。
如果没有满足条件的元素返回 null。

② 通过标签名

// 从文档中获取
document.getElementsByTagName('标签名');

// 从元素的后代中获取
element.getElementsByTagName('标签名');

总结：

方法返回一个 HTMLCollection 类型的对象，这是一个伪数组对象，里面的成员是元素对象。
如果没有满足条件的元素，返回空的集合。

③ 通过类名（了解，IE8 + 支持）

// 从文档中获取
document.getElementByClassName('类名');

// 从元素的后代中获取
element.getElementsByClassName('类名');

总结：

方法返回一个 HTMLCollection 类型的对象，这是一个伪数组对象，里面的成员是元素对象。
如果没有满足条件的元素，返回空的集合。

④ 通过 name 属性值（了解）

// 从文档中获取
document.getElementsByName('name属性的值');

总结：

方法返回一个 NodeList 类型的对象，与 HTMLCollection 相似，也是伪数组，里面的元素是元素对象。
如果没有满足条件的元素，返回空集合。

⑤ 使用选择器获取元素 (推荐)

// 从文档中获取
document.querySelector('选择器')；
document.querySelectorAll('选择器');

// 从元素的后代中获取
element.querySelector('选择器');
element.querySelectorAll('选择器');

总结：

querySelector() 方法返回一个元素对象，如果满足条件的元素有多个只取第一个，如果没有满足条件的元素返回 null。
querySeleorAll() 方法返回 NodeList 集合，如果没有满足条件的元素返回空集合。

⑥ 获取所有的元素

document.all

总结： 获取文档中所有的元素，是个 HTMLCollection 类型的集合

**注意：**使用 document.all 可以判断IE还是非IE，这是一个语法糖。
if (document.all) {
 document.write('我是IE浏览器！');
} else {
 document.write('我不是IE');
}

4 文档结构（元素关系）

4.1 节点树

childNodes		获取所有子节点的集合，是个 NodeList 类型的对象
firstChild		获取第一个子节点
lastChild		获取最后一个子节点

previousSibling	获取紧邻在前面的兄弟节点
nextSibling		获取紧邻在后面的兄弟节点

parentNode		获取父节点

4.2 元素树

children				获取所有子元素的集合，是个 HTMLCollection 类型的数据
firstElementChild		获取第一个子元素
lastElementChild		获取最后一个子元素

previousElementSibling	获取紧邻在前面的兄弟元素
nextElementSibling		获取紧邻在后面的兄弟元素

parentElement			获取父元素

5 元素的属性操作

5.1 读写内置属性

元素.属性名;

5.2 读写自定义属性

元素.getAttribute('属性名')		 读取属性的值，如果不存在概述返回 nulll
元素.setAttribute('属性名', '值')  设置属性的值，如果属性不存在会添加该属性

注意：

getAttribute() 和 setAttribute() 可以操作写在标签上的所有属性，不论内置的还是自定义的。
如果要操作的属性是内置，使用 .属性名 的方式；如果要操作的属性是自定义的再使用 getAttribute() 和 setAttribute()。

5.3 `data-*` 形式的自定义属性

HTML5标准建议标签中的自定义属性都是 data-message 、data-group-name 这样的形式，此种形式的自定义属性，DOM 提供了快捷的操作方式：

元素.dataset.属性名;  // 可读可写

imgEle.dataset.message;  // 对应的是 data-messag 属性
imgEle.dataset.gorupName; // 对应的是 data-group-name 属性

6 元素的样式操作

6.1 读写行内样式

元素.style.属性名;

注意：

该方式只能读取设置在行内的样式，设置也是把样式设置到行内。
如果CSS属性名中有 - 会自动映射为小驼峰的形式，如果 backgorund-color 映射为 backgroundColor

6.2 读取计算样式

getComputedStyle(元素).属性名;

 /**
  * 封装读取计算样式的函数
 */
function getStyle(ele, attr) {
    // 判断
    if (window.getComputedStyle) {
        // IE9 + 以及其他非 IE
        return getComputedStyle(ele)[attr];
    } else if (ele.currentStyle) {
        // IE8 以及以下
        return ele.currentStyle[attr];
    }
}

**注意：**该方式只能读取。

6.3 通过设置元素的类名操作样式

① className

元素.className;  // 可读可写

注意： dom 对象中的 className 属性与标签中的 class 属性对应。

② classList

元素.classList;   // 得到描述元素类名的对象，是所有类名组成的集合，是个伪数组

// classList 对象具有以下三个方法：
元素.classList.add('类名');   // 给元素添加一个类名
元素.classList.remove('类名');  // 删除一个类名
元素.classList.toggle('类名');   // 类名切换（如果元素有该类名就删除，没有该类名就添加）

7 读写元素的文本内容（可读可写）

innerHTML		读写元素中所有的内容（包括内部的html标签）
outerHTML		读写元素自己在内的所有代码内容（包括自己的标签代码）
innerText		读写元素内的文内容（不包括html标签）（只保留换行）
textContent		读写元素内的文内容（不包括html标签），保留原格式（缩进和换行）

8 读取元素的尺寸（只读）

offsetWidth				盒子的宽度（内容宽+左右内边距+左右边框宽）
offsetHeight            盒子的高度（内容高+上下内边距+上下边框宽）
	
clientWidth				宽度（内容宽+左右内边距）
clientHeight			高度（内容高+上下内边距）

scrollWidth				如果内容没有溢出与clientWidth一致，如果内容溢会加上溢出的内容的宽度
scrollHeight 			如果内容没有溢出与clientHeight一致，如果内容溢会加上溢出的内容的高度

getBoundingClientRect() 返回一个对象，对象中有 width 和 height 属性，获取盒子的尺寸，与 								offsetWidth/offsetHeight 是一致的

如何获取视口的尺寸？

// 第一种方式  会包括滚动条本身的宽度
window.innerWidth;
window.innerHeight;

// 第二种方式 不会包括滚动条本身的宽度，推荐
document.documentElement.clientWidth
document.documentElement.clientHeight

9 读取元素的位置（只读）

offsetLeft		元素在第一个定位的祖先元素上的位置，没有定位的祖先元素，参照整个页面
offsetTop       元素在第一个定位的祖先元素上的位置，没有定位的祖先元素，参照整个页面

clientLeft		元素左边框的宽度
clientTop		元素上边框的宽度

getBoundingClientRect() 返回一个对象，对象中有如下属性读取元素的位置
	left		元素在视口上的位置，水平坐标
	top			元素在视口上的位置，垂直坐标
	x			同 left
	y			同 top
	right		元素右下角的水平坐标
	bottom		元素右下角的垂直坐标

10 读写元素中内容的位置（可读可写）

scrollLeft		值变大，内容向左滚动（滚动滑块向右）
scrollTop		值变大，内容向上滚动（滚动滑块向下）

11 节点（元素）的创建添加删除替换克隆

11.1 创建元素节点

document.createElement('标签名');  // 返回创建好的元素

**注意：**新创建的元素并不在文档结构中！

11.2 添加子节点

① 在最后面添加子节点

父元素.appendChild(新节点);

② 指定位置添加子节点

父元素.insertBefore(新节点, 旧节点);

注意： 新的节点会在旧节点的前面！

11.3 删除子节点

父元素.removeChild(要删除的节点);

11.4 替换子节点

父元素.replaceChild(新节点, 旧节点);

11.5 节点克隆

元素.cloneNode(true)

注意： 方法的参数默认是false，只克隆自己，后代和内容不克隆；设置参数为 true，自己和后代内容都克隆。

12 documnt 对象

属性：
lastModified		获取文档最后一次修改时间，只读
cookie				读写cookie信息，可读可写
all					获取文档中所有的元素，HTMLCollection，只读
documentElement		获取html元素，只读
body				获取body元素，只读
head				获取head元素，只读
title				读写页面标题，可读可写

方法：
write()				把内容写入文档

13 documentFragment 对象

13.1 创建 documentFragment 对象

document.createDocumentFragment();

14.2 documentFragment 对象的特点

1）documentFragment 也是一类节点， nodeType 是 11，并不是元素对象，它通常作为其他节点的一个临时的容器。

2）documentFragment 不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题。

14.3 documentFragment 对象的应用

1）如果连续给一个元素添加多个子元素，可以先把子元素添加到 documentFragment 对象中，最后把 documentFragment 对象添加到父元素中，减少浏览器渲染次数。

2）利用 documentFragment 实现对一组元素进行倒序排列。

15 HTML DOM

15.1 表单相关元素

① form 元素

submit()		调用该方法，让表单提交
reset()			调用该方法，让表单重置

② 文本输入框和文本域（input 和 textarea）

blur()		失去焦点
focus()		获取焦点
select()	选中里面的文本

③ select 元素

属性：
length		下拉选项的数量（可读可写）
options		获取所有下拉选项的集合
selectedIndex	获取所选的下拉选项的索引
value			获取所选的下拉选项的value值

方法：
add()		添加一个下拉选项，参数是option元素
remove()	删除一个下拉选项，参数是要删除的下拉选项的索引
blur()		失去焦点
focus()		获取焦点

注意：

new Option() 可以创建一个 option 元素， Option() 构造函数的第一个参数指定下拉选项的文本内容，第二个参数指定下拉选项的value值。

15.2 表格相关元素

① table 元素

属性：
rows		获取表格中所有行元素的集合
cells		获取表格中所有单元格元素的集合

方法：
insertRow()	插入一行
deleteRow()	删除一行

② tableRow 元素（tr 元素）

属性：
cells		获取本行内所有的单元格元素的集合
rowIndex	本行的索引

方法：
insertCell()	插入一个单元格
deleteCell()	删除一个单元格

③ tableCell 元素（td 或 th）

属性：
cellIndex	获取本单元格在行内的索引

15.3 快速创建 img 元素

new Image();  // 相当于 document.createElement('img')