JavaScript—DomApi

最新推荐文章于 2024-07-24 16:20:17 发布
最新推荐文章于 2024-07-24 16:20:17 发布
阅读量231 收藏 6
点赞数 7
分类专栏： 前端 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74365243/article/details/131395384
版权

DomApi

DomApi 有很多
本文列举一些较为常见的 Api

🔎Dom


Dom(Document Object Model)—文档对象模型

通过 Dom(文档对象模型), 可以把 html 上的每个标签映射到 JavaScript 中的一个对应对象

即

  • 标签上显示的内容可通过 JavaScript 对象获取
  • JavaScript 对象修改对应属性时会影响标签的展示

🔎Dom树


在这里插入图片描述

图片来自网络

  • 文档, 一个页面就是一个文档, 使用 document 表示
  • 元素, 页面中的所有标签称为元素, 使用 element 表示
  • 节点, 页面中的所有内容称为节点(标签, 注释, 文本, 属性…), 使用 node 表示

🔎Dom—querySelector(获取元素)


获取单个元素querySelector(CSS选择器)
获取全部元素querySelectorAll(CSS选择器)

较为常见的CSS选择器

  1. 类选择器
  2. Id 选择器
  3. 后代选择器
  4. 标签选择器

举个栗子🌰

<body>
	<div class="class">abc</div>
	<div id="id">def</div>
	<h3>
		<span>
			<input type="text">
		</span>
	</h3>
	
	<script>
		let elem1 = document.querySelector('.class'); // 类选择器
		let elem2 = document.querySelector('#id'); // Id 选择器
		let elem3 = document.querySelector('h3>span>input'); // 后代选择器
		let elem4 = document.querySelector('input'); // 标签选择器
	</script>	
</body>

注意🍂

当程序中出现多个相同 Id 时(其他同理), 使用querySelector(Id 选择器)会选择第一个出现的 Id

例如

<div id="id">aaa</div>
<div id="id">bbb</div>
<div id="id">ccc</div>

使用querySelector('#id')选择的内容为aaa
想要全部选中可以使用querySelectorAll('#id')

🔎事件


事件
针对用户操作进行的一些响应

事件的三要素


  1. 事件源: 哪个元素产生的事件
  2. 事件类型: 单击, 双击, 移动, 按键盘…
  3. 事件处理程序: 事件发生之后, 要执行哪个代码(要执行的代码是提前设定好的)

🔎操作元素


获取 / 修改元素内容


利用innerHTML获取 / 修改元素内容

innerHTML → 得到标签中的内容(开始标签和结束标签中间夹杂着的那部分)

举个栗子🌰

<p>hello</p>
利用innerHTML获取到的即为 hello

针对如下代码

利用innerHTML获取 / 修改元素内容

<body>

	<div class="box">abc</div>
	
	<script>
		
		let div = document.querySelector('.box');
		div.onclick = function() {
			// 获取元素内容
			console.log(div.innerHTML);
			// 修改元素内容
			div.innerHTML += 'a';
		}
		
	</script>
	
</body>

获取 / 修改元素属性


HTML 标签的属性, 会映射到 JavaScript 对象中

通过console.dir()查看元素的属性

以图片为例

其中包含较多的属性

在这里插入图片描述

获取元素属性 → 获取图片的高度, 宽度, 标题…
修改元素属性 → 点击该图片时切换到预设的另一张图片

完整代码🍂

<body>

	<img src="4.png" title="金鱼姬">
	
	<script>
		
		let img = document.querySelector('img');
		// console.dir(img);
		img.onclick = function() {
			console.log(img.width);
			console.log(img.height);
			console.log(img.title);
			img.src="5.png";
		}
		
	</script>
	
</body>

获取 / 修改表单元素属性


表单元素(input, textarea, select…)有一些普通标签没有的属性

例如

  • value, input 的值
  • checked, 复选框中使用(表示默认被选中的状态)
  • type, 种类(包括 button, checkbox, text, file…)
  • …

获取 / 修改表单元素属性🍭

以 value 为例
在输入框输入一个数字后, 点击按钮
打印该数字(获取表单元素属性)
修改当前数字 + 1(修改表单元素属性)

<body>

	<input type="text">
	<button>按钮</button>
	
	<script>
			
		let input = document.querySelector('input');
		button.onclick = function() {
			
			input.value = parseInt(input.value) + 1;
			console.log(input.value);
			
		}
		
	</script>

</body>

在这里插入图片描述

在这里插入图片描述

获取 / 修改样式属性


获取 / 修改样式属性分为 2 种

  1. 修改内联样式(修改 style 属性的值)
  2. 修改元素应用的 CSS 类名

修改内联样式


举个栗子🌰

一段文字的初始大小为 20px, 点击该文字其大小增加 10px

<body>
		
	<div style="font-size: 20px;">这是一个div, 点击之后字体放大</div>
	
	<script>
	
		let div = document.querySelector('div');
		div.onclick = function() {
			let fontSize = div.style.fontSize;
			fontSize = parseInt(fontSize) + 10;
			div.style.fontSize = fontSize + 'px';
		}
		
	</script>
	
</body>

修改元素应用的 CSS 类名


举个栗子🌰

设计两种 CSS 样式, 分别是日间模式与夜间模式

初始化一个 div, 默认模式为日间模式, 点击时在两种模式之间切换

<body>

	<style>
		
		.light {
			/* 日间模式 */
			color: antiquewhite;
			background-color: black;
		}
		
		.dark {
			/* 夜间模式 */
			color: black;
			background-color: antiquewhite;
			
		}
		
	</style>
	
	<div class="light" style="font-size: 20px; height: 300px;">这是一个div</div>
	
	<script>
	
		let div = document.querySelector('div');
		div.onclick = function() {
			div.className = div.className == "light" ? "dark" : "light";
		}

	</script>
	
</body>

在这里插入图片描述
在这里插入图片描述

🔎操作节点


新增节点
创建元素节点 → createElement() / 将新创建的节点挂到 Dom 树 → appendChild()

删除节点
从 Dom 树移除新创建的节点 → removeChild()

新增节点


新增节点分为 2 个步骤

  1. 创建元素节点
  2. 将新创建的节点挂到 Dom 树

举个栗子🌰

创建一个 div
创建元素节点为 input, 在 input 中输入 hello_bibubibu
将新创建的节点挂到 div

<body>
		
	<div class="one">
		这是一个 div
	</div>
	
	<script>
		
		let input = document.createElement('input');
		// 输入框默认显示 hello_bibubibu 
		input.value = 'hello_bibubibu';
		let div = document.querySelector('.one');
		div.appendChild(input);
		
	</script>
	
</body>

在这里插入图片描述

删除节点


针对上述代码添加div.removeChild(input);即可

在这里插入图片描述

🔎总结


  1. 选中元素 → querySelector() / querySelectorAll()
  2. 事件(鼠标单击) → onclick
  3. 修改元素内容 → innerHTML
  4. 修改元素属性 → 利用console.dir()查看元素属性
  5. 修改表单元素属性 → value, checked, type...
  6. 修改样式属性 → 内联样式 / 元素应用的 CSS 类名
  7. 创建元素 → createElement()
  8. 添加节点(将元素挂到 Dom 树) → appendChild()
  9. 删除节点(从 Dom 树移除元素) → removeChild()
哔卟哔卟_: )
关注
  • 7
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
JavaScript —— DOM
IF
03-07 214
概念：Document Object Model 文档对象模型 * 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。 * DOM 将 HTML 文档表达为树结构，称为DOM树。 什么是DOM？ DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型 （DOM） 是中立于平台和...
JavaScript — DOM
gxll499294075的博客
03-19 374
一、Web APIs 简介 1.1 Web APIs 和 JS基础关联性 1.1.1 JS组成 1.1.2 JS基础阶段以及 Web APIs阶段 JS基础阶段 学习的是ECMAScript 标准规定的基本语法 掌握js基本语法 只学习语法，做不了常用的网页交互效果 目的是为了JS后面的课程打基础、做铺垫 Web APIs 阶段 Web APIs 是 w3c 组织的标准 Web APIs 主要学习 DOM 和 BOM Web APIs 是 JS 所独有的部分 主要学习页面的交互功
JavaScript DOM API的使用
trong_ 的烂笔头
03-08 2878
JavaScript主要由ECMAScriptDOMBOM这三部分组成;我们要知道要完成一个程序, 光有语法是远远不够的, 对于JS来说, 除JS语法(ES)外, 还需要掌握一些WebAPI, 这些API是浏览器给JS代码提供的功能, 即DOM和BOM;DOM是页面文档对象模型, 可以对页面中的元素进行操作, 而BOM是浏览器对象模型, 可以对浏览器窗口进行操作, 本篇博客中主要介绍的就是DOM.
JavaScript DOM API
TAINK
10-03 75
net address:   http://krook.org/jsdom/
JavaScript DOM API中append和appendChild的不同点
七七的博客
09-28 912
append 接受Node对象和DOMString，而 .appendChild 只接受Node对象。与 .append 方法类似，该方法用于DOM中的元素，但在这种情况下，只接受一个Node对象。在可以使用 appendChild 的情况下，可以使用 append，但反过来不行。.append 没有返回值，而 .appendChild 返回附加的Node对象。这会将子元素追加到 div 元素，然后 div 看起来像这样。这会将子元素追加到 div 元素，然后 div 看起来像这样。
javascript dom api
06-28
这个.chm文件"jsdom.chm"应该包含了JavaScript DOM API的详细解释和示例，涵盖了以上所有知识点，是学习和查找DOM API的实用工具。通过深入学习和实践，开发者可以熟练掌握DOM操作，提升网页动态化和交互性设计的...
javascript 常用DomAPI总结
07-28
javascript 常用DomAPI总结
javaScript api
11-03
JavaScript API 包含了对DOM（Document Object Model）的操作、事件处理、AJAX（异步JavaScript和XML）请求、BOM（Browser Object Model）以及各种浏览器特定的API。 1. DOM操作：JavaScript API允许开发者通过DOM...
javascript-api
10-17
2. JavaScript框架和库的API：例如jQuery提供了简便的DOM操作、动画效果和Ajax交互；React.js 提供了组件化开发和虚拟DOM的概念；Vue.js 提供了响应式的数据绑定和指令系统。 3. Web APIs：如Fetch API用于异步获取...
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 399
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
Next.js静态导出与动态路由优化
天涯学馆
07-20 1053
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
【React 】开发环境搭建详细指南
lph159的博客
07-24 828
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 991
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE中的重点*
qq_61132537的博客
07-22 894
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 985
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
vue如何解决跨域？
FENGZXCjjjjj的博客
07-21 501
在Vue.js项目中，当你的前端应用尝试从与自身不同源的服务器（协议、域名、端口中的任一不同）加载资源时，可能会遇到跨域（CORS, Cross-Origin Resource Sharing）问题。
thinkphp8结合layui2.9 图片上传验证
quweiie的专栏
07-21 302
thinkphp8图片上传的验证
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
最新发布
KenkoTech的博客
07-24 337
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
JavaScript DOM API 在哪查看
03-02
JavaScript DOM API 可以在 Mozilla Developer Network (MDN) 的文档中心查看。您可以访问 https://developer.mozilla.org/en-US/docs/Web/API 来查找所有可用的 DOM API，也可以使用搜索框来查找特定的 API。该网站...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值