DOM文档对象模型
前言
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) 文档对象模型，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。简单来说DOM就是操作网页的api和接口。 一、Node类型属性 1.判断节点类型 nodeType 整数返回值 9 1 3 2 <div id"one">我…...
【Django-DRF】多年md笔记第5篇：Django-DRF的Request、Response和视图详解
本文从分析现在流行的前后端分离Web应用模式说起，然后介绍如何设计REST API，通过使用Django来实现一个REST API为例，明确后端开发REST API要做的最核心工作，然后介绍Django REST framework能帮助我们简化开发REST API的工作。 Dj…...
mongo DB -- aggregate分组查询后字段展示
一、分组查询 在mongoDB中可以使用aggregate中的$group操作对集合中的文档进行分组,但是查询后的数据不显示其他字段,只显示分组字段 aggregate进行分组示例 db.collection.aggregate([{$group: {_id: "$field"}},]) 查询后显示 展开只显示两个字段 二、显示所有字段…...
禁止linux shell 终端显示完整工作路径，如何让linux bash终端不显示当前工作路径
在操作linux时，默认安装的linux终端会显示当前完整的工作目录，如果目录比较短还是可以接收，如果目录比较长，就显得比较别扭，操作起来不方便，因此需要关闭这种功能。 要关闭这个功能，请按如下步骤…...
error: ‘ui/ui_uimainwindow.h‘ file not found
问题：在刚好创建的Qt Designer Form Class类中，发现类的.cpp文件中有ui头文件未找到 原因：.ui文件没有被识别到，或者.ui文件不存在，导致ui头文件未创建而报错。 解决：若修改了.ui文件，随手ctrls…...
【高级网络程序设计】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…...
来聊聊JVM中的类加载过程以及双亲委派模型(学习Java必知内容)
文章目录 1. 类加载过程加载验证准备解析初始化 2. 双亲委派模型一个类的加载流程双亲委派模型的优点 总结 1. 类加载过程 在整个 JVM 执行过程中, 和我们程序员关系最密切的就是类加载的过程, 所以接下来我们来看下类加载的执行流程. 对于一个类来说, 它的生命周期是这样的:…...
scala的类介绍
scala的类、抽象类、接口、对象 class :类， 通过new关键字来实例化，每次实例化都会创建一个新的对象；用来定义普通的类。object：对象，用来定义一个单例对象的，它只有一个实例，且在程序运行期间…...
1.Gin 介绍
1.Gin 介绍 介绍 Gin 是一个 Go (Golang) 编写的轻量级 http web 框架，运行速度非常快，如果你是性能和高效的追求者，我们推荐你使用 Gin 框架。 Gin 最擅长的就是 Api 接口的高并发，如果项目的规模不大，业务相对简单&a…...
华三无线控制器WX2540H配合准入做Portal认证
数据通信 - 建设篇 - 无线 第四章 华三无线控制器WX2540H配合准入做Portal认证 数据通信 - 建设篇 - 无线系列文章回顾华三无线控制器WX2540H配合准入做Portal认证前言其他配置优化参考来源系列文章回顾 第一章 华三无线控制器配置本地转发 第二章 华三无线控制器配置802.1X认…...
OAK相机通过振动测试！
编辑：OAK中国 首发：oakchina.cn 喜欢的话，请多多👍⭐️✍ 内容可能会不定期更新，官网内容都是最新的，请查看首发地址链接。 Hello，大家好，这里是OAK中国，我是助手君。 当…...
使用Pytorch从零开始构建RNN
在这篇文章中，我们将了解 RNN（即循环神经网络），并尝试通过 PyTorch 从头开始实现其中的部分内容。是的，这并不完全是从头开始，因为我们仍然依赖 PyTorch autograd 来计算梯度并实现反向传播，…...
Linux之实现简易的shell
1.打印提示符并获取命令行 我们在使用shell的时候，发现我们在输入命令是，前面会有：有用户名，版本，当前路径等信息，这里我们可以用环境变量去获取: 1 #include <stdio.h>2 #include <stdlib.h>…...
如何实现在公网下使用navicat图形化工具远程连接本地内网的MariaDB数据库
公网远程连接MariaDB数据库【cpolar内网穿透】 文章目录 公网远程连接MariaDB数据库【cpolar内网穿透】1. 配置MariaDB数据库1.1 安装MariaDB数据库1.2 测试局域网内远程连接 2. 内网穿透2.1 创建隧道映射2.2 测试随机地址公网远程访问3. 配置固定TCP端口地址3.1 保留一个固定的…...
MySQL InnoDB 引擎底层解析（三）
6.3.3. InnoDB 的内存结构总结 InnoDB 的内存结构和磁盘存储结构图总结如下： 其中的 Insert/Change Buffer 主要是用于对二级索引的写入优化，Undo 空间则是 undo 日志一般放在系统表空间，但是通过参数配置后，也可以用独立表空 间…...
浅析基于智能音视频技术的城市重要场馆智能监控系统设计
了解旭帆科技的朋友都知道，旭帆科技一直都乐于和大家分享各类场景的视频解决方案，今天小编就基于智能音视频技术的城市重要场馆智能监控系统设计和大家探讨一下。 基于智能音视频技术的城市重要场馆智能监控系统设计，主要包含以下要素&#x…...
hdu-lcy算法培训班 入门第一讲 数学基础
习题 F题...
获取ip属地（ip2region本地离线包-超简单）
背景 最近有涉及要显示ip属地，但我想白嫖，结果就是白嫖的api接口太慢了，要延迟3到4秒左右，很影响体验，而且不一定稳定。 结果突然看到了这个【ip2region】开源项目，离线识别ip属地，精度自己测…...
主流的低代码平台有哪些？程序员应该如何与低代码相处？
本文主要阐述低代码的概念，介绍目前主流的低代码平台，总结低代码平台的典型特征、存在优势以及未来发展趋势。并站在程序员的角度，分析如何在已经到来的低代码战争中，找到自己的定位，一展所长。 什么是低代码ÿ…...
华为---OSPF网络虚连接（Virtual Link）简介及示例配置
【1】OSPF网络虚连接（Virtual Link）简介 为了避免区域间的环路，OSPF规定不允许直接在两个非骨干区域之间发布路由信息，只允许在一个区域内部或者在骨干区域和非骨干区域之间发布路由信息。因此，每个ABR都必须连接到骨干…...
告别缓冲烦恼：BBDown助你轻松下载B站视频
告别缓冲烦恼：BBDown助你轻松下载B站视频 【免费下载链接】BBDown Bilibili Downloader. 一个命令行式哔哩哔哩下载器. 项目地址: https://gitcode.com/gh_mirrors/bb/BBDown 你是否曾因网络卡顿错过精彩的B站视频？是否想离线收藏喜欢的教程和番剧…...
为什么你的MCP 2026集群总在凌晨2:17触发OOM？——一位SRE总监的137天日志溯源与内存泄漏根因定位（含eBPF追踪模板）
更多请点击： https://intelliparadigm.com 第一章：MCP 2026集群OOM现象的全局观测与时间锚点确认 在 MCP 2026 集群中，OOM（Out-of-Memory）事件并非孤立故障，而是系统性资源压力在内存子系统中的集中爆发。…...
iPhone USB网络共享驱动终极解决方案：快速解决Windows连接问题
iPhone USB网络共享驱动终极解决方案：快速解决Windows连接问题 【免费下载链接】Apple-Mobile-Drivers-Installer Powershell script to easily install Apple USB and Mobile Device Ethernet (USB Tethering) drivers on Windows! 项目地址: https://gitcode.co…...
终极指南：5分钟让Axure RP说中文，告别英文界面困扰
终极指南：5分钟让Axure RP说中文，告别英文界面困扰 【免费下载链接】axure-cn Chinese language file for Axure RP. Axure RP 简体中文语言包。支持 Axure 11、10、9。不定期更新。 项目地址: https://gitcode.com/gh_mirrors/ax/axure-cn 你是否…...
手把手教你用GoT框架优化GPT-3.5/4的排序与关键词统计任务，成本直降30%+
用GoT框架重构大模型任务：排序与关键词统计实战指南 当你在深夜调试代码时，是否遇到过这样的场景——大模型API的账单让你心跳加速，而任务效果却差强人意？传统提示工程方法就像用瑞士军刀砍树，既低效又昂贵。今天我们要…...
别再手动加词了！用Custom_phrase.txt文件批量导入你的Rime小狼毫个人词库
高效管理Rime词库：Custom_phrase.txt批量导入实战指南 每次在Rime输入法中手动添加自定义词汇时，你是否感到效率低下？专业术语、个人常用语、网络热词一个个输入不仅耗时耗力，还容易出错。本文将带你深入了解如何利用Custom_phras…...
5分钟精通MouseTester：专业鼠标性能测试的终极指南
5分钟精通MouseTester：专业鼠标性能测试的终极指南 【免费下载链接】MouseTester 项目地址: https://gitcode.com/gh_mirrors/mo/MouseTester 你是否曾好奇自己的鼠标性能究竟如何？或者想知道为什么在游戏中总是感觉鼠标反应慢半拍？M…...
OCEAN-PE-Pro 系统架构设计文档
目录 1. 项目概述 1.1 系统定位 1.2 核心能力 1.3 技术栈 2. 总体结构 3. 各模块设计 3.1 用户交互层 (UI Layer) 3.1.1 主控制台 (MainConsole) 3.1.2 参数配置面板 (ConfigPanel) 3.1.3 可视化渲染窗口 (RenderWindow) 3.2 业务逻辑层 (Service Layer) 3.2.1 环境…...
AntiMicroX：游戏手柄映射解决方案的技术实现与配置策略
AntiMicroX：游戏手柄映射解决方案的技术实现与配置策略 【免费下载链接】antimicrox Graphical program used to map keyboard buttons and mouse controls to a gamepad. Useful for playing games with no gamepad support. 项目地址: https://gitcode.com/GitH…...
你每次向AI提问，都在拉动一条万亿产业链
你有没有想过一个问题—— 当你随手打开手机，向ChatGPT或豆包问一句“帮我写一封辞职信”，或者“明天北京会下雨吗”，然后几乎是瞬间，屏幕里就蹦出了一段通顺自然的回答。这个过程中，到底发生了什么？ 不是魔…...