JS控制DOM的类及交互深入

最新推荐文章于 2022-04-19 21:41:04 发布
最新推荐文章于 2022-04-19 21:41:04 发布
阅读量162 收藏
点赞数
分类专栏： js7天训练营
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40839934/article/details/86320936
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			htmlbiaoqian111
		</title>
	</head>
	<body>
		<div>1</div>
		<div>2</div>
		<div>3</div>
	<script type="text/javascript">
		var aDiv = document.getElementsByTagName('div');
		aDiv[0].style.color = 'red';
		aDiv[1].style.color = 'green';
		aDiv[2].style.color = '#ccc';
	</script>
	</body>
</html>

id -> document.getElementById('id');

tagName ->标签名 复数

document.getElementsByTagName('tagname');

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			htmlbiaoqian111
		</title>
	</head>
	<body>
		<div class="a1">1</div>
		<div class="a2">2</div>
		<div class="a3d">3</div>
	<script type="text/javascript">
		var aDiv = document.getElementsByClassName('a1');
		aDiv[0].style.color = 'pink';
	</script>
	</body>
</html>

class-->类

document.getElementByClassName（‘ClassName’）;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			htmlbiaoqian111
		</title>
	</head>
	<body>
		<div class="a1">1</div>
		<div class="a2">2</div>
		<div class="a3">3</div>
	<script type="text/javascript">
		var aDiv = document.getElementsByClassName('a1');
		aDiv[0].style.cssText = 'width:300px;height:200px;background:red;color:black';
	</script>
	</body>
</html>

cssText -> 可以像css那样去写代码

innerHTML 可以帮咱们去改变 html里面的内容 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			htmlbiaoqian111
		</title>
	</head>
	<body>
		<div class="a1">1</div>
		<div class="a1">2</div>
		<div class="a1">3</div>
	<script type="text/javascript">
		var aDiv = document.getElementsByClassName('a1');
		aDiv[0].innerHTML = 'Leo课堂';
		setTimeout(function(){
			aDiv[1].innerHTML = '今天是1月11日';
		},1000);
	</script>
	</body>
</html>

 

 

 

星雨流星天
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JS交互篇】DOM操作基础
前端知识分享喵
08-08 275
DOM(Document Object Model)文档对象模型，用来表示和操作html或xml文档内容的基础API;当网页被加载时，浏览器会创建页面的文档对象模型DOM，而DOM模型被构造为对象的树（Dom Html Tree）;DOM包含了所有的html标签元素、文本字符串、甚至是html注释；利用DOM中的属性和方法，使程序有能力动态的访问和更新文档中的内容、结构以及样式，这样就使得页面的交互性大大增强；原生JavaScipt案例合集JavaScript +DOM基础。
深入理解JS DOM事件机制
11-27
JavaScript DOM事件机制是Web开发中的核心概念之一，它关乎如何响应用户与网页元素的交互。在深入理解这一机制前，我们需要了解三个关键术语：事件流、事件冒泡和事件捕获。 1. 事件流： 事件流描述了事件在HTML...
javascript DOM与javascript交互详解
seacean2000的专栏
09-11 676
动态文档内容     document.write(),是DOM遗留的一部分,作用是把内容写入文档.使用它有两种方式,一种是在脚本中使用,把输出的内容输入到当前正在被解析的文档中.如果javascript片段有defer属性,那么这个方法是不会起作用的.他不能在文档解析完成后工作.第二种方法,在其他窗口或者帧写新的文档.配套函数:window.open(),document.close().
dom简单交互效果案例制作~JS（二）
qq_64970126的博客
04-19 545
1、排他操作 2、百度换肤效果 3、鼠标悬浮经过和离开的样式改变 4、复选框全选效果，复选框所有按钮点击以后全选框也自动被点击
初识dom简单交互效果案例制作~JS
qq_64970126的博客
04-17 378
一、点击不同的button实现页面img的改变 二、根据系统反馈的时间display不同的img 三、点击按钮实现修改表单内的value属性值内容 四、密码输入框的名为制作（点击按钮隐藏输入框数据）
JavaScript DOM 对象深入了解
10-21
在深入探讨JavaScript的DOM对象之前，让我们先了解什么是DOM。DOM即文档对象模型（Document Object Model），是W3C组织推出的关于浏览器编程的一套API标准接口。DOM的出现，使得我们可以利用像JavaScript这样的脚本...
JavaScript DOM编程艺术 第2版 及源码
03-28
《JavaScript DOM编程艺术 第2版》是一本深入探讨JavaScript与DOM（Document Object Model）交互的权威书籍。DOM是Web页面的结构模型，JavaScript通过DOM API能够对网页内容进行动态操作，实现丰富的交互效果。这...
JavaScript-DOM:JS学习者使用JavaScript DOM的最小项目
04-27
本项目“JavaScript-DOM: JS学习者使用JavaScript DOM的最小项目”旨在帮助初学者理解并实践DOM操作的基本技巧。 在JavaScript中，DOM被作为一个对象模型，我们可以创建、修改、删除页面上的任何元素，从而实现动态...
JavaScript与HTML DOM交互
@_囚徒-2018_的家园
08-28 1078
1.HTML DOM (文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树： 2.JavaScript和HTML DOM交互 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。 （1）JavaScript 能够改变页面中的所有 HTML 元
javascript性能优化 之 DOM交互
weixin_34310127的博客
11-28 118
在javascript各个方面，DOM毫无疑问是最慢的一部分。DOM操作与交互要耗费大量时间，因为它们往往需要重新渲染整个页面或者某一部分。理解如何优化与DOM的交互可以极大提高脚本完成的速度。 1、最小化DOM更新 　　看下面例子： var list = document.getElementById("ul"); for (var...
优化DOM交互
weixin_30835649的博客
11-23 80
DOM操作与交互要消耗大量时间，所以优化DOM交互有重大意义。 1、最小化现场更新 　　　　如果需要访问的DOM部分是已经显示的页面的一部分，那么这就是在进行一个现场更新。现场更新得越多，代码完成执行所需要的时间越多；完成一个操作所需要的 现场更新次数越少，则代码执行得越快。 　　下面是反模式例子： var list = document.getElementById("m...
DOM（一）——HTML DOM
热门推荐
学会改变自己——才能突破
11-27 2万+
对于B/S开发，客户端与服务器端的交互是非常必要的，JavaScript的提出解决了很多问题，AJAX的提出也解决了异步通信的问题，更加为用户着想了。而DOM是其中非常基础的知识，在学习AJAX的同时，我学习了一下DOM的相关操作，这篇重点讲一下HTML DOM的相关内容，其实就是在HTML网页上进行的各种操作。           一，概述： DOM（对象文档模型（Docume
DOM操作一些常用的属性总结
a419029964425306的博客
03-12 151
1.DOM：文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 2.DOM的一些常用的属性 　　2.1 通过ID获取元素 　　　　（1）语法： document.getElementById("id"); 　　　　（2）作用：id就向一个人的身份证，我...
XML DOM.HTML DOM和JS之间的关系
普拉旺斯
12-13 2323
W3C所制订的DOM Level分为两大模块：Core和HTML。 1.Core核心，W3C规范：满足软件开发者和Web脚本编写者，访问和操控产品项目中包含的可解析的HTML和XML内容。 2.HTML模块，规范描述为：HTML之中特定元素的功能，和恰到好处的、易用的、针对常见性任务的HTML文档操作机制。 ——————————————————————————————————————
Kafka集群负载均衡：策略、实践与性能优化
最新发布
08-23
Kafka是一个分布式流处理平台，最初由LinkedIn公司开发，后来成为Apache软件基金会的一个顶级项目。Kafka主要用于构建实时数据管道和流处理应用程序。它能够高效地处理高吞吐量的数据流，并且具有很好的可扩展性、容错性和持久性。 以下是Kafka的一些关键特性： 1. **分布式系统**：Kafka通过多个代理（Broker）组成集群，支持数据的分布式存储和并行处理。 2. **发布-订阅模型**：Kafka使用发布-订阅模式，生产者（Producer）将消息发布到主题（Topic），消费者（Consumer）从主题订阅消息。 3. **高吞吐量**：Kafka设计用于处理高吞吐量的数据流，每秒可以处理数百万条消息。 4. **持久性**：Kafka将数据存储在磁盘上，支持数据的持久化，即使在系统故障的情况下也不会丢失数据。 5. **可扩展性**：Kafka可以通过增加更多的Broker来水平扩展，以处理更大的数据量。 6. **容错性**：Kafka支持数据的副本（Replication），确保数据的高可用性和容错性。 7. **实时性**：Kafka设计用于实时数据处理
cs[两种方式vue2和vue3]实现通讯
08-23
cef和vue2/vue3通讯
深入理解HTML DOM与JavaScript交互
JavaScript提供了与DOM交互的API，允许开发者查找、创建、修改和删除DOM节点。DOM接口和JavaScript之间的关系是，JavaScript是实现DOM API的工具，两者结合使得动态网页成为可能。 **如何访问DOM** 要访问DOM，你...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值