<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>document</title> </head> <body> <button>按钮</button> <script> // 元素对象.addeventlistener(`事件类型`,要执行的函数) // 事件源:dom元素被事件触发了.要获取dom元素 // 事件类型:比如click // 调用函数 const btn = document.querySelectorAll('.btn') btn.addeventlistener('click',function(){ alert('点击了') }) </script> </body> </html>检查一下

时间: 2023-07-09 12:03:58 浏览: 76
这段代码有几个小错误： 1. `querySelectorAll` 返回的是一个 NodeList，需要通过 `[]` 或者 `forEach` 等方法来遍历它。 2. `addeventlistener` 应该是 `addEventListener`，大小写有误。 3. `querySelectorAll` 中选择器应该是 `.btn`，因为按钮的类名是 `btn`。 修改后的代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>document</title> </head> <body> <button class="btn">按钮</button> <script> const btn = document.querySelectorAll('.btn'); btn.forEach(function(item) { item.addEventListener('click', function() { alert('点击了'); }); }); </script> </body> </html> ``` 这样就可以正常工作了。
相关问题

<!DOCTYPE html> ↵ ↵<html> ↵<head> ↵ <meta charset="utf-8" /> ↵ <meta name="viewport" content="widt

<!DOCTYPE html>是HTML文档类型声明，它告诉浏览器正在使用哪个HTML版本来解析文档。在HTML5中，<!DOCTYPE html>是唯一的文档类型声明，它告诉浏览器使用HTML5规范来解析文档。在HTML文档中，<!DOCTYPE html>应该作为第一行。 下面是一个简单的HTML文档示例，其中包含了<!DOCTYPE html>声明： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My HTML Document</title> </head> <body> <h1>Hello, World!</h1> <p>This is my first HTML document.</p> </body> </html> ```

试一试，在<script>的标签内容，获取所有LI标签，并输出相应节点的名称、节点的值、节点的类型。<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>节点属性</title> </head> <body> <ul> <li>javascript</li> <li>HTML/CSS</li> <li>jQuery</li> </ul> <script type="text/javascript"> </script> </body> </html>

好的，以下是示例代码： ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>节点属性</title> </head> <body> <ul> <li>javascript</li> <li>HTML/CSS</li> <li>jQuery</li> </ul> <script type="text/javascript"> // 获取所有LI标签 var lis = document.getElementsByTagName("li"); // 遍历LI标签，并输出相应节点的名称、节点的值、节点的类型 for (var i = 0; i < lis.length; i++) { var name = lis[i].nodeName; var value = lis[i].childNodes[0].nodeValue; var type = lis[i].nodeType; console.log("节点名称：" + name + "，节点值：" + value + "，节点类型：" + type); } </script> </body> </html> ``` 运行以上代码后，在控制台中可以看到输出结果，如下所示： ``` 节点名称：LI，节点值：javascript，节点类型：1 节点名称：LI，节点值：HTML/CSS，节点类型：1 节点名称：LI，节点值：jQuery，节点类型：1 ``` 其中，节点名称为LI，节点值分别为javascript、HTML/CSS、jQuery，节点类型都是1，表示元素节点。

相关推荐

docx

网页设计作业-综合案例

 <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=<device-width>, initial-scale=1.0">  <title>Document</title> </head> <body>  ...
pdf

关于css中line-height(行高)设置无效的问题的解决方法

meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .head{ height: 100px; text-align: center; line-height: 100px;/* 设置行高，让字体居中 */ ...
txt

HTML-DIV鼠标拖动.txt

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>鼠标拖动</title> ...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="/jquery-3.6.3.min.js"> $("#11").click(function (){ alert("haha"); }) </script> <button id="11">haha</button> </body> </html>该代码为什么不弹出警示框

<meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="11">haha</button> <script src="/jquery-3.6.3.min.js"></script> <script> $(document).ready(function(){ $("#11").click...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="jquery-3.6.3.min.js"></script> <script> $().ready=function () { $("#11").click(function () { alert("haha"); }) } </script> <button id="11">haha</button> </body> </html>为什么不弹出警示框

<meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.6.3.min.js"></script> <script> $(document).ready(function () { $("#11").click(function () { alert("haha"); }); }); </script>...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #father { width: 300px; height: 300px; background-color: pink; margin: 100 auto; } </style> </head> <body> <script> let i = document.querySelector(".father") console.log(i); </script> </body> </html>

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #father { width: 300px; height: 300px; background-color: pink; ...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script> <body> <input type="text" v-model="message"> <script> var app = new Vue({ el: "#app", date: { message: "Hello Vue!" } }) </script> </body> </html> 代码运行报错 ReferenceError: message is not defined

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script> </head> <body...

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <script type="text/javascript" src="js/jquery-1.12.4.js" ></script> </head> <body> <form> <fieldset> 用户名：<input type="text" id="username" />
密码：<input type="text" id="password" />
</fieldset> </form> <button id="btn">登录</button> <script> </script> </body> </html> 写出此代码如何使用Ajax登录成功，同时写出其中文件的代码

<meta charset="UTF-8"> <title>登录</title> <script type="text/javascript" src="js/jquery-1.12.4.js" ></script> </head> <body> <form> <fieldset> 用户名：<input type="text" id="username" /><br />...

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>创建菜单</title> </head> <body> <form action="www.4399.com/" method="post"> 账号 <input type="text" name="yikaishishabi" />

密码 <input type="password" name="123456" />

<input type="submit" value="登录" />    <input type="reset" /> </form> </body> </html>帮我优化一下代码

<meta charset="UTF-8"> <title>创建菜单</title> </head> <body> <form id="login-form" action="http://www.4399.com/" method="post"> <label for="username">账号：</label> <input type="text" id=...

完成程序，实现购物车计算器的功能。 参考Html代码如下，可根据需求进行修改： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> 购物车计算器 <label>单价:</label><input type="text">
<label>数量:</label><input type="text">
<label>应付金额:<

/label> <span id="totalPrice"></span><br/> <button onclick="calculate()">计算</button> <script> function calculate() { var price = parseFloat(document.querySelector("input[type=text]:nth-of-type(1)")....

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style>

但是，您可以在<style>标签中编写CSS样式，然后将其应用于网页中的HTML元素。例如，可以通过以下方式将样式应用于段落元素： <style> p { color: blue; font-size: 16px; } </style> <p>This is a ...

修改以下代码并和2.php一起访问<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Cookie转JSON</title> </head> <body> <label for="cookie">Cookie:</label> <textarea id="cookie" name="cookie" cols="50" rows="10"></textarea> <button onclick="2.php">转换</button> <label for="json">JSON:</label> <textarea id="json" name="json" cols="50" rows="10"></textarea> <script> </script> </body> </html>

<meta charset="UTF-8"> <title>Cookie转JSON</title> </head> <body> <div> <label for="cookie">Cookie:</label> <textarea id="cookie" name="cookie" cols="50" rows="10"></textarea> </div> <div> ...

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>示例网页</title> <style> /* CSS样式 */ body { font-family: Arial, sans-serif; background-color: #f0f0f0; } h1 { color: #333; } p { font-size: 16px; line-height: 1.5; color: #666; } button { padding: 10px; background-color: #333; color: #fff; border: none; border-radius: 5px; cursor: pointer; } </style></head><body> Welcome to my page This is an example web page. <button id="myButton">Click me</button> <script> var button = document.getElementById("myButton"); button.addEventListener("click", function() { alert("Hello, world!"); }); </script></body></html>解释一下这代码

- <meta charset="utf-8">：指定页面使用 UTF-8 编码。 - <title>示例网页</title>：页面的标题，显示在浏览器标签页上。 - <style>：样式表元素，用于定义页面的样式。 - body、h1、p、button：CSS ...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="vue.js"></script> </head> <body> <template> 胡图图 </template> <script> var vm = new Vue({ el: '#app', components: { 'my-component': { data() { return { showImage: false } } } } }); </script> </body> </html>找找点击字体图片无法显示的问题

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="vue.js"></script> </head> <body> <div id="app"> <my-component>...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p{ color:red; font-size:20px; } h2{ color:yellow; } .hello{ background: #cccccc; } .world{ font-weight:bold; } #haha{ color:blue; } </style> </head> <body> welcome to css! hello world! WEB前端开发 Java开发
welcome to css! hello world! WEB前端开发 Java开发 主讲：Hector 主讲：Hector
哈哈 </body> </html> 解释下每行的意思

<meta charset="UTF-8"> <title>Document</title> <style> p{ color:red; font-size:20px; } h2{ color:yellow; } .hello{ background: #cccccc; } .world{ font-weight:bold; } ...

以下代码如何在li中输出name和age<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="vue.js"></script> </head> <body> {{index.name}}-{{index.age}} <script> new Vue({ el: ".box", data: { person: [{ id: "001", name: "张三", age: 18 }], }, }); </script> </body> </html>

<meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src=...
pdf

jq的get传参数在utf-8中乱码问题的解决php版

DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <...

最新推荐

recommend-type

2107381120 王孟丽 实验2 (1).docx

2107381120 王孟丽 实验2 (1).docx
recommend-type

Java项目如何打成可以运行Jar包

Java项目如何打成可以运行Jar包
recommend-type

node-v12.22.8-headers.tar.xz

Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

实现实时数据湖架构：Kafka与Hive集成

![实现实时数据湖架构：Kafka与Hive集成](https://img-blog.csdnimg.cn/img_convert/10eb2e6972b3b6086286fc64c0b3ee41.jpeg) # 1. 实时数据湖架构概述** 实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势： - **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。 - **数据民主化：**实时数据湖使各种利益相关者都可
recommend-type

可见光定位LED及其供电硬件具体型号，广角镜头和探测器，实验设计具体流程步骤，

1. 可见光定位LED型号：一般可使用5mm或3mm的普通白色LED，也可以选择专门用于定位的LED，例如OSRAM公司的SFH 4715AS或Vishay公司的VLMU3500-385-120。 2. 供电硬件型号：可以使用常见的直流电源供电，也可以选择专门的LED驱动器，例如Meanwell公司的ELG-75-C或ELG-150-C系列。 3. 广角镜头和探测器型号：一般可采用广角透镜和CMOS摄像头或光电二极管探测器，例如Omron公司的B5W-LA或Murata公司的IRS-B210ST01。 4. 实验设计流程步骤： 1）确定实验目的和研究对象，例如车辆或机器人的定位和导航。
recommend-type

JSBSim Reference Manual

JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。
recommend-type

"互动学习：行动中的多样性与论文攻读经历"

多样性她- 事实上SCI NCES你的时间表ECOLEDO C Tora SC和NCESPOUR l’Ingén学习互动，互动学习以行动为中心的强化学习学会互动，互动学习，以行动为中心的强化学习计算机科学博士论文于2021年9月28日在Villeneuve d'Asq公开支持马修·瑟林评审团主席法布里斯·勒菲弗尔阿维尼翁大学教授论文指导奥利维尔·皮耶昆谷歌研究教授：智囊团论文联合主任菲利普·普雷教授，大学。里尔/CRISTAL/因里亚报告员奥利维耶·西格德索邦大学报告员卢多维奇·德诺耶教授，Facebook /索邦大学审查员越南圣迈IMT Atlantic高级讲师邀请弗洛里安·斯特鲁布博士，Deepmind对于那些及时看到自己错误的人...3谢谢你首先，我要感谢我的两位博士生导师Olivier和Philippe。奥利维尔，"站在巨人的肩膀上"这句话对你来说完全有意义了。从科学上讲，你知道在这篇论文的（许多）错误中，你是我可以依
recommend-type

实现实时监控告警系统：Kafka与Grafana整合

![实现实时监控告警系统：Kafka与Grafana整合](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9BVldpY3ladXVDbEZpY1pLWmw2bUVaWXFUcEdLT1VDdkxRSmQxZXB5R1lxaWNlUjA2c0hFek5Qc3FyRktudFF1VDMxQVl3QTRXV2lhSWFRMEFRc0I1cW1ZOGcvNjQw?x-oss-process=image/format,png) # 1.1 Kafka集群架构 Kafka集群由多个称为代理的服务器组成，这