【前端】【JS】前端学习之路（八）：DOM练习（三）（获取数据的其他方式）

1.根据类样式的名字来获取数据

    <style>
    div{
    width: 100px;
    height: 100px;
    background-color: aqua;
    margin-top: 10px;
    }
    .cls{
    background-color: cadetblue;
    }
    </style>

<input type="button" value="变色" id="btn"/>


<div class="cls">我是一个div</div>

<div>我是第二个div</div>

<p class="cls">我是一个P</p>

<p>我是第二个P</p>

<script>

    var ClassObj = document.getElementsByClassName("cls");
    my$("btn").onclick = function () {
        for (var i = 0; i < ClassObj.length; i++) {
            ClassObj[i].innerText = "我可能是猪";
            ClassObj[i].style.backgroundColor = "yellow";
        }
    }


</script>

点击前：

点击后：

2.根据name属性获取数据

    <style>
        .cls {
            display: none;
        }

        .nodeSmall {
            width: 50px;
            height: 50px;
            background: url(images/bgs.png) no-repeat -159px -51px;
            position: fixed;
            right: 10px;
            top: 40%;
        }
    </style>

<input type="button" value="test" id="btn"/>

<input type="text" value="我是谁" name="name1"/>
<input type="text" value="我是谁" name="name2"/>
<input type="text" value="我是谁" name="name14"/>
<input type="text" value="我是谁" name="name15"/>
<input type="text" value="我是谁" name="name1"/>
<input type="text" value="我是谁" name="name1"/>

<script>
    var InputObjs = document.getElementsByName("name1");

    my$("btn").onclick = function () {
        for (var i = 0; i < InputObjs.length; i++) {
            InputObjs[i].value = "我也不知道我是谁"
        }
    };
</script>

点击前：

点击后：

3.其他获取数据的方法

    <style>
        .cls {
            background-color: red;
        }
    </style>

<input type="button" value="显示效果" id="btn"/>
<p>这是一个p</p>
<p class="cls">这是一个p</p>
<span>这是一个span</span>
<span class="cls">这是一个span</span>

<script>

    //点击按钮弹出对话框
    //根据选择器的方式获取元素
    var btnObj = document.querySelector("#btn");
    btnObj.onclick = function () {
        alert("哈哈,我又变帅了");
    };


    // var objs=document.querySelectorAll(".cls");
    // for(var i=0;i<objs.length;i++){
    //     objs[i].style.backgroundColor="green";
    // }
</script>

点击前：

点击后：

<script>

    //点击按钮弹出对话框
    //根据选择器的方式获取元素
    // var btnObj = document.querySelector("#btn");
    // btnObj.onclick = function () {
    //     alert("哈哈,我又变帅了");
    // };


    var objs = document.querySelectorAll(".cls");
    for (var i = 0; i < objs.length; i++) {
        objs[i].style.backgroundColor = "green";
    }
</script>

效果：