js获取HTML中元素的5种方法(5个案例+代码+效果)

已于 2024-10-07 19:49:52 修改
阅读量2k 收藏 23
点赞数 46
分类专栏： js知识梳理 文章标签： javascript html css html5 前端 css3 vscode
于 2024-10-07 00:04:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76862031/article/details/142732354
版权

目录

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>

解释:

  1. 获取元素:

    • 获取容器和小球元素。

  2. 定义小球初始位置:

    • 设置小球的初始位置。

  3. 定义小球移动速度:

    • 定义了一个未使用的速度变量。

  4. 生成随机坐标:

    • 定义一个函数生成随机坐标。

  5. 小球移动函数:

    • 移动小球并设置随机颜色。

  6. 绑定点击事件:

    • 给容器绑定点击事件，点击时调用移动函数。

  7. 初始移动:

    • 页面加载时调用一次移动函数。

  8. 生成随机颜色:

    • 定义一个函数生成随机颜色。

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云盘

惜.己
关注
专栏目录
JavaScript中获取HTML元素值的三种方法
01-19
JavaScript中取得元素的方法有三种：分别是： 1、getElementById() 方法：通过id取得HTML元素。 2、getElementsByName()方法：通过name取得元素，是一个数组。 3、getElementsByTagName()方法：通过HTML标签取得元素，是一个数组。 如果要取得值可以使用value，如：var x=document.getElementById(“id”).value; 方法一：getElementById() 方法 可返回对拥有指定 ID 的第一个对象的引用。 语法：document.getElementById(id) 在 DOM 程序设
js中获取html元素
最新发布
jht_520的博客
07-02 323
方法返回的是类似数组的HTML集合，需要使用循环来遍历每个元素。如果你只需要获取第一个匹配的元素，可以使用。等方法来获取HTML元素。这些方法以不同的方式定位和选择要获取的元素。你可以使用JavaScript中的getElementById()注意：getElementsByClassName()和getElementsByTagName()
通过js获取html元素
qq_45419193的博客
04-13 200
【代码】通过js获取html元素。
JS中常用的的选择器，JavaScript获取HTML标签元素
wan123456789789的博客
08-22 4148
getElementById是JavaScript中的一个DOM方法，用于根据元素的id属性获取HTML文档中的元素。该方法接受一个字符串参数，即元素的id属性值，并返回具有该id属性值的元素。如果没有找到匹配的元素，则返回null。在这个示例中，h1元素和 p元素都有一个id属性，分别为"heading"和"paragraph"。在JavaScript代码中，通过document.getElementById方法获取这两个元素，并使用textContent属性来修改它们的文本内容。
JavaScript 获取 HTML 元素
z13903931414的博客
11-16 419
这个方法返回一个 NodeList，其中包含所有匹配指定 CSS 选择器的元素。在 JavaScript 中，有几种方法可以获取 HTML 元素。: 这个方法返回一个包含所有指定 HTML 标签的元素的 NodeList。: 这个方法返回一个包含具有指定类名的所有元素的 NodeList。请注意，获取到的元素可能需要进行进一步的处理才能满足你的需求，比如通过。: 这个方法返回匹配指定 CSS 选择器的元素。: 这个方法返回具有指定 ID 的元素。等方法获取元素的内容或属性。
js获取元素的方法
RJ0403的博客
12-14 271
1、根据ID获取元素 <div id="box"></div> <script> var box = document.getElementById('box') </script> 2、根据标签名获取元素 <div></div> <div></div> <div></div> <script> var divs = document.getElementsByTagName
js+html5实现简易指针时钟表代码.zip
11-24
在本项目中，“js+html5实现简易指针时钟表代码.zip”是一个包含前端开发技术的实践案例，主要利用JavaScript、HTML5和CSS来创建一个动态的、模拟真实指针时钟的网页应用。这个项目特别强调了JavaScript的时间处理...
html5+javascript+css商城（模拟联想）购物系统
06-26
总结，本项目“HTML5+JavaScript+CSS 商城（模拟联想）购物系统”充分展示了这三大技术在实际开发中的应用，为开发者提供了一个学习和实践的优秀案例。通过这个系统，我们可以深入了解如何利用这些技术构建一个功能...
一个简单的日历代码 (For: FF1+ IE5+ Opr7+)测试
10-31
### 一个简单的日历代码 (For: FF1+ IE5+ Opr7+) 测试 本文将详细介绍一个适用于Firefox 1及以上、Internet Explorer 5及以上以及Opera 7及以上的浏览器的日历代码实现。此代码用于展示如何创建一个基本的日历功能...
【前端代码实例】使用HTML5+CSS3+JavaScript制作一个响应式的后台管理系统~带侧边导航栏仪表盘功能
南北极之间
08-08 1万+
classList 属性返回元素的类名，作为 DOMTokenList 对象。该属性用于在元素中添加，移除及切换 CSS 类。classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。
html5+css3仿Twitter注册页特效代码
03-20
总的来说，这个项目是学习和实践HTML5和CSS3特效的一个很好案例，涵盖了从页面结构到样式美化，再到动态效果实现的多个方面。通过研究这个项目，开发者不仅可以掌握相关技术，还能了解到如何将这些技术应用到实际...
js获取元素
weixin_48549175的博客
12-11 232
文档:一个页面就是一个文档，DOM中使用document表示 元素∶页面中的所有标签都是先素，DOM中使用element表示 节点∶网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示 根据ID获取 使用getElementByld()方法可以获取带有ID的元素对象。 <body> <input type="text" id="inp"> <script> var inp=document.getElementBy.
js获取页面元素
m0_53099736的博客
11-20 724
获取页面元素 getElementsByTagName 通过标签名称获取元素 getElementsByClassName 通过class获取元素 getElementById 通过id获取元素 getElementByName 通过name属性来获取元素 querySelector 更简单一点，但是有缺陷 类似css方法来获取元素 操作元素样式和属性 classList 获取class名称 add 添加一个class名称 remove 移除一个class名称 innertText 修改元素内部的
js中获取页面元素
cy588135的博客
11-26 1975
js中获取页面元素
js 获取元素的方式
热门推荐
Dcripple的博客
05-20 1万+
js 获取元素5种的方式 1、标签获取元素 getElementsByTagName()方法返回一个动态的包含所有指定标签名的元素的集合。 语法： document.getElementsByTagName(‘元素的标签名’); <body> <p id="demo">Hello World!</p> <p id="pro">Hi Jhon!</p> </body> <script> //根据标签改变字...
JS中五种获取html中元素的方法
x3895的博客
10-07 9321
1.通过标签id名字获取元素 :document.getElementById(); 2.通过标签class类名获取元素 :document.getElementClsaaName(); 下面标签代码 这边是js代码 下面是上面js运行后浏览器输出效果 3获取第一个span标签:document.getElementsByTagName("span")[0]; 这个方法输出的是一个数组所以需要切确的输出哪个需要加上索引下标 4根据选择器的方式获取元素:document.queryS..
js获取html元素
z2h
02-18 385
js获取class为box,id为test的div标签元素三种方式 &lt;div class="box" id="test"&gt;&lt;/div&gt; 1-document.getElementById('test'); 返回对拥有指定 id 的第一个对象的引用。 (id相同则返回第一个) 2-document.getElementsByTagName('div'); 返回带有指定名称的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值