拥有DOM力量的你究竟可以干什么

news2024/12/23 15:03:20

如果你希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始！

查找HTML元素

document.getElementById(id)                                通过元素 id 来查找元素
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<div id="myDiv">Hello, world!</div>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
  var myDiv = document.getElementById("myDiv");
  console.log(myDiv);  // 输出 <div id="myDiv">Hello, world!</div>
</script>
</body>
</html>
document.getElementsByTagName(name)          通过标签名来查找元素

这个方法接收一个参数 name，该参数是一个字符串，表示你想要选择的元素的标签名称

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<p>一段话</p>
<p>一段话1</p>
<p>一段话2</p>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
  var p = document.getElementsByTagName("p");
  console.log(p);
  console.log(p[1]);
</script>
</body>
</html>

返回的 NodeList 对象是一个“类数组”，可以像数组一样使用。你可以通过索引访问特定的元素，例如，document.getElementsByTagName("p")[0] 将返回第一个 <p> 元素

需要注意的是，NodeList 是“静态的”，也就是说，它并不会反映后续对文档的修改。如果在后续对文档进行了修改（例如，添加或删除了元素），那么你需要再次调用 getElementsByTagName 来获取最新的元素（查找HTML元素的方法的性质都类似，类比即可！）

document.getElementsByClassName(name)通过类名来查找元素
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button class="btn">我是按钮</button>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var btn = document.getElementsByClassName("btn");
    console.log(btn);
</script>
</body>
</html>
document.querySelector(CSS选择器)                                        通过CSS选择器选择一个元素
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button class="btn">我是按钮</button>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var btn = document.querySelector(".btn");
    console.log(btn);
</script>
</body>
</html>
document.querySelectorAll(CSS选择器)                                    通过CSS选择器选择多个元素
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul class="list">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var list = document.querySelectorAll(".list li");
    console.log(list);
</script>
</body>
</html>

获取HTML元素的值

元素节点.innerText获取 HTML元素的 inner Text
元素节点.innerHTIML获取 HTML元素的 inner HTML
元素节点.属性获取 HTIML 元素的属性值
元素节点getAttribute(attribute)获取 HTIML 元素的属性值
元素节点style.样式获取 HTML 元素的行内样式值
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<a ID="a" href="https://www.csdn.net/">CSDN</a>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
  var a = document.getElementById("a");
  console.log(a.innerText);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box">
    <h1>我是Box中的大标题</h1>
</div>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var box = document.getElementById("box");
    console.log(box.innerHTML);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<a ID="a" href="https://www.csdn.net/">CSDN</a>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
  var a = document.getElementById("a");
  console.log(a.href);
  console.log(a.getAttribute("href");
  console.log(a.getAttribute(""));
<!-- 创建一个超链接，默认为空，设置href属性为https://www.csdn.net/ ，使用JavaScript代码读取href属性-->
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<div style="width: 100px;height: 100px;background: red;" id="box"></div>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
  var box = document.getElementById("box");
  console.log(box.style.width);
</script>
</body>
</html>

小知识：

如果CSS的样式名中含有-，这种名称在JS中是不合法的比如background-color，需要将这种样式名修改为驼峰命名法，去掉-，然后将 - 后的字母大写，我们通过style属性设置的样式都是行内样式，同样的获取也是行内样式，而行内样式有较高的优先级，所以通过JS修改的样式往往会立即显示，但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加!important

改变HTML的值

元素节点.innerText = new text content改变元素的 inner Text
元素节点.innerHTML = new html content改变元素的 inner HTML
元素节点.属性 = new value改变 HTML 元素的属性值
元素节点.setAttribute(attribute, value)改变 HTML 元素的属性值
元素节点.style.样式 = new style改变 HTML 元素的行内样式值
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">我是按钮</button>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var btn = document.getElementById("btn");
    btn.innerText = "我是JavaScript的按钮";
    console.log(btn);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box"></div>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var box = document.getElementById("box");
    box.innerHTML = "<h1>我是Box中的大标题</h1>";
    console.log(box);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<a id="a" href="">打开百度，你就知道！</a>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var a = document.getElementById("a");
    a.href="https://www.baidu.com";
    console.log(a);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="width: 100px;height: 100px;background: red;" id="box"></div>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var box = document.getElementById("box");
    box.style.background = "green";
    console.log(box);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<div style="width: 100px;height: 100px;background: red;" id="box"></div>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
  var box = document.getElementById("box");
  box.style.background = "green";
  console.log(box);
</script>
</body>
</html>

添加HTML元素 

document.createElement(element)创建 HTML 元素节点
document.createAttribute(attribute)创建 HTML 属性节点
document.createTextNode(text)创建 HTML 文本节点
元素节点.removeChild(element)删除 HTML 元素
元素节点.appendChild(element)添加 HTML 元素
元素节点.replaceChild(element)替换 HTML 元素
元素节点.insertBefore(element)在指定的子节点前面插入新的子节点

创建不代表是添加到网页上了！！！

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
  var a = document.createElement("a");
  a.href = "https://www.csdn.net";  // 设置链接地址
  var text = document.createTextNode("CSDN");
  a.appendChild(text);  // 将链接文本添加到链接元素中
  document.getElementsByTagName("body")[0].appendChild(a);


  var ul = document.createElement("ul");



  var li1 = document.createElement("li");
  var text1 = document.createTextNode("列表项1");
  li1.appendChild(text1);
  ul.appendChild(li1);

  var li2 = document.createElement("li");
  var text2 = document.createTextNode("列表项2");
  li2.appendChild(text2);
  ul.appendChild(li2);

  var li3 = document.createElement("li");
  var text3 = document.createTextNode("列表项3");
  li3.appendChild(text3);
  ul.appendChild(li3);

  var li4 = document.createElement("li");
  var text4 = document.createTextNode("列表项4");
  li4.appendChild(text4);
  ul.appendChild(li4);

  var li5 = document.createElement("li");
  var text5 = document.createTextNode("列表项5");
  li5.appendChild(text5);
  ul.appendChild(li5);

  document.getElementsByTagName("body")[0].appendChild(ul);
</script>
</body>
</html>

创建一个ul列表，里边有四个li子元素，删除第一个li，替换最后一个li

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul id="ul">
    <li id="first">列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li id="last">列表项4</li>
</ul>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var ul = document.getElementById("ul");
    var first = document.getElementById("first");
    var last = document.getElementById("last");

    /*删除第一个*/
    ul.removeChild(first);

    /*替换最后一个*/
    var replaceLi = document.createElement("li");
    replaceLi.innerHTML = "列表4的替换";
    ul.replaceChild(replaceLi, last);
</script>
</body>
</html>

查找HTML父子元素节点

元素节点.parentNode返回元素的父节点
元素节点.parentElement返回元素的父元素
元素节点.childNodes返回元素的一个子节点的数组（包含空白文本Text节点）
元素节点.children返回元素的一个子元素的集合（不包含空白文本Text节点）
元素节点.firstChild返回元素的第一个子节点（包含空白文本Text节点）
元素节点.firstElementChild返回元素的第一个子元素（不包含空白文本Text节点）
元素节点.lastChild返回元素的最后一个子节点（包含空白文本Text节点）
元素节点.lastElementChild返回元素的最后一个子元素（不包含空白文本Text节点）
元素节点.previousSibling返回某个元素紧接之前节点（包含空白文本Text节点）
元素节点.previousElementSibling返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）
元素节点.nextSibling返回某个元素紧接之后节点（包含空白文本Text节点）
元素节点.nextElementSibling返回指定元素的后一个兄弟元素（相同节点树层中的下一个元素节点）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1145277.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

OSPF 的10种网络类型和5种区域类型

OSPF 的10种网络类型和5种区域类型

10种网络类型&#xff0c;也有称7类的&#xff0c;因为8、9、10类是V3专有的&#xff0c;如下&#xff1a; LSA 类型描述传播范围使用与目的Type 1路由器LSA (Router LSA)区域 (Area)描述路由器连接的直连网络和链路信息&#xff0c;用于建立拓扑图和计算最短路径。Type 2网络…
阅读更多...
Nginx性能优化

Nginx性能优化

简介 nginx作为常用的web代理服务器&#xff0c;某些场景下对于性能要求还是蛮高的&#xff0c;所以本片文章会基于操作系统调度以及网络通信两个角度来讨论一下Nginx性能的优化思路。 基于操作系统调度进行Nginx优化 CPU工作方式 对于用户进程&#xff0c;CPU会按照下面的…
阅读更多...
10个简单好用的Python装饰器

10个简单好用的Python装饰器

_装饰器&#xff08;Decorators&#xff09;_是Python中一种强大而灵活的功能&#xff0c;用于修改或增强函数或类的行为。装饰器本质上是一个函数&#xff0c;它接受另一个函数或类作为参数&#xff0c;并返回一个新的函数或类。它们通常用于在不修改原始代码的情况下添加额外…
阅读更多...
Linux操作系统概述3——进程相关操作讲解（进程概念、xinetd守护进程、进程管理命令）

Linux操作系统概述3——进程相关操作讲解（进程概念、xinetd守护进程、进程管理命令）

目录 进程的概念 程序与进程的关系 进程的分类 守护进程的分类 进程的PID 进程的状态 xinetd 守护进程服务 xinetd基本概念 xinetd工作原理 xinetd相关文件介绍 守护进程的管理命令 chkconfig 命令 service 命令 systemctl命令 查看进程状态相关命令 一般程序处…
阅读更多...
CLIP文章精读

CLIP文章精读

核心&#xff1a; loss的设计&#xff1a;分布针对固定image匹配text和固定text匹配image设计了两个交叉熵loss
阅读更多...
Spring Boot进阶(89)：Spring Boot和Zookeeper搭建分布式系统，提高系统可靠性

Spring Boot进阶(89)：Spring Boot和Zookeeper搭建分布式系统，提高系统可靠性

&#x1f4e3;前言 在当今信息化时代&#xff0c;互联网公司在面对海量访问请求时往往需要采用分布式系统来提高系统的可扩展性和可靠性。分布式系统具有多节点、相互协作的特性&#xff0c;不仅可以提高系统的吞吐量&#xff0c;而且还能在某个节点出现故障时自动切换到其他节…
阅读更多...
APC学习记录

APC学习记录

文章目录 APC概念APC插入、执行过程逆向分析插入过程执行过程总结 代码演示参考资料 APC概念 APC全称叫做异步过程调用&#xff0c;英文名是 Asynchronous Procedure Call&#xff0c;在进行系统调用、线程切换、中断、异常时会进行触发执行的一段代码&#xff0c;其中主要分为…
阅读更多...
【Bond随你温故Kubernetes之】壹图复盘service与内部通信

【Bond随你温故Kubernetes之】壹图复盘service与内部通信

最近跟朋友聊到了k8s 我&#xff1a; “环境给了就只管用呗&#xff0c;副本自动管理地妥妥的&#xff0c;有啥可以复盘的&#xff1f;“ 朋友&#xff1a; “容器的通讯与服务暴露还是有点东西的” 我&#xff1a; “嗯&#xff5e;&#xff5e;&#xff08;抿嘴点…
阅读更多...
Android S从桌面点击图标启动APP流程 (六)

Android S从桌面点击图标启动APP流程 (六)

系列文章 Android S从桌面点击图标启动APP流程 (一)Android S从桌面点击图标启动APP流程 (二) Android S从桌面点击图标启动APP流程 (三) Android S从桌面点击图标启动APP流程 (四) Android S从桌面点击图标启动APP流程 (五) Android 12的源码链接&#xff1a; android 1…
阅读更多...
基于Or-Tools的指派问题建模求解（PythonAPI）

基于Or-Tools的指派问题建模求解（PythonAPI）

基于Or-Tools的指派问题建模求解&#xff08;PythonAPI&#xff09; 指派问题&#xff08;又称为分配问题&#xff0c;assignment problem&#xff09;基于Or-Tools的指派问题建模求解&#xff08;PythonAPI&#xff09;导入pywraplp库数据准备声明MIP求解器初始化决策变量初始…
阅读更多...
自然语言处理 （NLP） 简介

自然语言处理 （NLP） 简介

自然语言处理 &#xff08;Natural Language Processing NLP&#xff09; 简介 本课程是关于NLP 101的4部分系列中的第1部分&#xff1a; 自然语言处理导论&#xff08;今天的教程&#xff09;BagofWords模型简介Word2Vec&#xff1a;自然语言处理中嵌入的研究BagofWords与Wo…
阅读更多...
3年轻量：腾讯云轻量2核2G4M应用服务器366三年！

3年轻量：腾讯云轻量2核2G4M应用服务器366三年！

腾讯云轻量应用服务器三年特价&#xff0c;3年轻量2核2G4M服务器&#xff0c;2023双十一优惠价格366元三年&#xff0c;自带4M公网带宽&#xff0c;下载速度可达512KB/秒&#xff0c;300GB月流量&#xff0c;50GB SSD盘系统盘&#xff0c;阿腾云atengyun.com分享腾讯云轻量2核2…
阅读更多...
apk反编译修改教程系列-----修改apk中的图片 任意更换apk桌面图片【三】

apk反编译修改教程系列-----修改apk中的图片 任意更换apk桌面图片【三】

往期教程&#xff1a; apk反编译修改教程系列-----修改apk应用名称 任意修改名称 签名【一】 apk反编译修改教程系列-----任意修改apk版本号 版本名 防止自动更新【二】 这次实例演示下如何更换apk安装后的桌面图标图片。其实这个步骤前面我有一个教程贴。这次针对步骤做个补…
阅读更多...
C++初阶-类和对象（中）1

C++初阶-类和对象（中）1

类和对象&#xff08;中&#xff09;1 一、类的6个默认成员函数二、构造函数概念特性 三、析构函数概念特性 四、拷贝构造函数概念特征 一、类的6个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。 空类中真的什么都没有吗&#xff1f;并不是&#xff0c;任何…
阅读更多...
ASP.NET WebApi 极简依赖注入

ASP.NET WebApi 极简依赖注入

文章目录 环境服务类启动项注入使用依赖注入的优点 环境 .NET Core 7.0ASP.NET CoreVisual Studio 2022 服务类 public class T_TempService {public T_TempService(){}public void Test(){}}启动项注入 #region 依赖注入 builder.Services.AddTransient<T_TempService&g…
阅读更多...
【LeetCode力扣】189 53 轮转数组 | 最大子数组和

【LeetCode力扣】189 53 轮转数组 | 最大子数组和

目录 1、189. 轮转数组 1.1、题目介绍 1.2、解题思路 2、53. 最大子数组和 2.1、题目介绍 2.2、解题思路 1、189. 轮转数组 1.1、题目介绍 原题链接&#xff1a;189. 轮转数组 - 力扣&#xff08;LeetCode&#xff09; ​ 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3输…
阅读更多...
Android数据对象序列化原理与应用

Android数据对象序列化原理与应用

序列化与反序列化 序列化是将对象转换为可以存储或传输的格式的过程。在计算机科学中&#xff0c;对象通常是指内存中的数据结构&#xff0c;如数组、列表、字典等。通过序列化&#xff0c;可以将这些对象转换为字节流或文本格式&#xff0c;以便在不同的系统之间进行传输或存…
阅读更多...
ChineseChess4 2023.10.27

ChineseChess4 2023.10.27

中国象棋残局&#xff1a;黑双卒压境&#xff0c;如何破黑中心卒 要么一将黑棋死棋&#xff0c;要么想法子把黑中卒干掉&#xff0c;而且干掉中卒&#xff0c;基本要想用车去抽&#xff0c;也不知道棋局有问题呢&#xff0c;还是怎么回事&#xff0c;没想到。 中国象棋残局模拟…
阅读更多...
重要环节不可忽视，CSS性能优化引领用户体验！

重要环节不可忽视，CSS性能优化引领用户体验！

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 ⭐ 专栏简介 &#x1f4d8; 文章引言 一、前…
阅读更多...
【驱动开发】基于GPIO子系统编写LED驱动，编写应用程序进行测试设置定时器，5秒钟打印一次hello world

【驱动开发】基于GPIO子系统编写LED驱动，编写应用程序进行测试设置定时器，5秒钟打印一次hello world

基于GPIO子系统编写LED驱动&#xff0c;编写应用程序进行测试&#xff0c;设置定时器&#xff0c;5秒钟打印一次hello world 驱动程序&#xff1a; #include <linux/init.h> #include <linux/module.h> #include <linux/of.h> #include <linux/of_gpio.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023