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

document

news 2025/7/8 15:41:45

原贴连接

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

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

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

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

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

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

Symbol()和迭代器生成器

目录 1、Symbol（） 2、迭代器生成器执行流程模拟生成器函数 for of 遍历迭代选择器 yield * Generator函数应用 1、Symbol（） 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（简称USB-C）的基本特性： 1. 接口插座的尺寸与原来的Micro-USB规格一样小，约为8.3mm X 2.5mm 2. 可承受1万次反复插拔 3. 支持正反均可插入的“正反…...

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

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

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

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

Pinctrl子系统和GPIO子系统

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

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

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

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

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

Django回顾4

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

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

Apache APISIX 体验指南

APISIX 体验指南所有的 sh 脚本通过 git bash 执行。出现错误仔细核对文档。 github 地址： 使用 docker 安装 apisix 确保本地安装 Docker 和 Docker-compose 如未安装参开以下文档安装： Docker：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

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

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

【linux】日志有哪些

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

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

Redis主从复制实现RCE

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

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

Flutter应用程序的加固原理

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

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

Centos7部署NFS

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

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

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

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

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

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

Spring Cloud 版本升级记：OpenFeignClient与Gateway的爱恨交织近日，在负责的项目中，我对 Spring Boot、Spring Cloud 以及 Spring Cloud Alibaba 进行了版本升级。原以为会一切顺利，没想到却遭遇了 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

synchronized 学习

学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...

编程新知 2025/6/21 18:22:44

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现，展示如何创建和管理多个 OkHttpClient 实例，分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/6/20 19:09:22

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui（适配 Vue2 版本 ）实现截图中照片上传预览、删除功能，并封装成可复用组件的完整代码，包含样式和逻辑实现，可直接在 Vue2 项目中使用： 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/6/17 5:20:48

什么是EULA和DPA

文章目录 EULA（End User License Agreement）DPA（Data Protection Agreement）一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA（End User License Agreement） 定义： EULA即…...

编程新知 2025/7/4 8:55:29

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题：3564. 季节性销售分析题目： 表：sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/6/20 12:42:23