获取元素

最新推荐文章于 2023-06-03 14:59:56 发布

木槿晞

最新推荐文章于 2023-06-03 14:59:56 发布

阅读量121

点赞数

分类专栏：课程文章标签： js

本文链接：https://blog.csdn.net/xyw_jzj5201314/article/details/109633798

版权

课程专栏收录该内容

21 篇文章 0 订阅

订阅专栏

获取元素

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点击</button>
    <div class="box"></div>
</body>
<script>
    // 获取页面元素 通过id的形式获取页面元素
    // var box=document.getElementById("box");
    // 通过class形式获取页面元素----class形式获取的是一个伪数组
    // var box1=document.getElementsByClassName("box1")
    // 通过标签名的形式获取页面元素  形式获取的是一个伪数组
    // var div =document.getElementsByTagName("div");
    // 新增获取的方式  当有许多重复的类名  默认只能获取一个
    // var box =document.querySelector(.box);
    // console.log(box1)

    // 获取
    var btn = document.querySelector("button");
    var div = document.querySelector("div");
    // 给按钮注册单击事件  修改样式在style里面
    btn.onclick = function() {
        div.style.width = "100px";
        div.style.height = "100px";
        div.style.backgroundColor = "pink";
        // 给元素设置内容 区别：innerHTML 会解析标签  innerText不会解析标签原样输出
        // div.innerHTML="<h2>123456</h2>"
        div.className = "box1 yang";
        div.innerText = "<h2>123456</h2>"
    }
</script>
</htm>