DOM编程指南：节点操作与JSON对象-优快云博客

本文链接：https://blog.youkuaiyun.com/myid00451612/article/details/122404324

这篇博客主要介绍了DOM编程，强调了DOM在网页交互中的重要性，包括节点的增删改查操作，详细讲解了节点的概念、获取方法以及属性。此外，还讨论了如何通过模板法简化DOM操作，并引入了JavaScript对象和JSON对象，解释了它们的语法和在数据交换中的作用。案例部分涵盖了购物车实现和省市联动等应用场景。

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

第一节：DOM编程概述

1.1 什么是DOM编程

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中。

1.2 为什么要学习DOM编程

学习DOM操作就是操作页面中的节点对象（元素，文本，元素中的属性）。

增删改

新增：新增什么？各种标签本来不存在，但是我们又想用，无中生有！

创造标签此时没有样式创建
美化（设置样式，添加内容）美化
将造好的标签添加到该添加的地方！添加

删除：删除标签

修改：1.修改样式 2.内容 3. 替换 4.属性

第二节：节点操作

对节点的操作增删改查

2.1 节点概述

什么是节点？

文档是一个文档节点。（包含页面中的标签，属性，文本，空格符，特殊符号）
所有的HTML元素都是元素/标签节点。 **
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。

2.2 标签节点对象的获取

想操作页面中的某一个标签，要先拿到这个标签。

2.3 节点的操作

增加操作

名称	含义
*document.createElement(标签名)	创建一个节点
insertBefore(新标签,哪个标签之前)	在哪个标签之前插入节点
*父.appendChild(新标签)	在父节点的里边追加子节点
cloneNode()	复制节点，如果参数为true，还会复制当前节点的子孙节点，否则只复制当前节点。

删除操作

名称	含义
父.removeChild（子标签）	删除指定的子标签/子节点
自己.remove()	删除自身

修改操作

名称	含义
parent.replaceChild(新标签, 旧标签);	将父标签中的旧标签用新标签替换掉

2.4 节点具有的属性

元素(Element): 就是html标签。对元素的访问使用的更频繁

节点(Node): 包含了html标签,文本内容

节点对象属性（不加括号）	含义
childNodes 数组	所有直接子节点（包含文本节点和标签元素节点）。返回子节点数组
*children 数组	所有元素子节点——获取所有的子标签（不包含文本节点）。返回子元素数组
*firstElementChild	第一个子元素对象
firstChild	第一个子节点对象
*lastElementChild	最后一个子元素对象
lastChild	最后一个子节点对象
*parentNode	父节点
nextSibling	返回当前元素紧跟的下一个兄弟节点(包含文本/标签等)
*nextElementSibling	返回指定元素之后的下一个兄弟元素节点（相同节点树层中的下一个元素节点）。
previousSibling	返回当前元素上一个节点紧挨着的
*previousElementSibling	返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）

节点对象属性	含义
nodeValue	节点值（文本节点的值）。文本节点和属性节点返回文本内容，元素节点返回null
nodeType	节点类型。1标签节点 2 属性节点 3文本节点
nodeName	节点名称。文本节点固定返回: #text 元素节点:返回标签名

注意:所有文本节点的nodeName都是 “#text”。节点值就是文本内容，节点类型就是3

所有元素节点的nodeName就是元素标签名。节点值都是null，节点类型就是1

元素对象属性/方法	值
*value	文本框的值
id	标签的id属性值
name	表单元素的name属性值
className	class属性值
*innerHTML	标签中的所有HTML内容
outerHTML	包含标签本身以及标签体
innerText	标签中的所有文本内容
getAttribute("属性名")	获取标签属性值方法
setAttribute("属性名","属性值")	为标签设置属性方法
getAttributeNode("属性名")	获取属性节点对象方法

修改本身就有的属性只要能直接 . 出来就表示 . 出来的属性都是本身就有的（系统规定的）

2.5 常用查询/获取节点方法

方法	说明
*getElementById	根据编号获取元素
getElementsByTagName	根据标签名获取元素数组
getElementsByClassName	根据类样式名获取元素数组
getElementsByName	根据元素的name属性查找元素数组
*querySelector	根据id选择器或类选择器获取单个元素
*querySelectorAll	根据id选择器或类选择器获取元素数组

第三节：案例练习

3.1 发表说说

分析：

1.首先需要一个div装所有的评论。

2.当点击发表按钮时将评论添加到div中

3.添加之前先创建标签 < span>放名字在创建一个span放内容在将创建的两个span 添加到一个P标签中

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <style type="text/css">
	fieldset{
		width:500px;
		height:300px;
		border:1px solid red;
		margin:0px auto;
		text-a