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

document

news 文章来源：https://blog.csdn.net/m0_69712602/article/details/134747261 2025/5/14 13:01:35

原贴连接

1.在整个文档范围内查询元素节点

功能API返回值
根据id值查询document.getElementById(“id值”)一个具体的元素节
根据标签名查询document.getElementsByTagName(“标签名”)元素节点数组
根据name属性值查询document.getElementsByName(“name值”)元素节点数组
根据类名查询document.getElementsByClassName(“类名”)元素节点数组

2 在具体元素节点范围内查找子节点

功能API返回值
查找子标签element.children返回子标签数组
查找第一个子标签element.firstElementChild标签对象
查找最后一个子标签element.lastElementChild节点对象

3 查找指定元素节点的父节点

功能API返回值
查找指定元素节点的父标签element.parentElement标签对象

4 查找指定元素节点的兄弟节点

功能API返回值
查找前一个兄弟标签node.previousElementSibling标签对象
查找后一个兄弟标签node.nextElementSibling标签对象

5 属性操作

需求操作方式
读取属性值元素对象.属性名
修改属性值元素对象.属性名=新的属性值

6 标签体的操作

需求操作方式
获取或者设置标签体的文本内容element.innerText
获取或者设置标签体的内容element.innerHTML

7 DOM增删改操作

API功能
document.createElement(“标签名”)创建元素节点并返回，但不会自动添加到文档中
document.createTextNode(“文本值”)创建文本节点并返回，但不会自动添加到文档中
element.append(ele)将ele添加到element元素中
element.appendChild(ele)将ele添加到element所有子节点后面
parentEle.insertBefore(newEle,targetEle)将newEle插入到targetEle前面
parentEle.replaceChild(newEle, oldEle)用新节点替换原有的旧子节点
element.remove()删除某个标签

8.doc实战

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"/><title>DOM操作</title><script>window.onload = function(){//1.根据ID获取元素信息let p1 = document.getElementById('p1');console.log("p1",p1)//2.根据name属性获取元素信息let name1 = document.getElementsByName("name1");console.log("name1",name1.length);//alert(inputNames.length)name1[0].value = "aabbcc";//3.通过input标签获取元素let input1 = document.getElementsByTagName("input")console.log("input1",input1.length);//alert("input标签的个数:"+inputTags.length)input1[0].value = "112233";//4.通过class类型获取数据let class1 = document.getElementsByClassName("classTag");console.log("class1",class1.length);//alert("通过类型获取元素的个数:"+classTag.length)class1[0].value = "oooooo";//5.查找指定元素的子元素let children1 = document.getElementById("div1").children;console.log("children1",children1);//alert("子节点个数:"+childrens.length)children1[1].innerHTML = "nihai";//6.获取第一个子元素let firstP = document.getElementById('div1').firstElementChild;console.log("firstP",firstP);//7.获取最后一个子节点let lastP = document.getElementById('div1').lastElementChild;console.log("lastP",lastP);//8.根据指定元素,查找父节点let parentP = document.getElementById('p1').parentElement;console.log("parentP",parentP);//9.查找指定兄弟的 前一个let previousf = document.getElementById('p2').previousElementSibling;console.log("previousf",previousf);//10.查找指定兄弟元素的后一个let previousl = document.getElementById("p1").nextElementSibling;console.log("previousl",previousl);//11.获取元素属性和属性值  获取id="p1"的ID值let propertyId = document.getElementById('p1').id;console.log("propertyId",propertyId);//12 将id="p1" 修改为p3let propertyUp = document.getElementById('p1').id;propertyUp = 'p3';console.log("propertyUp",propertyUp);//13 获取标签体的内容let innerText = document.getElementById('p2').innerText;console.log("innerText",innerText);//14 修改id=p2标签体的内容let innserTextUp = document.getElementById('p2').innerText;innserTextUp = '而我在等你';console.log('innserTextUp',innserTextUp);//15 获取id=div1 的标签体内容let innerTextD = document.getElementById('div1').innerText;console.log('innerTextD',innerTextD);//16 修改id=div1的内容let innerTextUp = document.getElementById('div1').innerText;innerTextUp = '窗前明月光,疑似地上霜,举头望明月,低头思故乡.'; console.log('innerTextUp',innerTextUp);}</script></head><body><input type="text" name="name1" id="id" class="classTag"><div id="div1"><div id="p1">天青色等烟雨,</div><div id="p2">而我在等你,</div><p>炊烟袅袅升起,</p><p>隔江千万里.</p></div></body>
</html>

9.F12效果

相关文章：

document

原贴连接 1.在整个文档范围内查询元素节点 功能API返回值根据id值查询document.getElementById(“id值”)一个具体的元素节根据标签名查询document.getElementsByTagName(“标签名”)元素节点数组根据name属性值查询document.getElementsByName(“name值”)元素节点数组根据类…...

编程日记 2023/12/2 9:54:50

NodeJS（二）：npm包管理工具、yarn、npx、pnpm工具等

目录 (一)npm包管理工具 1.了解npm 2.npm的配置文件 常见的配置属性 scripts属性*** 依赖的版本管理 3.npm安装包的细节 4.package-lock文件 5.npm install原理** 6.npm的其他命令 (二) 其他包管理工具 1.yarn工具 基本指令 2.cnpm工具 3.npx工具 (1)执行本地…...

编程日记 2023/12/2 9:53:49

day3 移出链表中值为x的节点

ListNode* removeElements(ListNode* head, int val) { ListNode* dummyHead new ListNode(0); // 设置一个虚拟头结点 dummyHead->next head; // 将虚拟头结点指向head&#xff0c;这样方便后面做删除操作 ListNode* cur dummyHead; while (cur->next ! NULL…...

编程日记 2023/12/2 9:51:47

浅谈 Guava 中的 ImmutableMap.of 方法的坑

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《EffectiveJava》独家解析》专栏作者。 热门文章推荐&…...

编程日记 2023/12/2 9:48:44

Symbol()和迭代器生成器

目录 1、Symbol&#xff08;&#xff09; 2、迭代器生成器 执行流程 模拟生成器函数 for of 遍历迭代选择器 yield * Generator函数应用 1、Symbol&#xff08;&#xff09; Symbol表示独一无二的值 const s1 Symbol(a)const s2 Symbol(a)console.log(s1 s2) // fa…...

编程日记 2023/12/2 9:47:43

USB Type-C的基本原理

1 USB Type-C的基本原理 1.1 基本特性 Figure 1-1 USB Type-C接头外形 USB Type-C&#xff08;简称USB-C&#xff09;的基本特性&#xff1a; 1. 接口插座的尺寸与原来的Micro-USB规格一样小&#xff0c;约为8.3mm X 2.5mm 2. 可承受1万次反复插拔 3. 支持正反均可插入的“正反…...

编程日记 2023/12/2 9:45:42

HarmonyOS开发(八)：动画及网络

1、动画概述 在ArkUI中&#xff0c;产生动画的方式是改变组件属性值并且指定相关的动画参数。当属性值发生变化后&#xff0c;按照动画参数&#xff0c;从原来的状态过渡到新的状态&#xff0c;就形成一个动画。 动画的相关参数如下&#xff1a; 属性名称 属性类型 默认值 …...

编程日记 2023/12/2 9:43:40

Pinctrl子系统和GPIO子系统

Pinctrl子系统&#xff1a; 借助Princtr子系统来设置一个Pin的复用和电气属性&#xff1b; pinctrl子系统主要做的工作是&#xff1a;1. 获取设备树中的PIN信息&#xff1b;2.根据获取到的pin信息来设置的Pin的复用功能&#xff1b;3.根据获取到的pin信息去设置pin的电气特性…...

编程日记 2023/12/2 9:42:39

Unittest单元测试框架之unittest构建测试套件

构建测试套件 在实际项目中&#xff0c;随着项目进度的开展&#xff0c;测试类会越来越多&#xff0c;可是直到现在我 们还只会一个一个的单独运行测试类&#xff0c;这在实际项目实践中肯定是不可行的&#xff0c;在 unittest中可以通过测试套件来解决该问题。 测试套件&…...

编程日记 2023/12/2 9:41:38

Django回顾4

一.过滤器 1.过滤器格式 {{变量|过滤器名字}} 2.怎么使用 1.注册app 2.在app下创建templatetags模块&#xff08;模块名只能是templatetags&#xff09; 3.在包下写一个py文件&#xff0c;随便命名 4.在py文件中写入&#xff1a;from django import template …...

编程日记 2023/12/2 9:40:37

Apache APISIX 体验指南

APISIX 体验指南 所有的 sh 脚本通过 git bash 执行。 出现错误仔细核对文档。 github 地址&#xff1a; 使用 docker 安装 apisix 确保本地安装 Docker 和 Docker-compose 如未安装参开以下文档安装&#xff1a; Docker&#xff1a;https://docs.docker.com/engine/install/c…...

编程日记 2023/12/2 9:36:32

Promise的resolve和reject方法（手写题）

1.resolve 2.reject 3.手写 1.resolve //构造函数上添加 resolve 方法 Promise.resolve function (value) {return new Promise((resolve, reject) > {if (value instanceof Promise) {value.then((val) > {resolve(val)},(err) > {reject(err)})} else {resolve(v…...

编程日记 2023/12/2 9:35:31

关于wiki的Unlink攻击理解--附例题BUUCTF-hitcontraining_bamboobox1

堆机制我研究了很久&#xff0c;一直没有什么很大的进展。堆相较于栈难度大的多。利用手法也多。目前还没有怎么做过堆题。这次就把理解了很久的Unlink写一写。然后找一题实践一下。 在glibc中&#xff0c;堆管理都是用一个个chunk去组织的。这个就不过多阐述。Unlink是glibc一…...

编程日记 2023/12/2 9:34:30

【linux】日志有哪些

Linux系统日志主要有以下几种类型&#xff1a; 内核及系统日志&#xff1a;这种日志数据由系统服务rsyslog统一管理&#xff0c;根据其主配置文件/etc/rsyslog.conf中设置决定内核消息及各种系统程序消息记录到什么位置。/var/log/message&#xff1a;该日志文件存放了内核消息…...

编程日记 2023/12/2 9:33:29

Redis主从复制实现RCE

文章目录 前置知识概念redis常用命令redis module 利用条件利用工具思路例题 [网鼎杯 2020 玄武组]SSRFMe总结 前置知识 概念 背景是多台服务器要保存同一份数据&#xff0c;如何实现其一致性呢&#xff1f;数据的读写操作是否每台服务器都可以处理&#xff1f;这里Redis就提供…...

编程日记 2023/12/2 9:23:20

Flutter应用程序的加固原理

在移动应用开发中&#xff0c;Flutter已经成为一种非常流行的技术选项&#xff0c;可以同时在Android和iOS平台上构建高性能、高质量的移动应用程序。但是&#xff0c;由于其跨平台特性&#xff0c;Flutter应用程序也面临着一些安全风险&#xff0c;例如反编译、代码泄露、数据…...

编程日记 2023/12/2 9:20:17

Centos7部署NFS

搭建NFS存储服务器--基于CentOS7系统 - jianmuzi - 博客园 在CentOS中搭建NFS - 陌上荼靡 - 博客园 NFS简介 NFS 是 Network FileSystem 的缩写&#xff0c;顾名思义就是网络文件存储系统&#xff0c;它最早是由 Sun 公司发展出来的&#xff0c;也是 FreeBSD 支持的文件系统…...

编程日记 2023/12/2 9:18:15

我已经开了一个融资融券的账户了，还可以再在别的券商开两融（信用账户）吗？

融资融券交易又称“证券信用交易”或保证金交易&#xff0c;是指投资者向具有融资融券业务资格的证券公司提供担保物&#xff0c;借入资金买入证券&#xff08;融资交易&#xff09;或借入证券并卖出&#xff08;融券交易&#xff09;的行为。 简单说就是融资做多&#xff0c;…...

编程日记 2023/12/2 9:14:12

Spring Cloud 版本升级记：OpenFeignClient与Gateway的爱恨交织

Spring Cloud 版本升级记&#xff1a;OpenFeignClient与Gateway的爱恨交织 近日&#xff0c;在负责的项目中&#xff0c;我对 Spring Boot、Spring Cloud 以及 Spring Cloud Alibaba 进行了版本升级。原以为会一切顺利&#xff0c;没想到却遭遇了 Spring Cloud Gateway 无法正…...

编程日记 2023/12/2 9:09:08

华为OD机试 - 最多购买宝石数目（Java JS Python C）

题目描述 橱窗里有一排宝石，不同的宝石对应不同的价格，宝石的价格标记为 gems[i] 0 ≤ i < nn = gems.length宝石可同时出售0个或多个，如果同时出售多个，则要求出售的宝石编号连续； 例如客户最大购买宝石个数为m，购买的宝石编号必须为：gems[i]，gems[i+1]，...，ge…...

编程日记 2023/12/2 9:08:07

【LeetCode】挑战100天 Day17（热题+面试经典150题）

【LeetCode】挑战100天 Day17&#xff08;热题面试经典150题&#xff09; 一、LeetCode介绍二、LeetCode 热题 HOT 100-192.1 题目2.2 题解 三、面试经典 150 题-193.1 题目3.2 题解 一、LeetCode介绍 LeetCode是一个在线编程网站&#xff0c;提供各种算法和数据结构的题目&…...

编程日记 2023/12/2 9:05:05

正则表达式的基本语法

1.正则表达式基本语法 两个特殊的符号^和$。他们的作用是分别指出一个字符串的开始和结束。例子如下&#xff1a; "^The"&#xff1a;表示所有以"The"开始的字符串&#xff08;"There"&#xff0c;"The cat"等&#xff09;&#xff1…...

编程日记 2023/12/2 9:02:02

使用visual Studio MFC 平台实现对灰度图添加椒盐噪声，并进行均值滤波与中值滤波

平滑处理–滤波 本文使用visual Studio MFC 平台实现对灰度图添加椒盐噪声&#xff0c;并进行均值滤波与中值滤波 关于其他MFC单文档工程可参考 01-Visual Studio 使用MFC 单文档工程绘制单一颜色直线和绘制渐变颜色的直线 02-visual Studio MFC 绘制单一颜色三角形、渐变颜色边…...

编程日记 2023/12/2 9:00:01

Django HMAC 请求签名校验与 Vue.js 实现安全通信

概要 在 Web 应用的开发过程中&#xff0c;确保数据传输的安全性和完整性是一个不容忽视的问题。使用 HMAC&#xff08;Hash-based Message Authentication Code&#xff09;算法对请求内容进行签名校验&#xff0c;是一种常见且有效的安全策略。本文将详细介绍如何在 Django …...

编程日记 2023/12/2 8:58:59

深度学习之循环神经网络

视频链接&#xff1a;6 循环神经网络_哔哩哔哩_bilibili 给神经网络增加记忆能力 对全连接层而言&#xff0c;输入输出的维数固定&#xff0c;因此无法处理序列信息 对卷积层而言&#xff0c;因为卷积核的参数是共享的&#xff0c;所以卷积操作与序列的长度无关。但是因为卷积…...

编程日记 2023/12/2 8:49:50

与原有视频会议系统对接

要实现与原有视频会议系统对接&#xff0c;需要确保通信协议的一致性。连通宝视频会议系统可与第三方视频会议系统对接。实现与第三方会议系统对接还可以使用会议室连接器&#xff0c;可以确保不同系统之间的数据传输和交互。 具体对接流程可能因不同品牌和类型的视频会议系统而…...

编程日记 2023/12/2 8:48:48

C# Serilog--可记录异常完整路径

1.Serilog安装 2.控制台代码 --设置日志记录器的最小级别为 Debug&#xff0c;即只记录 Debug 级别及以上的日志信息 --.WriteTo.File("logs\\log.txt", rollingInterval: RollingInterval.Day)&#xff1a;将日志信息写入到指定路径的文件中&#xff08;这里的路径…...

编程日记 2023/12/2 8:44:45

鉴源实验室 | 汽车网络安全攻击实例解析(三)

作者 | 张璇 上海控安可信软件创新研究院工控网络安全组 来源 | 鉴源实验室 社群 | 添加微信号“TICPShanghai”加入“上海控安51fusa安全社区” 引言&#xff1a;随着现代汽车技术的迅速发展&#xff0c;车辆的进入和启动方式经历了显著的演变。传统的物理钥匙逐渐被无钥匙进…...

编程日记 2023/12/2 8:43:44

php 中生成订单号

字母日期。。。。。。。 function setOrderNo($year 2011) {$yCode array(A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z);$orderSn $yCode[intval(date(Y)) - $year] . strtoupper(dechex(date(m))) . date(d) . substr(time(), -5) . s…...

编程日记 2023/12/2 8:40:41

Jmeter工具+ant+jenkins实现持续集成

jmeterantjenkins持续集成 一、下载并配置jmeter 首先下载jmeter工具&#xff0c;并配置好环境变量&#xff1b;参考&#xff1a; jmeter默认保存的是.jtl格式的文件&#xff0c;要设置一下bin/jmeter.properties,文件内容&#xff0c;保存jmeter.save.saveservice.output_f…...

编程日记 2023/12/2 8:38:40