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

document

news 2026/2/11 0:45:26

原贴连接

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

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2026/2/10 7:11:42

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2026/2/7 17:29: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

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2026/2/10 5:21:30

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2026/1/31 14:56:22

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/11/22 12:02:51

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2026/1/26 5:53:30

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2026/1/4 21:36:42

IP如何挑？2025年海外专线IP如何购买？

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

编程新知 2026/1/28 3:04:35

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

编程新知 2025/10/3 0:42:17