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

document

news 2026/5/21 20:31:30

原贴连接

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

第八篇：《软件测试的经济学：投入与回报》

在商业环境中&#xff0c;测试不是“免费”的——它需要人力、工具、时间。但缺陷也不是免费的——它可能导致损失、赔偿、用户流失。如何让管理者理解“投入测试是投资&#xff0c;而不是成本”&#xff1f;本文将从经济学角度分析测试的投资回报率&#xff08;ROI&#xff09…...

编程新知 2026/5/21 20:09:29

备考执业兽医考试哪里有免费资料可以领？

备战执业兽医考试&#xff0c;是不是还在四处搜罗备考资料&#xff1f;网上资源杂乱老旧、版本参差不齐&#xff0c;要么内容不全&#xff0c;要么找不到重点&#xff0c;浪费大把时间还没头绪。不用再盲目翻找、费心整理了&#xff01;给大家推荐一个能免费领执业兽医全科资料…...

编程新知 2026/5/21 19:36:24

RT-DETRv2训练自定义数据集的排坑全记录

RT-DETRv2训练自定义数据集的排坑全记录 最近在使用lyuwenyu/RT-DETR的PyTorch版本训练自定义缺陷检测数据集&#xff0c;从启动报错到成功训练&#xff0c;踩了不少典型的“新手坑”&#xff0c;这里把完整的排坑过程和解决方案整理出来&#xff0c;帮大家一次性避坑&#xff…...

编程新知 2026/5/21 18:53:24

鸿蒙PC中获取并使用DevEco Studio

鸿蒙PC中获取并使用DevEco Studio 一、前言 本文由 AtomCode 协助润色 随着鸿蒙生态的不断扩展&#xff0c;DevEco Studio 也推出了适配鸿蒙 PC 的预览版本。本文将详细介绍如何申请公测名额、下载安装 DevEco Studio&#xff0c;以及创建/导入项目并安装到鸿蒙设备。 前置条…...

编程新知 2026/5/21 18:51:20

Wordpress网站使用siteground security optimizer 及 translatepress多语言插件的翻译问题

问题&#xff1a;发现有的页面翻译出错&#xff0c;如下图&#xff1a;经排查&#xff0c;原因是 SiteGround 主机安全插件中的“锁定并保护系统文件夹”功能&#xff0c;阻止了 TranslatePress 插件的 trp-ajax.php 文件正常执行。解决方法&#xff1a;将 trp-ajax.php 加入白…...

编程新知 2026/5/21 18:49:13

7天职场内耗清零打卡计划

7天职场内耗清零打卡计划&#xff08;极简好坚持&#xff09;每天 3 件小事&#xff0c;不累不费脑&#xff0c;7 天稳住心态第一天&#xff1a;断胡思乱想别人随口一句话&#xff0c;当场听完就翻篇&#xff0c;绝不反复琢磨上班只盯自己手头事&#xff0c;不偷看别人忙不忙、…...

编程新知 2026/5/21 15:35:35

7.1 DRAM Basics: Internals, Operation

这两段截图是《Memory Systems》一书中关于 DRAM 最基础定义的阐述。我为您提供翻译和深度解读： 1. 中文翻译 图1： 随机存取存储器（RAM）如果每一位使用一个单一的晶体管-电容器对，则被称为动态随机存取存储器（DRAM）。图 7.3 在右下角展示了 DRAM 存储单元的电路。这个电…...

编程新知 2026/5/21 14:55:28

Android FLAG_SECURE限制突破：如何让所有应用都能自由截屏？

Android FLAG_SECURE限制突破&#xff1a;如何让所有应用都能自由截屏&#xff1f; 【免费下载链接】DisableFlagSecure 项目地址: https://gitcode.com/gh_mirrors/dis/DisableFlagSecure 在Android应用开发中&#xff0c;FLAG_SECURE标志常常让用户感到困扰——当你需…...

编程新知 2026/5/21 13:15:15

Photoshop图层批量导出终极指南：告别手动操作，提升10倍工作效率

Photoshop图层批量导出终极指南&#xff1a;告别手动操作&#xff0c;提升10倍工作效率 【免费下载链接】Photoshop-Export-Layers-to-Files-Fast This script allows you to export your layers as individual files at a speed much faster than the built-in script from Ad…...

编程新知 2026/5/21 12:52:48

台州华声汽车音响改装店推荐，资深玩家都去这几家

在汽车音响改装领域&#xff0c;选择一家靠谱的门店&#xff0c;往往比挑选器材本身更考验车主的眼光。对于追求极致听感的资深玩家而言&#xff0c;改装的成败不仅取决于喇叭、功放等硬件的参数&#xff0c;更在于安装工艺、声学调校与项目统筹能力。近期&#xff0c;笔者深度…...

编程新知 2026/5/21 12:44:34