本文小编为大家详细介绍“javascript DOM的概念和常用操作是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“javascript DOM的概念和常用操作是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
DOM 的概念和常用操作
什么是 DOM?
文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将 web 页面和脚本或程序语言连接起来。
官方定义晦涩难懂，我们可以简单理解为： DOM 采用的是“树形结构”，用“树节点”的形式来表示页面中的每一个元素。我们先看下面的一个例子。
<!DOCTYPE HTML> <html> <head> <title>文档标题</title> </head> <body> <a href="https://www.maopiaopiao.com">
对于上面这个 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元素，这里以创建h2元素为例
let el = document.createElement("h2")
el.innerHTML = '这是一段文字描述...'
let p = document.getElementById('p')
p.innerHTML = '这是一段文字描述...'
// myEl 是一个 DOMRect 对象，包含整个元素的最小矩形（包括 padding 和 border-width）。width、height、left、top、right、bottom，它是相对于窗口顶部而不是文档顶部，滚动页面时它们的值是会发生变化的。
var myEl = element.getBoundingClientRect();