• js获取Element元素的常用方法


    js中获取Element元素的常用方法有以下四种:

    【方法一】根据元素ID:document.getElementById()

    【方法二】根据元素标签:document.getElementsByTagName()

    【方法三】根据元素class名:document.getElementsByClassName()

    【方法四】根据元素name名:document.getElementsByName()

    需要注意的是,方法中Element后面加“s”的,返回的是数组,即便只有一个对象,也是长度为1的数组。

    所以后面调用时,记得加上索引(变量名[0])

    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>js获取Element元素的常用方法title>
    
        <img id="m1" src="./img.jpg" width="200px"> <br />
    
        <div class="cls">div> <br />
        <div class="cls">div> <br />
    
        <input type="checkbox" name="hobby">运动
        <input type="checkbox" name="hobby">阅读
        <input type="checkbox" name="hobby">游戏
    
    head>
    
    <body>
        <script>
            // 1 根据元素ID
            let img = document.getElementById("m1");
            console.log(img);
    
            // 2 根据元素标签
            let div = document.getElementsByTagName("div");
            console.log(div);
    
            // 3 根据元素class名
            let cls = document.getElementsByClassName("cls");
            console.log(cls);
    
            // 4 根据元素的name名
            let hobby = document.getElementsByName("hobby");
            console.log(hobby);
        script>
    body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    在这里插入图片描述

  • 相关阅读:
    ywtool network命令
    linux centos7 rpm 安装 mysql5.7
    第14章总结:lambda表达式与处理
    在命令窗口便捷快速复制输出结果到剪贴板
    Python字典详解
    java-net-php-python-jsp刺绣作品展示网站计算机毕业设计程序
    DNS工作原理分析
    JDBC001--java中的jdbc数据库的初步连接(MySQL8.0)
    RTC实验
    基于nodejs+vue旅行社网站系统
  • 原文地址:https://blog.csdn.net/qq_42108331/article/details/130913751