web js DOM对象操作

最新推荐文章于 2024-09-10 14:50:08 发布

廷益--飞鸟

最新推荐文章于 2024-09-10 14:50:08 发布

阅读量124

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/weixin_45875105/article/details/109678639

版权

web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在这里插入图片描述

获取节点操作内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素节点</title>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>

    <p class="p1">4</p>
    <p class="p1">5</p>
    <p class="p1">6</p>

    <input type="text">
    <span>1</span>
    <span>2</span>

    <script>
        //获取 标签名称 集合
        var objDivs = document.getElementsByTagName("div");
        //控制台输出 标签名集合
        console.log(objDivs);
        
        //在控制台输出 第2个节点
        console.log(objDivs[1])

        //获取 类别名称集合
        var objClass = document.getElementsByClassName("p1");
        //控制台 输出集合
        console.log(objClass);
        //输出第三个节点
        console.log(objClass[2]);

        //操作元素的内容
        var objInputs = document.getElementsByTagName("input");
        var objSpans = document.getElementsByTagName("span");
        objInputs[0].oninput = function(){
            //获取元素内容  设置元素内容
            objSpans[0].innerText = objInputs[0].value;
            objSpans[1].innerText = objInputs[0].value;
        }

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

属性操作与样式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性</title>
    <style>
        span:hover{
            color: white;
            background-color: red;
        }
        /* 定义一个类别名为红色 */
        .red{
            /* 设置字体的颜色为红色 */
            color: red;
        }
        /* 定义一个类别名为fs的样式 */
        .fs{
            /* 设置字体大小 */
            font-size: 28px;
        }
    </style>
</head>
<body>
    <div>
        <span>首页</span>
        <span>新闻</span>
        <span>图片</span>
        <span>热点</span>
    </div>
    <div id="tip">你好</div>

    <script>
        //获取元素对象，并给对象添加类别样式 多个样式 用空格隔开
        document.getElementById("tip").className = "red fs";

        //获取属性 设置属性
        var spans = document.getElementsByTagName("span");
        spans[0].setAttribute("title", "这是一个首页");
        spans[1].setAttribute("title", spans[0].getAttribute("title"));

        //设置样式
        document.getElementById("tip").style.border = "solid 2px red"
        // 获取样式
        var colorStyle = document.getElementById("tip").style.border
        console.log(colorStyle)
    </script>
</body>
</html>