Javascripts获取元素操作方式（ES5语法和ES6语法获取单个/多个操作元素）

最新推荐文章于 2023-01-06 18:15:00 发布

二傻哆哆

最新推荐文章于 2023-01-06 18:15:00 发布

阅读量860

点赞数

分类专栏： Javascript 文章标签： es6 javascript

本文链接：https://blog.csdn.net/qq_52367032/article/details/127482574

版权

Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先给出一段基本的代码，准备好需要获取的元素：

（注意：以下获取元素的操作都是在本段代码的基础上获取的！！！）

<body>
    <div id="IdBox">
        <div class="classBox">
             <p>通过标签获取</p>
             <input type="text" name="account">
             <input type="text" name="password">
        </div>
    </div>
</body>

ES5语法获取操作元素

注：变量名不一定和需要获取的元素ID或Class名字一样

通过id获取元素

语法：let 变量名=document.getElementById("id") ----->获取单个元素

<script>
    //通过ID获取
    let IdBox = document.getElementById("IdBox")
    console.log(IdBox) //控制台输出整个id值为“IdBox”的内容
    console.log("ES5获取元素-通过ID获取元素成功！")//如果控制台能成功打印本段文字，则说明获取元素成功   
</script>

通过class获取元素

语法：let 变量名=document.getElementByClassName("类名") ---->获取多个 (类似于数组)

<script>
    //通过class获取
    let classBox = document.getElementsByClassName("classBox")
    console.log(classBox)
    console.log("ES5获取元素-通过class获取元素成功！")
</script>

通过name获取元素

语法：let 变量名=document.getElementByname("name") ----->获取多个 (类似于数组)

<script>
    //通过类名获取
    let nameBox = document.getElementsByName("account")
    console.log(nameBox)
    console.log("ES5获取元素-通过name获取元素成功！")
</script>

通过标签名获取元素

语法：let 变量名=document.getElementByTagName("标签名") ---->获取多个 (类似于数组)

<script>
    //通过标签获取
    let tagBox = document.getElementsByTagName("p")
    console.log(tagBox)
    console.log("ES5获取元素-通过标签名获取元素成功！")
</script>

ES6语法获取操作元素

css选择器：

id属性---#+属性值例如id="one"--（"#one"）

class属性---.+属性值例如class="two"--（".two"）

name属性、标签名属性---一般直接在括号里的引号内填写对应的属性值即可

通过css选择器获取单个元素

语法：let 变量名=document.querySelector("css选择器")---->获取单个元素

<script>
     //ID值获取
     let div_Css=document.querySelector("#IdBox")
     console.log("ES6获取元素-通过ID选择器获取元素成功！")

     //class值获取
     let class_Css=document.querySelector(".classBox")
     console.log("ES6获取元素-通过class选择器获取元素成功！")

     //标签值获取
     let tag_Css=document.querySelector("input")
     console.log("ES6获取元素-通过标签选择器(元素选择器)获取元素成功！")
</script>

通过css选择器获取多个元素

语法：let 变量名=document.querySelectorAll("css选择器")---->获取多个元素

<script>
    //获取多个标签
    let all_input = document.querySelectorAll("input")
    console.log("ES6获取元素-通过标签选择器获取多个元素成功！")
</script>

成功获取元素浏览器控制台截图

二傻哆哆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Javascripts获取元素操作方式（ES5语法和ES6语法获取单个/多个操作元素）

Javascripts获取元素操作方式（ES5语法和ES6语法获取单个/多个操作元素）
复制链接

扫一扫

专栏目录

Javascripts获取元素操作方式（ES5语法和ES6语法获取单个/多个操作元素）

ES5语法获取操作元素

通过id获取元素

通过class获取元素

通过name获取元素

通过标签名获取元素

ES6语法获取操作元素

通过css选择器获取单个元素

通过css选择器获取多个元素

成功获取元素浏览器控制台截图

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