JavaScript(五)---【DOM】

零.前言

JavaScript(一)---【js的两种导入方式、全局作用域、函数作用域、块作用域】-CSDN博客

JavaScript(二)---【js数组、js对象、this指针】-CSDN博客

JavaScript(三)---【this指针，函数定义、Call、Apply、函数绑定、闭包】-CSDN博客

JavaScript(四)---【执行上下文、hoisting(提升)、严格模式、事件】-CSDN博客

一.DOM简介

1.1什么是DOM

当网页被加载时，浏览器会创建页面的文档对象模型，也就是DOM（Document Object Model）

每个HTML都可以被视为一个文档树，DOM为这个文档树提供了一个编程接口，开发者可以使用JS来操作这个树。

1.2文档树能干什么

文档树可以干的事情非常多，基本上所有可以想到的功能，都可以利用JS+文档树来实现。

  • JS能够改变页面中的所有HTML元素
  • JS能够改变页面中的所有HTML属性
  • JS能够改变页面中的所有CSS样式
  • JS能在页面中创建新的HTML事件

二.DOM方法

2.1概括

在DOM中，所有的HTML都被定义为：“对象”，故下文中的所有“对象”都指的是“HTML元素”

另外，在DOM中还有：“方法”、“属性·”两个概念。

“方法”：“指能够在HTML上执行的动作”

“属性”：“能够设置或改变HTML元素的内容(值)”

例如：

    <h1 id="demo"></h1><script>document.getElementById("demo").innerHTML = "这是一个例子."</script>

效果：

其中，“getEelmentById”是一个“方法”，而“innerHTML”是一个“属性”

这段代码的作用就是修改<p>标签的内容

2.2常见的DOM方法【查找】

以下是四种通过不同“关键字”来查找HTML元素的方法

  • document.getElementById(id)：通过元素id来查找
  • document.getElementByTagName(name)：通过标签名来查找
  • document.getElementByClassName(name)：通过类名来查找
  • document.querySelectorAll(id、类名、类型、属性、属性值等等)：通过“CSS选择器” 来查找

值得注意的是：“上述的id和name都必须用双引号包裹”

2.3常见的DOM方法【改变HTML元素】

以下是四种改变HTML元素属性的方法：

  • elements.innerHTML = 新内容：改变元素的内容
  • elements.attribute = 新属性值：改变元素的属性值(这里的attribute是具体的属性名)
  • elements.setAttribute(属性名,新属性值)：改变元素的属性值
  • elements.style.property = 新样式：改变元素的CSS样式

例如，我想要修改<input>输入框的文本类型由“text”变为“password”，可以如下使用：

    <input type="password" id="demo"><script>document.getElementById("demo").type = "password"</script>

2.4常见的DOM方法【添加和删除元素】

以下是五种添加、删除HTML元素的方法：

  • document.createElement(element)：创建HTML元素
  • document.removeChild(element)：删除HTML元素
  • document.appendChild(element)：添加HTML元素
  • document.replaceChild(element)：替换HTML元素
  • document.write(text)：写入HTML输出流

2.5常见的DOM问题

1.NodeList与HTMLCollection

“HTMLCollection”是HTML元素的集合(数组)，而NodeList是“文档节点”集合的一个对象。

这两者几乎相同，但是本质上不同

HTMLColeection是一个数组，可以使用数组的方法来对它修改，如“pop()、join()”方法等

但是NodeList是一个文档节点总和的对象，这个对象无法使用数组的方法

同时NodeList只能使用下标来访问内部元素，而HTMLCollection可以使用“下标索引、元素名、id”

我们用一个例子来说明两者区别：

<body><h1 class="sample">Hello World</h1><h1 class="sample">这是一个例子</h1><h1 class="sample">这是一个例子</h1><p id="sample"></p><script>var list = [1,2,3,4,5,6]var x = document.querySelectorAll("h1.sample");console.log(list);console.log(x);</script>
</body>

 效果：

注意到两者的“Prototype”类型，一个是“Array”数组，另一个是“NodeList” 对象

2.使用“类名”、“标签名”查询返回的是一个“数组”

在使用“类名”、“标签名”来查询元素时，返回的是一个包含“所有符合条件”的元素的“NodeLsit”。
例如我们使用“标签名”查询

<body><h1>我是第一个h1标签</h1><h1>我是第二个h1标签</h1><h1>我是第三个h1标签</h1><h1>我是第四个h1标签</h1><h1>我是第五个h1标签</h1><script>var x = document.getElementsByTagName("h1");console.log(x);</script>
</body>

效果：

3.使用document.createElement()创建节点时

对于任何一个元素，它由两部分组成：“元素节点”和“文本节点”

“元素节点”：“代表这个元素”

“文本节点”：“元素内的内容”

我们可以使用“document.createTextNode”来创建一个文本节点，再把这个节点添加到我们的元素节点中即可

<body><h1>我是第一个h1标签</h1><h1>我是第二个h1标签</h1><h1>我是第三个h1标签</h1><h1>我是第四个h1标签</h1><h1>我是第五个h1标签</h1><script>var body = document.getElementsByTagName("body")[0]var x = document.createElement("p");var node = document.createTextNode("这是一个由JS生成的p标签");x.appendChild(node);body.appendChild(x);</script>
</body>

效果：

4.使用CSS选择器查找标签时

使用CSS选择器查找符合条件的标签时，返回的是一个“所有符合条件”的"NodeList"。

例如：

<body><h1 class="sample">Hello World</h1><h1 class="sample">这是一个例子</h1><h1 class="sample">这是一个例子</h1><p id="sample"></p><script>var x = document.querySelectorAll("h1.sample");console.log(x);</script>
<body>

结果：

通过NodeList，我们可以实现一些功能：

<body><h1 class="sample">Hello World</h1><h1 class="sample">这是一个例子</h1><h1 class="sample">这是一个例子</h1><p id="sample"></p><script>var x = document.querySelectorAll("h1.sample");console.log(x);</script><script>var text = "";for(let i = 0;i < x.length;i++){text += x[i].innerHTML + "<br>";}document.getElementById("sample").innerHTML = text;</script>
</body>

效果：

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

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

相关文章

[蓝桥杯练习]通电

[蓝桥杯练习]通电

kruskal做法(加边) #include <bits/stdc.h> using namespace std; int x[10005],y[10005],z[10005];//存储i点的x与y坐标 int bcj[10005];//并查集 struct Edge{//边 int v1,v2; double w; }edge[2000005]; int cmp(Edge a, Edge b){return a.w < b.w;} int find(i…
阅读更多...
奇异值分解及MATLAB实现

奇异值分解及MATLAB实现

svd分解基本改变 奇异值分解（Singular Value Decomposition，简称SVD）是线性代数中的一种重要技术，广泛应用于信号处理、统计学、语义分析、图像处理等多个领域。SVD不仅仅是一种数学工具，它提供了一种深入理解数据结构和解决问题的方法。接下来，我们将深入探讨SVD的概念…
阅读更多...
.pth文件转化为onnx文件，并进行可视化

.pth文件转化为onnx文件，并进行可视化

1、文件转化 import torch.onnx from torchvision import models from onnxsim import simplify import onnx torch_model torch.load("D:\checkpoint-epoch40.pth",map_locationcpu) # pytorch模型加载 model models.resnet50() # model.load_state_dict(torch_…
阅读更多...
用C++编写“多功能双人五子棋”游戏

用C++编写“多功能双人五子棋”游戏

当用C编写一款五子棋游戏时&#xff0c;可以按照以下步骤进行&#xff1a; 创建一个棋盘&#xff1a;使用二维数组来表示棋盘&#xff0c;每个元素代表一个位置&#xff0c;可以使用数字或字符来表示空位、黑子和白子。 实现游戏规则&#xff1a;根据五子棋的规则&#xff0c;…
阅读更多...
代码随想录算法训练营第二十八天（回溯4）|93. 复原 IP 地址、78. 子集、90. 子集 II(JAVA)

代码随想录算法训练营第二十八天（回溯4）|93. 复原 IP 地址、78. 子集、90. 子集 II(JAVA)

文章目录 93. 复原 IP 地址解题思路源码 78. 子集解题思路源码 90. 子集 II解题思路源码 93. 复原 IP 地址 有效 IP 地址 正好由四个整数&#xff08;每个整数位于 0 到 255 之间组成&#xff0c;且不能含有前导 0&#xff09;&#xff0c;整数之间用 ‘.’ 分隔。 例如&…
阅读更多...
什么是Redis数据一致性？如何解决？

什么是Redis数据一致性？如何解决？

在系统中缓存最常用的策略是&#xff1a;服务端需要同时维护DB和cache&#xff0c;并且是以DB的结果为准–Cache-Aside Pattern&#xff08;缓存分离模式、旁路缓存&#xff09; 读数据 单纯的读数据是不会产生数据不一致&#xff0c;只有并发下读和写才会存在数据不一致。 写…
阅读更多...
python2.7+rf框架搭建

python2.7+rf框架搭建

一 下载pycharm 可下载最新版&#xff1a;https://www.jetbrains.com/pycharm/download/#sectionwindows 新建项目时需要关联python2.7&#xff0c;这个必须要python2.7安装好之后关联才生效&#xff0c;若也关联了&#xff0c;但创建项目后有弹框显示类似“项目创建失败”的提…
阅读更多...
人工智能常用的编程语言有哪些？

人工智能常用的编程语言有哪些？

人工智能常用的编程语言包括Python、Java、C、R、Lisp和Prolog等。具体选择取决于项目需求、技术背景和性能要求。 Python是AI领域的明星语言&#xff0c;由于其简洁易懂的语法、丰富的库支持以及庞大的社区资源&#xff0c;适用于机器学习、深度学习和自然语言处理等领域。 …
阅读更多...
千万级数据用什么数据结构判断某个数据是否存在？

千万级数据用什么数据结构判断某个数据是否存在？

面试题&#xff0c;如何在千万级的数据中判断一个值是否存在&#xff1f;-腾讯云开发者社区-腾讯云 (tencent.com) 使用布隆过滤器。 数组大小和hash函数数量如何确定&#xff1f; 通过公式可以得出&#xff08;与log2有关&#xff09; 使用什么hash函数&#xff1f; murm…
阅读更多...
算法练习第四十二天|01背包问题、416. 分割等和子集

算法练习第四十二天|01背包问题、416. 分割等和子集

一些背包问题 01背包问题 题目描述 小明是一位科学家&#xff0c;他需要参加一场重要的国际科学大会&#xff0c;以展示自己的最新研究成果。他需要带一些研究材料&#xff0c;但是他的行李箱空间有限。这些研究材料包括实验设备、文献资料和实验样本等等&#xff0c;它们各自…
阅读更多...
nvme协议学习总结

nvme协议学习总结

一、nvme命令 1 nvme在pcie基础上的协议&#xff0c;与PCIE配合&#xff0c;实现高效传输。 2 nvme命令主要分IO命令和admin命令。 3 一个NVME CMD执行流程&#xff1a; step1&#xff1a;host把cmd写入SQ queue中&#xff1b; step2&#xff1a;host远端更新Device&#x…
阅读更多...
如何优化Java程序的性能？

如何优化Java程序的性能？

优化Java程序的性能是一个多方面的任务&#xff0c;它涉及到代码设计、算法选择、内存管理、并发处理等多个方面。以下是一些建议&#xff0c;帮助你优化Java程序的性能&#xff1a; 一、代码和算法优化 1、选择合适的数据结构和算法&#xff1a;确保你的代码使用了最有效的数…
阅读更多...
C++从入门到精通——nullptr

C++从入门到精通——nullptr

nullptr 前言一、指针空值NULL二、指针空值nullptr(C11)C98中的指针空值 三、NULL与nullptr的区别总结 前言 nullptr是C11引入的一个新特性&#xff0c;用于表示空指针。它提供了一种类型安全的方式来区分空指针和非空指针&#xff0c;避免了传统空指针&#xff08;如NULL或0&…
阅读更多...
BIT-5-动态内存管理（C语言进阶）

BIT-5-动态内存管理（C语言进阶）

本章重点 为什么存在动态内存分配动态内存函数的介绍 mallocfreecallocrealloc常见的动态内存错误几个经典的笔试题柔性数组 1. 为什么存在动态内存分配 我们已经掌握的内存开辟方式有&#xff1a; int val 20;//在栈空间上开辟四个字节 char arr[10] {0};//在栈空间上开辟…
阅读更多...
华为OD面试手撕算法-字符串压缩

华为OD面试手撕算法-字符串压缩

题目描述 本题是leetcode原题&#xff1a;字符串压缩 字符串压缩。利用字符重复出现的次数&#xff0c;编写一种方法&#xff0c;实现基本的字符串压缩功能。比如&#xff0c;字符串"aabcccccaaa"会变为"a2b1c5a3"。若“压缩”后的字符串没有变短&#xf…
阅读更多...
瑞吉外卖实战学习--12、分类管理的修改和删除接口实现

瑞吉外卖实战学习--12、分类管理的修改和删除接口实现

分类管理的修改和删除的接口实现 前言获取接口的方法修改接口的连接请求方式和参数删除接口的连接请求方式和参数 实现接口 前言 本篇实现分类的管理的修改和删除接口&#xff0c;在平时项目中最常用的就是增删改查接口&#xff0c;通过页面来的到请求的接口和方法然后通过创建…
阅读更多...
在Java中对SQL进行常规操作的通用方法

在Java中对SQL进行常规操作的通用方法

SQL通用方法 一、常规方法增删改查二、具体优化步骤1.准备工作2.getcon()方法&#xff0c;获取数据库连接对象3.closeAll()方法&#xff0c;关闭所有资源4.通用的增删改方法5.通用的查询方法6.动态查询语句 总结 一、常规方法增删改查 在常规方法中&#xff0c;我们在Java中对…
阅读更多...
建独立站，对FP商家有什么好处？

建独立站，对FP商家有什么好处？

2024年都过去四分之一了&#xff0c;还有许多人对是否投身于跨境独立站领域仍犹豫不决。然而&#xff0c;观望不如实践&#xff0c;如果渴望在跨境电商领域开创一片新天地&#xff0c;那么现在就是行动的最佳时机。 特别是对于FP商家来说&#xff0c;由于电商平台对于黑五类产品…
阅读更多...
数据挖掘|贝叶斯分类器及其Python实现

数据挖掘|贝叶斯分类器及其Python实现

分类分析|贝叶斯分类器及其Python实现 0. 分类分析概述1. Logistics回归模型2. 贝叶斯分类器2.1 贝叶斯定理2.2 朴素贝叶斯分类器2.2.1 高斯朴素贝叶斯分类器2.2.2 多项式朴素贝叶斯分类器 2.3 朴素贝叶斯分类的主要优点2.4 朴素贝叶斯分类的主要缺点 3. 贝叶斯分类器在生产中的…
阅读更多...
滑动窗口最大值_单调队列_java

滑动窗口最大值_单调队列_java

滑动窗口最大值 leetcode链接 问题描述 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 提示&#xff1a; 1 < nums…
阅读更多...
最新文章

Copyright @ 2022~2023