当前位置： 首页 > news >正文

DOM文档对象模型

news 2026/2/12 20:42:52

前言

        DOM(Document Object Model) 文档对象模型，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。简单来说DOM就是操作网页的api和接口。

一、Node类型属性

    1.判断节点类型 nodeType  整数返回值 9 1 3  2

<div id="one">我是一个div<!-- 注释 --><span>行内元素</span></div><div id="two">我是第二个div</div><script>// 1.nodeType 返回节点类型 返回一个整数值 文档节点 返回9console.log(document.nodeType);// 获取div  通过id获取标签var div1 = document.getElementById('one');console.log(div1);console.log(div1.nodeType,'元素节点');console.log(div1.attributes.id.nodeType,'属性节点');


    2.返回节点纯大写名称 nodeName DIV BODY

 var div1 = document.getElementById('one');console.log(document.body.nodeName);


    3.返回文本字符 nodeValue

console.log(div1.firstChild.nodeValue);


    4.textContent 返回元素和后代元素文本内容 

var div1 = document.getElementById('one');
console.log(div1.textContent)


    5.nextSibling 获取同级节点下一个节点

var div1 = document.getElementById('one');
var div2 = document.getElementById('two');
console.log(div1.nextSibling,'获取后一个节点');


    6.previousSibling 获取同级节点前一个节点

var div1 = document.getElementById('one');
var div2 = document.getElementById('two');
console.log(div2.previousSibling,'获取前一个节点');


    7.获取父节点 parentNode

console.log(div1.parentNode);


    8.获取父元素节点 parentElement

console.log(div1.parentElement);


    9.获取元素的子节点 childNodes 类数组对象 包括文本注释...节点

console.log(div1.childNodes);
console.log(Array.isArray(div1.childNodes));


    10.获取元素的元素节点 children 类数组对象 

console.log(div1.children);


    11.firstChild  获取元素第一个子节点

console.log(document.body.firstChild);


    12.lastChild  获取元素最后一个子节点

console.log(document.body.lastChild);

二、DOM操作方法

    增删插替换都是由父元素调用
    新增节点：appendChild(新节点)

//创建一个节点 createElement();
var div =  document.createElement('div');
//  给元素 设置文本内容 innerHtml innerText
div.textContent = 'four';
document.body.appendChild(div);


    插入节点：insertBefore(插入的节点,参考节点)

//插入节点 insertBefore(要插入的节点,参考节点)
var div =  document.createElement('div');
div.textContent = 'four';
//  获取参考节点 
console.log(document.body.children,'获取当前元素所有子元素节点');
var two = document.body.children[1];
document.body.insertBefore(div,two);


    替换节点：replaceChild(替换的节点,被替换的节点)

/**
* 替换节点 replaceChild(替换的节点,被替换的节点)
*/
var div =  document.createElement('div');
div.textContent = 'four';
var one = document.body.children[0];
document.body.replaceChild(div,one);


    删除节点: removeChild(删除的节点)

/**
* 删除节点 removeChild(要删除谁)
*/
var two = document.body.children[1];
document.body.removeChild(two);

    克隆节点 ：cloneNode(true/false);
        要克隆谁 谁调用cloneNode true深克隆 既克隆节点样式以及内容
        false只克隆节点样式不克隆内容

什么是深克隆，什么是浅克隆？
          1.深克隆指的是既克隆节点的样式，还克隆节点的内容
          2.浅克隆指的是只克隆节点的样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><div>我是块级元素</div><script>var div = document.querySelector('div');// 克隆节点        cloneNode(true/flase)   默认是false  浅克隆      true  深克隆var newNode = div.cloneNode(true);document.body.appendChild(newNode);</script>
</body>
</html>

相关文章：

DOM文档对象模型

前言 DOM(Document Object Model) 文档对象模型&#xff0c;是W3C制定的标准接口规范&#xff0c;是一种处理HTML和XML文件的标准API。简单来说DOM就是操作网页的api和接口。 一、Node类型属性 1.判断节点类型 nodeType 整数返回值 9 1 3 2 <div id"one">我…...

编程日记 2023/11/23 20:30:15

【Django-DRF】多年md笔记第5篇：Django-DRF的Request、Response和视图详解

本文从分析现在流行的前后端分离Web应用模式说起&#xff0c;然后介绍如何设计REST API&#xff0c;通过使用Django来实现一个REST API为例&#xff0c;明确后端开发REST API要做的最核心工作&#xff0c;然后介绍Django REST framework能帮助我们简化开发REST API的工作。 Dj…...

编程日记 2023/11/23 20:29:14

mongo DB -- aggregate分组查询后字段展示

一、分组查询 在mongoDB中可以使用aggregate中的$group操作对集合中的文档进行分组,但是查询后的数据不显示其他字段,只显示分组字段 aggregate进行分组示例 db.collection.aggregate([{$group: {_id: "$field"}},]) 查询后显示 展开只显示两个字段 二、显示所有字段…...

编程日记 2023/11/23 20:28:12

禁止linux shell 终端显示完整工作路径，如何让linux bash终端不显示当前工作路径

在操作linux时&#xff0c;默认安装的linux终端会显示当前完整的工作目录&#xff0c;如果目录比较短还是可以接收&#xff0c;如果目录比较长&#xff0c;就显得比较别扭&#xff0c;操作起来不方便&#xff0c;因此需要关闭这种功能。 要关闭这个功能&#xff0c;请按如下步骤…...

编程日记 2023/11/23 20:27:11

error: ‘ui/ui_uimainwindow.h‘ file not found

问题&#xff1a;在刚好创建的Qt Designer Form Class类中&#xff0c;发现类的.cpp文件中有ui头文件未找到 原因&#xff1a;.ui文件没有被识别到&#xff0c;或者.ui文件不存在&#xff0c;导致ui头文件未创建而报错。 解决&#xff1a;若修改了.ui文件&#xff0c;随手ctrls…...

编程日记 2023/11/23 20:26:10

【高级网络程序设计】Week2-3 HTML

一、The Basics 1. HTML&HTML file HTMLMarkup languageHyper Text Markup LanguageHTML fileText file with markup tags.htm/.html extension Create an html file Open an editor Type: <html><head><titile><body> Save it as .html Open i…...

编程日记 2023/11/23 20:25:08

来聊聊JVM中的类加载过程以及双亲委派模型(学习Java必知内容)

文章目录 1. 类加载过程加载验证准备解析初始化 2. 双亲委派模型一个类的加载流程双亲委派模型的优点 总结 1. 类加载过程 在整个 JVM 执行过程中, 和我们程序员关系最密切的就是类加载的过程, 所以接下来我们来看下类加载的执行流程. 对于一个类来说, 它的生命周期是这样的:…...

编程日记 2023/11/23 20:24:07

scala的类介绍

scala的类、抽象类、接口、对象 class :类&#xff0c; 通过new关键字来实例化&#xff0c;每次实例化都会创建一个新的对象&#xff1b;用来定义普通的类。object&#xff1a;对象&#xff0c;用来定义一个单例对象的&#xff0c;它只有一个实例&#xff0c;且在程序运行期间…...

编程日记 2023/11/23 20:23:06

1.Gin 介绍

1.Gin 介绍 介绍 Gin 是一个 Go (Golang) 编写的轻量级 http web 框架&#xff0c;运行速度非常快&#xff0c;如果你是性能和高效的追求者&#xff0c;我们推荐你使用 Gin 框架。 Gin 最擅长的就是 Api 接口的高并发&#xff0c;如果项目的规模不大&#xff0c;业务相对简单&a…...

编程日记 2023/11/23 20:22:04

华三无线控制器WX2540H配合准入做Portal认证

数据通信 - 建设篇 - 无线 第四章 华三无线控制器WX2540H配合准入做Portal认证 数据通信 - 建设篇 - 无线系列文章回顾华三无线控制器WX2540H配合准入做Portal认证前言其他配置优化参考来源系列文章回顾 第一章 华三无线控制器配置本地转发 第二章 华三无线控制器配置802.1X认…...

编程日记 2023/11/23 20:21:01

OAK相机通过振动测试！

编辑&#xff1a;OAK中国 首发&#xff1a;oakchina.cn 喜欢的话&#xff0c;请多多&#x1f44d;⭐️✍ 内容可能会不定期更新&#xff0c;官网内容都是最新的&#xff0c;请查看首发地址链接。 Hello&#xff0c;大家好&#xff0c;这里是OAK中国&#xff0c;我是助手君。 当…...

编程日记 2023/11/23 20:20:00

使用Pytorch从零开始构建RNN

在这篇文章中&#xff0c;我们将了解 RNN&#xff08;即循环神经网络&#xff09;&#xff0c;并尝试通过 PyTorch 从头开始​​实现其中的部分内容。是的&#xff0c;这并不完全是从头开始&#xff0c;因为我们仍然依赖 PyTorch autograd 来计算梯度并实现反向传播&#xff0c…...

编程日记 2023/11/23 20:18:59

Linux之实现简易的shell

1.打印提示符并获取命令行 我们在使用shell的时候&#xff0c;发现我们在输入命令是&#xff0c;前面会有&#xff1a;有用户名&#xff0c;版本&#xff0c;当前路径等信息&#xff0c;这里我们可以用环境变量去获取: 1 #include <stdio.h>2 #include <stdlib.h>…...

编程日记 2023/11/23 20:17:58

如何实现在公网下使用navicat图形化工具远程连接本地内网的MariaDB数据库

公网远程连接MariaDB数据库【cpolar内网穿透】 文章目录 公网远程连接MariaDB数据库【cpolar内网穿透】1. 配置MariaDB数据库1.1 安装MariaDB数据库1.2 测试局域网内远程连接 2. 内网穿透2.1 创建隧道映射2.2 测试随机地址公网远程访问3. 配置固定TCP端口地址3.1 保留一个固定的…...

编程日记 2023/11/23 20:15:56

MySQL InnoDB 引擎底层解析（三）

6.3.3. InnoDB 的内存结构总结 InnoDB 的内存结构和磁盘存储结构图总结如下&#xff1a; 其中的 Insert/Change Buffer 主要是用于对二级索引的写入优化&#xff0c;Undo 空间则是 undo 日志一般放在系统表空间&#xff0c;但是通过参数配置后&#xff0c;也可以用独立表空 间…...

编程日记 2023/11/23 20:14:55

浅析基于智能音视频技术的城市重要场馆智能监控系统设计

了解旭帆科技的朋友都知道&#xff0c;旭帆科技一直都乐于和大家分享各类场景的视频解决方案&#xff0c;今天小编就基于智能音视频技术的城市重要场馆智能监控系统设计和大家探讨一下。 基于智能音视频技术的城市重要场馆智能监控系统设计&#xff0c;主要包含以下要素&#x…...

编程日记 2023/11/23 20:13:54

hdu-lcy算法培训班 入门第一讲 数学基础

习题 F题...

编程日记 2023/11/23 20:12:53

获取ip属地（ip2region本地离线包-超简单）

背景 最近有涉及要显示ip属地&#xff0c;但我想白嫖&#xff0c;结果就是白嫖的api接口太慢了&#xff0c;要延迟3到4秒左右&#xff0c;很影响体验&#xff0c;而且不一定稳定。 结果突然看到了这个【ip2region】开源项目&#xff0c;离线识别ip属地&#xff0c;精度自己测…...

编程日记 2023/11/23 20:11:52

主流的低代码平台有哪些？程序员应该如何与低代码相处？

本文主要阐述低代码的概念&#xff0c;介绍目前主流的低代码平台&#xff0c;总结低代码平台的典型特征、存在优势以及未来发展趋势。并站在程序员的角度&#xff0c;分析如何在已经到来的低代码战争中&#xff0c;找到自己的定位&#xff0c;一展所长。 什么是低代码&#xff…...

编程日记 2023/11/23 20:10:51

华为---OSPF网络虚连接（Virtual Link）简介及示例配置

【1】OSPF网络虚连接&#xff08;Virtual Link&#xff09;简介 为了避免区域间的环路&#xff0c;OSPF规定不允许直接在两个非骨干区域之间发布路由信息&#xff0c;只允许在一个区域内部或者在骨干区域和非骨干区域之间发布路由信息。因此&#xff0c;每个ABR都必须连接到骨干…...

编程日记 2023/11/23 20:09:50

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2026/2/12 0:01:33

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

编程新知 2026/1/21 14:29:57

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/11/29 21:00:30

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

编程新知 2026/1/11 6:22:16

C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

编程新知 2025/7/20 6:08:51

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

编程新知 2026/1/31 6:53:53

脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

编程新知 2026/2/3 4:26:32

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

编程新知 2026/2/6 10:22:29

Matlab实现任意伪彩色图像可视化显示

Matlab实现任意伪彩色图像可视化显示 1、灰度原始图像2、RGB彩色原始图像 在科研研究中&#xff0c;如何展示好看的实验结果图像非常重要&#xff01;&#xff01;&#xff01; 1、灰度原始图像 灰度图像每个像素点只有一个数值&#xff0c;代表该点的​​亮度&#xff08;或…...

编程新知 2026/2/7 2:14:33