JS-获取元素方式

Kafka的悲伤

已于 2023-07-31 20:01:44 修改

阅读量101

点赞数

分类专栏：前端学习文章标签： javascript 前端 html

于 2023-07-31 19:25:25 首次发布

本文链接：https://blog.csdn.net/qq_47043757/article/details/132028920

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JS对HTML页面中的元素进行访问首先需要获取元素，通过Document对象和element对象提供的方法和属性获取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>23.7.31</title>
</head>
<body>
    
    <button id="btn">点一下玩一年</button>
    <p></p>
    <button id="bcn">装备不花一分钱</button>
    <p></p>

    <span class="c1">w1</span>
    <p></p>
    <span class="c1">w2</span>
    <p></p>
    <span class="c1">w3</span>
    <p></p>

    <div>666</div>
    <div>666</div>
    <div>666</div>

    <form name="myForm" >
        <input type="text" name="username">
        <input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女
    </form>

    
    <p></p>
    <a href="#">111</a>
    <script>
        
        document.write(`<h1>贪玩...</h1>`)
        document.write(`<h3>是兄弟....</h3>`)
        
        
        //获取按钮对象
        const btn=document.getElementById("btn")
        

        //修改btn文字
        btn.innerText="click me"
        console.log(document.links)
        
        /*  document 对象原型链 
          document代表整个网页
          HTMLdocument ->Document ->Node -> EventTarget ->Object.prototype ->null

          document.documentElement  ->html 根元素
          document.head 
          document.title
          document.body
          document.links ->获取页面中所有超链接
          document.images ->获取页面中所有图片
          document.getElementsByTagName("*") ->获取页面所有元素
        */

        /*元素节点  element --标签就是元素节点 如：
          document.getElementById("xxx")
          console.log(document.body)
        */

        //document.getElementsByClassName() ---根据class 获得一组元素对象 返回的是类数组对象 返回的结果是实时更新的集合
        const spanc=document.getElementsByClassName("c1")
        console.log(spanc)
        //for 遍历
        for(let i = 0;i<spanc.length;i++){
            console.log(spanc[i])
           // spanc[i].innerText="aaa"  修改内容
        }


        //document.getElementsByTagName() ---根据div 获得一组元素对象 返回的是类数组对象 返回的结果是实时更新的集合
        const divs=document.getElementsByTagName("div")
        console.log(divs)

        //document.getElementsByName() --根据name属性获得一组元素节点对象  用于表单  返回的结果是实时更新的集合
        const genderIP=document.getElementsByName("gender")
        console.log(genderIP)

        //document.querySelectorAll() --根据选择器去页面中查询元素 ID #开头 class选择 .开头  非实时更新的集合  *****
        //const diva=document.querySelectorAll("#btn")
        //const diva=document.querySelectorAll(".c1")
        const diva=document.querySelectorAll("div")
        console.log(diva)

        //document.querySelector()  --根据选择器去页面中查询第一个符合条件的元素 *****
        const div22= document.querySelector("div")
        console.log(div22)


        //创建元素节点 这里的H4并未插入网页
        const h4=document.createElement("h2")
        console.log(h4)

 
    </script>

</body>
</html>

记得复习！