目录
1.根据id属性获取元素
案例:点击使球球变大
1.代码
解释:
2.效果
2.根据标签名获取元素
案例:点击显示图片
1.代码
2.效果
3.根据类名获取元素
案例:点击使小球随机移动随机获取颜色
1.代码
2.效果
4.根据选择器获取元素
案例:控制小球移动
1.代码
2.效果
5.获取HTML的基本元素
html元素 head元素 body元素案例:获取网页的基本机构
1.代码
2.效果
附录
素材下载地址:
1.根据id属性获取元素
根据id属性获取元素 使用 document.getElementById() 方法可以根据元素的ID来获取该元素。这个方法返回的是一个单一的元素对象，因为在一个HTML文档中，ID应该是唯一的。
案例:点击使球球变大
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点击使球球变大</title> <style> #ball{ width: 100px; height: 100px; background-color: rgb(82, 223, 112); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 5px; border: 10px solid rgb(255, 30, 0); } </style> </head> <body> <div id="ball"></div> <script> // 通过id获取元素 var ball = document.getElementById("ball"); //定义球球的宽度 var ballWidth = 100; //定义球球的高度 var ballHeight = 100; //点击事件 ball.onclick = function(){ ballWidth += 100; ballHeight += 100; //设置样式 ball.style.width = ballWidth + "px"; ball.style.height = ballHeight + "px"; } </script> </body> </html>
解释:
获取元素:
- 这行代码通过
getElementById方法获取页面上 ID 为"ball"的元素，并将其赋值给变量ball。
定义初始宽度和高度:
- 这两行代码定义了两个变量
ballWidth和ballHeight，分别表示球的初始宽度和高度，初始值均为 100 像素。
绑定点击事件:
- 这段代码为
ball元素绑定了一个点击事件处理函数。 - 当用户点击
ball元素时，事件处理函数会被执行：ballWidth和ballHeight分别增加 100 像素。- 使用
ball.style.width和ball.style.height更新元素的宽度和高度属性，并将它们设置为新的值加上"px"后缀。
2.效果
2.根据标签名获取元素
使用 document.getElementsByTagName() 方法可以根据元素的标签名称来获取所有匹配的元素。这个方法返回的是一个NodeList对象，类似于数组，包含了所有具有给定标签名的元素。
案例:点击显示图片
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点击显示图片</title> <style> /** 定义容器 **/ .imgContainStyle{ width: 512px; height: 512px; border: 1px solid #e60d0d; } </style> </head> <body style="display: flex; align-items: center; justify-content: center;"> <!-- 点击显示图片，再次点击取消显示 --> <div class="imgContainStyle"> <img src="./aImg.png" alt="" id="img1" class="imgStyle"></img> </div> <h1>点击显示图片，再次点击取消显示</h1> <!-- 获取元素 --> <script> /* 获取元素 */ var div = document.getElementsByTagName("div"); var img = document.getElementById("img1"); //标志位 var flag = false; //绑定div的事件 div[0].onclick = function(){ //改变图片的src img.style.display = "none"; //标志位取反 if(flag){ img.style.display = "inline-block"; }else{ img.style.display = "none"; } flag = !flag; } </script> </body> </html>
2.效果
初始状态
点击一次的状态
再次点击之后的状态
3.根据类名获取元素
使用 document.getElementsByClassName() 方法可以根据元素的类名来获取所有匹配的元素。同样，这个方法返回的是一个NodeList对象。
案例:点击使小球随机移动随机获取颜色
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点击使小球随机移动随机获取颜色</title> <style> .ballContainStyle { width: 800px; height: 800px; background-color: rgb(255, 255, 255); border: 10px solid rgb(255, 0, 0); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ballStyle { width: 100px; height: 100px; background-color: rgb(82, 223, 112); border-radius: 50%; position: absolute; } </style> </head> <body> <div class="ballContainStyle"> <div class="ballStyle"></div> </div> <!-- 点击使小球随机移动 --> <script> var ballContainStyleInfoArrayList = document.getElementsByClassName("ballContainStyle"); var ballStyleInfoArrayList = document.getElementsByClassName("ballStyle"); var ballContainer = ballContainStyleInfoArrayList[0]; var ball = ballStyleInfoArrayList[0]; // 定义小球起始坐标 var ballX = 400; var ballY = 400; // 定义一个小球的移动速度 var ballSpeed = 10; // 获取随机坐标 function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } // 小球移动函数 function ballMove() { var containerWidth = ballContainer.clientWidth - ball.clientWidth; var containerHeight = ballContainer.clientHeight - ball.clientHeight; ball.style.left = getRandom(0, containerWidth) + "px"; ball.style.top = getRandom(0, containerHeight) + "px"; ball.style.backgroundColor = getRandomColor(); } // 绑定点击事件 ballContainer.addEventListener('click', function () { ballMove(); }); // 初始移动 ballMove(); // 获取随机颜色 function getRandomColor() { return "#" + Math.floor(Math.random() * 16777215).toString(16); } </script> </body> </html>
解释:
-
获取元素:
- 获取容器和小球元素。
-
定义小球初始位置:
- 设置小球的初始位置。
-
定义小球移动速度:
- 定义了一个未使用的速度变量。
-
生成随机坐标:
- 定义一个函数生成随机坐标。
-
小球移动函数:
- 移动小球并设置随机颜色。
-
绑定点击事件:
- 给容器绑定点击事件，点击时调用移动函数。
-
初始移动:
- 页面加载时调用一次移动函数。
-
生成随机颜色:
- 定义一个函数生成随机颜色。
2.效果
4.根据选择器获取元素
使用 document.querySelector() 或 document.querySelectorAll() 方法可以根据CSS选择器来获取元素。querySelector() 返回第一个与指定选择器匹配的元素节点，而 querySelectorAll() 返回所有匹配的元素节点列表（静态 NodeList）。
选择器可以是id选择器，类选择器等
案例:控制小球移动
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>控制小球移动</title> <style> #ballContainStyle { width: 500px; height: 500px; background-color: rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); position: relative; } #ball { width: 50px; height: 50px; background-color: rgb(255, 0, 0); border-radius: 50%; position: absolute; top: 0; left: 0; } .myButtonStyle { width: 100px; height: 30px; background-color: rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); border-radius: 5px; margin: 10px; } .myButtonStyle:hover { background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); } #floatWindow { position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); background-color: rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); border-radius: 5px; padding: 10px; } /* 小球动画 */ #ball { animation: ballBreath 1s linear infinite; } /* 小球具有呼吸感的动画 */ @keyframes ballBreath { 0% { width: 50px; height: 50px; background-color: rgb(18, 226, 233); } 50% { width: 60px; height: 60px; background-color: rgb(22, 231, 15); } 100% { width: 50px; height: 50px; background-color: rgb(126, 70, 61); } } </style> </head> <body style="display: flex; align-items: center; justify-content: center;"> <div id="ballContainStyle"> <div id="ball"></div> </div> <!-- 编写一个浮窗 --> <div id="floatWindow"> <button id="myUpButtonStyle" class="myButtonStyle">向上移动</button> <button id="myDownButtonStyle" class="myButtonStyle">向下移动</button> <button id="myLeftButtonStyle" class="myButtonStyle">向左移动</button> <button id="myRightButtonStyle" class="myButtonStyle">向右移动</button> </div> <!-- 控制小球移动 --> <script> // 通过select选择器获取元素 var up = document.querySelector("#myUpButtonStyle"); var down = document.querySelector("#myDownButtonStyle"); var left = document.querySelector("#myLeftButtonStyle"); var right = document.querySelector("#myRightButtonStyle"); // 获取小球信息 var ball = document.querySelector("#ball"); // 获取容器信息 var ballContain = document.querySelector("#ballContainStyle"); // 初始化小球位置 var ballTop = parseInt(ball.style.top || 0); var ballLeft = parseInt(ball.style.left || 0); // 控制小球移动 function moveBall(dx, dy) { // 计算新的位置 var newTop = ballTop + dy; var newLeft = ballLeft + dx; // 检查边界 //判断小球的高是否再容器中 if (newTop >= 0 && newTop <= ballContain.clientHeight - ball.clientHeight) { ball.style.top = newTop + "px"; ballTop = newTop; } //判断小球的宽是否再容器中 if (newLeft >= 0 && newLeft <= ballContain.clientWidth - ball.clientWidth) { ball.style.left = newLeft + "px"; ballLeft = newLeft; } } up.onclick = function () { moveBall(0, -10); }; down.onclick = function () { moveBall(0, 10); }; left.onclick = function () { moveBall(-10, 0); }; right.onclick = function () { moveBall(10, 0); }; </script> </body> </html>
2.效果
初始状态
小球是动态的
控制小球向右移动
控制小球向下移动
控制小球向左移动
控制小球向上移动
5.获取HTML的基本元素
获取HTML的基本元素通常指的是获取文档的主要结构元素，比如<html>、<head>和<body>等。下面是这些元素的简要说明以及如何使用JavaScript来获取它们：
<html> html元素
- 描述：这是整个HTML文档的根元素，它包含了所有的其他元素。
- 获取方法：
document.documentElement属性返回<html>元素。
<head> head元素
- 描述：这个元素包含了所有关于文档头部的信息，如标题（
<title>）、样式表链接（<link>）和脚本引用（<script>）等。 - 获取方法：
- 在现代浏览器中，可以使用
document.head属性直接获取<head>元素。 - 如果
document.head不可用（在非常旧的浏览器中），可以使用getElementsByTagName方法。
- 在现代浏览器中，可以使用
<body> body元素
- 描述：这是文档的主要内容部分，几乎所有的可视内容都是在这个元素内部显示的。
- 获取方法：
- 使用
document.body属性可以直接访问<body>元素。
- 使用
案例:获取网页的基本机构
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>编写几个简单的网页结构</title> <style> /* 渐变背景 */ body { background: linear-gradient(to right, #ffcccc, #ff9999); font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; } /* 标题样式 */ h1 { color: #333; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); font-size: 2em; margin-bottom: 20px; } /* 段落样式 */ p { color: #666; font-size: 1.2em; margin-bottom: 20px; } /* 列表样式 */ ul { list-style-type: none; padding-left: 0; margin-bottom: 20px; } li { background: #fff; padding: 10px; margin: 5px 0; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } /* 链接样式 */ a { color: #007BFF; text-decoration: none; font-size: 1.2em; margin-bottom: 20px; } a:hover { text-decoration: underline; } /* 表格样式 */ table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } th, td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #f2f2f2; font-weight: bold; } /* 表单样式 */ form { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 20px; } label { margin-top: 10px; } input[type="text"], input[type="email"] { padding: 8px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); } input[type="submit"] { background-color: #007BFF; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; } input[type="submit"]:hover { background-color: #0056b3; } </style> </head> <body> <!-- 添加标题 --> <h1>欢迎来到我的网站</h1> <!-- 添加段落 --> <p>这是一个简单的示例网页，用于展示基本的HTML结构。</p> <!-- 添加列表 --> <ul> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul> <!-- 添加链接 --> <a href="https://www.csdn.net/">CSDN</a> <!-- 添加表格 --> <table border="1"> <tr> <th>姓名</th> <th>年龄</th> <th>城市</th> </tr> <tr> <td>张三</td> <td>25</td> <td>北京</td> </tr> <tr> <td>李四</td> <td>30</td> <td>上海</td> </tr> </table> <!-- 添加表单 --> <form action="#" method="post"> <label for="name">姓名:</label> <input type="text" id="name" name="name"><br><br> <label for="email">邮箱:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="提交"> </form> <!-- 获取网页的基本结构 --> <script> // 获取网页的各个部分 // 获取网页的头部 var getMyHTMLHead = document.head; console.log("获取网页的head部分：" + getMyHTMLHead); console.log(getMyHTMLHead); // 获取网页的主体 var getMyHTMLBody = document.body; console.log("获取网页的body部分：" + getMyHTMLBody); console.log(getMyHTMLBody); // 获取网页的根元素 var getMyHTMLDocument = document.documentElement; console.log("获取网页的根元素：" + getMyHTMLDocument); console.log(getMyHTMLDocument); // 获取页面的表单信息 var getMyForm = document.forms; console.log("获取页面的表单信息：" + getMyForm); console.log(getMyForm); </script> </body> </html>
2.效果
页面的基本情况
控制台获取的元素
获取头部信息
获取身体信息
获取根元素
获取表单信息
附录
素材下载地址:
aMouse.png等2个文件官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘
