day02 js交互【二】鼠标事件类型：元素.事件类型 = function(){ 事件 } 【三】操作元素内容

最新推荐文章于 2024-04-16 18:09:03 发布
最新推荐文章于 2024-04-16 18:09:03 发布
阅读量185 收藏
点赞数
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73404062/article/details/127309537
版权
这篇博客介绍了JavaScript中如何获取HTML元素，包括通过id、类名和标签名，并强调了元素集合的使用。接着详细讲解了各种鼠标事件，如onclick、onmouseover等，并给出了添加事件的示例。最后，探讨了操作元素内容的方法，包括innerHTML和innerText的区别，以及如何改变元素的样式和表单元素的值。
摘要由CSDN通过智能技术生成

 .js交互- 交互步骤：找对应的标签，添加事件，事件反馈

【一】获取标签

1通过id名获取- document.getElementById("id名");- 适合：适合单个标签获取

2通过类名获取- document.getElementsByClassName("class名字") 获取整个文档下的对应标签       

 - 父元素.getElementsByClassNAme("class名字") 获取父元素下对应的标签

注意：通过类名获取的是元素集合 获取元素集合中具体某一个元素需要加下标  元素集合[下标]

注意：元素集合只有一个元素，也要通过下标的形式获取

3通过标签名获取-  document.getElementsByTagName("标签名")  获取整个文档下的对应标签

- 父元素.getElementsByTagName("标签名")  获取父元素下对应的标签

最低0.47元/天 解锁文章
摘星星的路人甲
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
10.12前端笔记
mt04070518的博客
10-12 2043
/2.1 document.getElementsByClassName("class名字") 获取整个文档下的对应标签。// 3.1 document.getElementsByTagName("标签名") 获取整个文档下的对应标签。// 2.2 父元素.getElementsByClassNAme("class名字") 获取父元素下对应的标签。//3.2 父元素.getElementsByTagName("标签名") 获取父元素下对应的标签。//HTMLCollection(3) 元素集合。
基础知识 | DOM
A123ppleQueen的博客
02-01 1877
DOM ：Document Object Model 专门操作网页内容的一套现成的对象和函数的集合
document 对象(DOM)---获取元素
小白的博客
07-24 5123
document 对象(DOM)—获取元素 文档对象模型DOM(Document Object Model)定义访问和处理 HTML文档的标准方法。 DOM 将HTML文档呈现为带有元素、属性和文 本的树结构(节点树)。 获取元素 通过ID获取 getElementById()方法 getElementByName()方法 getElementByTagName()方法 g...
js使用document获取class元素
weixin_42600128的博客
01-05 1183
在 JavaScript 中，你可以使用 document.getElementsByClassName 来获取页面上的 class 元素。 例如，假设你有如下的 HTML 代码： <divclass="container"> <p class="text">Hello World</p> <p class="text">Foo Bar&lt...
JavaScript学习之document对象-获取元素方法
最新发布
林林一928的博客
04-16 1368
讲述document对象获取元素的方法：document.querySelector()， document.querySelectorAll()， document.getElementsByTagName()，document.getElementsByClassName()， document. getElementsByName()， document.getElementById()
big_event_day02:大事件第二遍
03-14
"big_event_day02:大事件第二遍"这个标题可能是指一个培训课程或研讨会的第二部分，专注于JavaScript中的大型事件处理或复杂的项目实践。描述中的内容重复了标题，暗示这是一个关于深入理解JavaScript事件处理的系列...
day02-js基础讲义.zip
10-01
JavaScript，简称JS，是Web开发中的重要脚本语言，用于实现客户端的动态效果和交互。在"day02-js基础讲义.zip..."day02-js基础讲义.zip"中可能涵盖了以上部分内容，通过学习这些知识，你将能够编写交互丰富的Web应用。
JS30-Day-19：网络摄像头和画布元素带来的乐趣
02-16
在JavaScript的30天挑战中，第19天的主题是利用网络摄像头和画布元素来创造有趣的交互体验。这个挑战的核心在于了解如何访问用户的网络摄像头，并实时地将摄像头捕获的视频流显示到HTML5的canvas元素上进行处理。在...
Day09:js和html
03-17
在实际开发中，常常会用到JavaScript库和框架，比如jQuery、React、Vue等，它们提供了更方便的操作DOM和处理事件的方法，减少了代码量，提高了开发效率。例如，jQuery简化了元素选择和事件绑定： ```javascript $('...
Day10:JS和HTML基础
03-18
5. **事件处理**：JavaScript通过监听和响应用户或浏览器的事件来增加交互性。常见的事件有点击（`click`）、鼠标悬浮（`mouseover`）、页面加载（`load`）等。事件处理函数可以绑定到元素的`addEventListener`方法...
JS中获取元素的方法
weixin_43765641的博客
09-11 4948
2、document.getElment.querySelectorAll('选择器') 获取拥有此选择器的元素，获取的是一个数组。1、document.getElement.querySelector('选择器') 获取该选择器的第一个元素。2、不只是通过document对象获取元素，也可以通过父元素获取子元素。document.getElementsByClassName('class名')document.getElementByid('id名')注意：1、获取多个元素的，获取到的都是数组。
DOM:查找标签，节点操作，获取值操作，class的操作，查看class标签，事件，this...
felix的博客
02-15 1921
目录DOMHTML DOM树查找标签直接查找document.方法document.getElementById()document.getElementsByClassName()document.getElementsByTagName()间接查找节点操作innerTextinnerHTML创建节点>>>createElement(标签名)节点设置属性>>&gt...
JavaScript学习之DOM入门（获取元素、document对象）
星河梦~的博客
06-18 940
目录前言什么是DOM？获取文档中的元素根据id获取根据标签名获取根据name获取根据class获取根据选择器获取document对象属性 前言 先来看一下JavaScript的组成部分： 本文针对DOM进行学习了解。 什么是DOM？ DOM(Document Object Model):文档对象模型，是w3c制定的一套针对HTML和XML的标准的编程接口 把HTML文档处理成树形结构(倒立的树)，将一个html文档看作是一棵树，文档中的标签、标签的属性、标签的内容都是这课树的节点。 强调：DOM的最顶端
js获取classname值_利用js获取元素class值的两种方法
热门推荐
weixin_30768103的博客
01-27 1万+
我们有时为了达到某种效果，需要以元素的class值为条件做判断。我们如何利用JavaScript获取元素class的值？我们先看下面代码：x=document.getElementsByTagName('div')[0];document.write(x.className);输出结果：mystyle利用js的document.getElementsByTagName就可以得到class的值。我们...
Document的属性和方法
mch0311的博客
09-05 2529
documentElement html元素 body body元素 doctype title 标题 URL 统一资源定位符，获取路径 domain 域名 referrer 前一个页面的URL images 所有img标签 forms ...
JavaScript基础学习（一）
Jenny_Ghost的博客
11-14 9454
一、API ARI CApplication Programming lnterface,应用程序编程接口)是一生预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 API是给程序员提供的一种工具！以便能更加轻松的实现想要完成的功能。 二、WebAPI Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API( BOM 和 DOM)。 三、DOM 文档对象模型( Document ObjectModel，简
dom元素操作获取等
weixin_51525719的博客
12-10 1275
一、DOM元素的获取 1）document.getElementsByClassName ( “class”) 返回集 htmlcollection ,用法和数组一致 说明: class为DOM元素上class属性的值 2）document.getElementById( “id” ) 功能:返回对拥有指定ID的第一个对象的引用 返回值: DOM对象 说明: id为DOM元素上id属性的值 3)document.getElementsByName(" name"); 返回的是nodelist 类型, 用法和
通过class名获取元素
weixin_35754676的博客
01-06 908
可以使用 document.getElementsByClassName 方法来获取带有指定类名的元素。 这个方法返回一个包含所有指定类名的元素的数组。你可以通过数组下标来访问数组中的每一个元素。 例如，假设你有一个带有类名 "example" 的 div 元素： <divclass="example">This is an example</div> 你可以使用以下代码...
js学习总结----DOM获取元素的方法（8个）
weixin_30687587的博客
06-20 1229
DOM:document object model 文档对象模型 DOM就是描述整个html页面中节点关系的图谱，可以如下图理解 在DOM中，提供了很多的获取元素的方法和之间关系的属性以及操作这些元素的方法。 1、获取页面中元素的方法 　　1）、document.getElementById('元素的ID') 在整个文档中，通过元素的ID获取到这个元素对象(获取的是一个...
把以下代码改成if()和else if()解构： {lunarDate.cMonth == 1 && [5, 6, 7].includes(lunarDate.cDay) ? term1 = j[0] : null} {lunarDate.cMonth == 2 && [3, 4, 5].includes(lunarDate.cDay) ? term1 = j[1] : null} {lunarDate.cMonth == 3 && [5, 6, 7].includes(lunarDate.cDay) ? term1 = j[2] : null} {lunarDate.cMonth == 4 && [4, 5, 6].includes(lunarDate.cDay) ? term1 = j[3] : null} {lunarDate.cMonth == 5 && [5, 6, 7].includes(lunarDate.cDay) ? term1 = j[4] : null} {lunarDate.cMonth == 6 && [5, 6, 7].includes(lunarDate.cDay) ? term1 = j[5] : null} {lunarDate.cMonth == 7 && [6, 7, 8].includes(lunarDate.cDay) ? term1 = j[6] : null} {lunarDate.cMonth == 8 && [7, 8, 9].includes(lunarDate.cDay) ? term1 = j[7] : null} {lunarDate.cMonth == 9 && [7, 8, 9].includes(lunarDate.cDay) ? term1 = j[8] : null} {lunarDate.cMonth == 10 && [8, 9].includes(lunarDate.cDay) ? term1 = j[9] : null} {lunarDate.cMonth == 11 && [7, 8].includes(lunarDate.cDay) ? term1 = j[10] : null} {lunarDate.cMonth == 12 && [6, 7, 8].includes(lunarDate.cDay) ? term1 = j[11] : null}
05-25
if(lunarDate.cMonth == 1 && [5, 6, 7].includes(lunarDate.cDay)) { term1 = j[0]; } else if(lunarDate.cMonth == 2 && [3, 4, 5].includes(lunarDate.cDay)) { term1 = j[1]; } else if(lunarDate.cMonth == 3...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值