首页 > 网络编程 > JavaScript > javascript技巧 > DOM 概念和常用操作

一文详解DOM的概念和常用操作

2023-04-24 08:35:35 作者：前端小蜜蜂来也

本文详细介绍了DOM的概念和常用操作，文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容，感兴趣的朋友可以参考阅读本文

DOM 的概念和常用操作

什么是 DOM?

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将 web 页面和脚本或程序语言连接起来。

官方定义晦涩难懂，我们可以简单理解为： DOM 采用的是“树形结构”，用“树节点”的形式来表示页面中的每一个元素。我们先看下面的一个例子。

<!DOCTYPE HTML>
<html>
<head>
  <title>文档标题</title>
</head>
<body>
  <a href="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3923a92ec9c74b7a9e6f7ec2f7b99c49~tplv-k3u1fbpfcp-zoom-1.image" rel="external nofollow" >我的链接</a>
  <h1>我的标题</h1>
</body>
</html>

对于上面这个 HTML 文档，DOM 将其解析为修图所示的树形结构。

HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。

如何操作 DOM?

一些常用的 HTML DOM 方法：核心就是增删改查操作，

添加元素

createElement - 创建元素
createTextNode - 创建文本节点（元素）
cloneNode(true/false) - 克隆一个节点，接收一个bool参数，用来表示是否复制子元素。
createDocumentFragment - 创建一个文档碎片 DocumentFragment，它表示一种轻量级的文档，主要是用来存储临时节点，大量操作 DOM 时用它可以大大提升性能。

例如：新创建一个新元素 div，并添加到 HTML 文档中。代码如下：

let el = document.createElement("div");
el.id = 'shiYu';
el.style = 'width: 500px;height:500px;backGroundColor:red;';
el.innerHTML = '创建一个新元素div';
document.body.appendChild(el);

例如：克隆一个新元素 clone，并添加到 HTML 文档中。代码如下：

let el = document.getElementById("test");
let clone = el.cloneNode(true);
clone.id = "test2";
document.body.appendChild(clone);

删除元素

removeChild(node) - 删除子节点（元素）
replaceChild - 用于将一个节点替换另一个节点

代码如下：

var deletedChild = parent.removeChild(node);

const sp1 = document.createElement("span");
sp1.id = "newSpan";
const sp1_content = document.createTextNode("new replacement span element.");
sp1.appendChild(sp1_content);
const sp2 = document.getElementById("childSpan");
const parentDiv = sp2.parentNode;
parentDiv.replaceChild(sp1, sp2);

修改元素

appendChild(node) - 插入新的子节点（元素）
insertBefore - 在参考节点之前插入一个拥有指定父节点的子节点
insertAdjacentHTML - 将指定的文本解析为 Element 元素，并将结果节点插入到 DOM 树中的指定位置

代码如下：

// parent.appendChild(child);
const p = document.createElement("p");
document.body.appendChild(p);

let insertedNode = parentNode.insertBefore(newNode, referenceNode);

// 原为 <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// 此时，新结构变成：
// <div id="one">one</div><div id="two">two</div>

查找元素

getElementById(id) - 获取带有指定 id 的节点（元素）
getElementsByClassName - 获取带有指定类名的节点（元素），多个类名用空格分隔，返回一个 HTMLCollection 。注意兼容
getElementsByTagName - 根据标签名称获取元素， * 表示查询所有标签，返回一个 HTMLCollection.
getElementsByName - 获取带有 name 属性的节点（元素），返回一个 NodeList.
querySelector - 返回单个 Node，IE8+(含），如果匹配到多个结果，只返回第一个。
querySelectorAll - 返回一个 NodeList ，IE8+(含）。
forms - 获取当前页面所有form，返回一个 HTMLCollection.

一些常用的 HTML DOM 属性

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
setAttribute - 给元素设置属性
getAttribute - 返回指定的特性名相应的特性值，如果不存在，则返回null
hasAttribute - 判断元素是否有指定属性
dataset - 获取html data-开头的属性
classList - 获取样式 class
window.getComputedStyle - 获取应用到元素上的所有样式，IE8或更低版本不支持此方法。
getBoundingClientRect - 返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。

例子：

// 创建一个html元素，这里以创建h1元素为例
let el = document.createElement("h1")
el.innerHTML = '这是一段文字描述...'

let p = document.getElementById('p')
p.innerHTML = '这是一段文字描述...'

// myEl 是一个 DOMRect 对象，包含整个元素的最小矩形（包括 padding 和 border-width）。width、height、left、top、right、bottom，它是相对于窗口顶部而不是文档顶部，滚动页面时它们的值是会发生变化的。
var myEl = element.getBoundingClientRect();

到此这篇关于一文详解DOM的概念和常用操作的文章就介绍到这了,更多相关DOM 概念和常用操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！