HTML DOM 教程---获取常规元素方式（1）

九幽玄天神君

于 2024-10-13 21:49:19 发布

阅读量568

点赞数 4

分类专栏： b站kerwin前端教程自学笔记持续更新... 文章标签： html 前端 javascript 开发语言 ecmascript chrome 前端框架

本文链接：https://blog.csdn.net/weixin_58694594/article/details/142903880

版权

b站kerwin前端教程自学笔记持续更新... 专栏收录该内容

179 篇文章

订阅专栏

getElementById

<!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>获取常规元素</title>
</head>
<body>
    <div id="box"></div>
    <script>

        console.log(document.getElementById("box"))

        var obox = document.getElementById("box")
        obox.innerHTML = "222222"
    </script>
</body>
</html>

getElementsByClassName

<!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>获取常规元素</title>
</head>
<body>
    <ul>
        <li class="newsitem">111111111</li>
        <li class="newsitem">111111111</li>
        <li class="newsitem">111111111</li>
    </ul>
    <ul>
        <li class="adsitem">111111111</li>
        <li class="adsitem">111111111</li>
        <li class="adsitem">111111111</li>
    </ul>
    <script>
        var items = document.getElementsByClassName("newsitem")
        console.log(items)
        // items[0].innerHTML = "news-111111111"
        for(var i=0;i<items.length;i++){
            items[i].innerHTML = "news-"+i
        }

        var items = document.getElementsByTagName("li")
        console.log(items)

    </script>
</body>
</html>

getElementsByTagName

<!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>获取元素</title>
</head>
<body>
    <input type="text" name="username">
    <input type="password" name="password">
    <script>     
        var items = document.getElementsByName("username")
        console.log(items[0])
        var items1 = document.getElementsByName("password")
        console.log(items1[0])
        // 设置值
        items[0].value = "xiaoming"
        items1[0].value = "6666666666"
    </script>
</body>
</html>