DOM简介和DOM操作（一）_dom都有啥项目-CSDN博客

本文链接：https://blog.csdn.net/Aiolimp/article/details/108331557

本文深入讲解DOM（文档对象模型）的基础知识，包括DOM的组成、节点类型及其操作方法。涵盖元素节点的获取、属性和样式的设置、动态创建与删除元素，以及事件触发响应等内容，适合初学者和进阶开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM简介和DOM操作（一）

JavaScript的组成

ECMAScript：JavaScript的语法标准，包括变量、表达式、运算符、函数、if语句、for语句等等。
DOM：文档对象模型(Document object Model)，操作网页上的元素的API，比如让盒子移动、变色、轮播图等。
BOM：浏览器对象模型，操作浏览器部分功能的API，比如让浏览器自动滚动。

节点
节点(Node):构成HTML网页的最基本单元，网页中的每一个部分都可以称为是一个节点，比如：html标签、属性、文本、注释等都是一个节点。常用节点分为四大类：

文档节点(文档)：整个HTML文档就是一个文档节点。
元素节点(标签):HTML标签。
属性节点(属性)：元素的属性。
文本节点(文本):HTML标签中的文本内容（包括标签之间的空格、换行）。
节点的类型不同，属性和方法也都不同，所有的节点都是Object。
什么是DOM
DOM：Document Object Model，文档对象模型。DOM为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
DOM由节点组成。
解析过程：HTML加载完毕，渲染引擎会在内存中吧HTML文档，生成一个DOM树，getElementById是获取DOM上的元素节点，然后操作的时候修改的是改元素的属性。
DOM树：(一切都是节点)
结构如下：

DOM元素可以做什么
找对象(元素节点)
设置元素的属性值
设置元素的样式
动态创建和删除元素
事件的触发响应：事件源、事件、事件的驱动程序

1.元素节点的获取

    //2009ES5之前发布的ECMASCRIPT标准
			var div1 = document.getElementById("box1");//通过id获取元素节点(因为id是唯一的所以只获取一个)
			var arr1 = document.getElementsByClassName("box2")//通过标签名获取元素节点数组
			var arr2 = document.getElementsByTagName("div")//通过类名获取元素节点数组
    //ES5之后的ECMASCRIPT标准
			//document.querySelector 返回最先匹配的第一个对象
			var abc = document.querySelector("#b")//和document.getElementById获取的对象是一样的
			var cba = document.querySelector(".b")
			//document.querySelectorAll 获取所有匹配到的元素对象
			var aaa = document.querySelectorAll(".b")

2.DOM中访问关系的获取

获取父节点：节点.parentNode
获取兄弟节点：nextSibling | nextElementSibling | previousSibling | previousElementSibling
获取子节点： firstChild | firstElementChild | lastChild | lastElementChild
所有子节点： childNodes | children

3.DOM节点的操作

创建节点：

            新的标签 = document.createElement("标签名")；

插入节点

方式一： 
父节点.appendChild（新的子节点）//父节点的最后插入一个新的子节点
            //1.创建元素
			var h1 = document.createElement("h1")
			//2.设置元素
			h1.innerHTML = "你今天好帅！"
			//3.插入元素，首先找到被插入的元素
			var d1 = document.querySelector(".d1")
			//4.通过appendChild()追加子元素
			d1.appendChild(h1)
方式二：
父节点.insertBefore（新的子节点，作为参考的子节点）//在参考节点前插入一个新节点
			//在什么面前插入元素
			//1.创建img元素
			var img  = document.createElement('img')
			//2.设置img的src属性
			img.src = "img/123.jpg"
			//3.找到被插入的父元素，<body>
			var body = document.querySelector('body')
			//4.在body的d3前面插入内容
			var d3 = document.querySelector('.d3')
			body.insertBefore(img,d3)
			d3.parentElement.insertBefore(img,d3) // 通过d3.parentElement直接获取父元素

删除节点

被删除的父元素.removeChild（删除的元素）

			//删除元素
			//1.找到被删除的元素
			var body = document.querySelector('body')
			//2.找到要删除的元素
			var d2 = document.querySelector('.d2')
			//3.使用removeChild()方法删除元素
			body.removeChild(d2)

复制节点

要复制的节点.cloneNode()
要复制的节点.cloneNode(true)
//不带参数或者带参数false：只复制节点本身，不复制子节点
//带参数true：即复制节点本身，也复制所有子节点