DOM案例（2）

最新推荐文章于 2023-12-07 19:40:15 发布

_有光

最新推荐文章于 2023-12-07 19:40:15 发布

阅读量189

点赞数

本文链接：https://blog.csdn.net/youguang_/article/details/84640988

版权

（1）

====================列表高亮显示====================
        <ul>
            <li>周杰伦</li>
            <li>蔡依林</li>
            <li>张韶涵</li>
            <li>孙燕姿</li>
            <li>梁静茹</li>
            <li>范玮琪</li>
            <li>王心凌</li>
            <li>萧亚轩</li>
        </ul>
        <script src="H1.js"></script>
        <script>
            var uObj = document.getElementsByTagName("li");
            for (var i=0;i<uObj.length;i++){
                uObj[i].onmouseover = function () {
                    // alert("da")
                    this.style.backgroundColor = "yellow";
                }
                uObj[i].onmouseout = function () {
                    this.style.backgroundColor = "";
                }
            }
        </script>

（2）

=====================根据name属性值获取元素===============
        <input type="button" value="获取元素" id="btn"><br>
        <input type="text" value="你好" name="name1"><br>
        <input type="text" value="你好" name="name1"><br>
        <input type="text" value="你好" name="name2"><br>
        <input type="text" value="你好" name="name1"><br>
        <input type="text" value="你好" name="name4"><br>
        <input type="text" value="你好" name="name4"><br>
        <input type="text" value="你好" name="name1"><br>
        <input type="text" value="你好" name="name5"><br>
<script src="H1.js"></script>
        <script>
            my$("btn").onclick = function () {
                var inputs = document.getElementsByName("name1");
                for (var i=0; i<inputs.length;i++){
                    inputs[i].value = "hello";
                }
            }
        </script>

（3）

<!--===========根据类样式的名字获取元素=======-->
        <p class="cls">第一个样式</p>
        <p>第一个样式</p>
        <span class="cls">第一个样式</span><br>
        <span>第一个样式</span>
        <div class="cls">第一个样式</div>
        <div>第一个样式</div>
        <input type="button" value="选择样式" id="btn">
        <script src="H1.js"></script>
        <script>
            my$("btn").onclick = function () {
                var clObj = document.getElementsByClassName("cls");
                for (var i=0;i<clObj.length;i++){
                    clObj[i].style.backgroundColor = "red";
                }
            }
        </script>

（4）

==============根据选择器的方式获取元素（1）===========
        <input type="button" value="显示效果" id="btn">
        <script src="H1.js"></script>
        <script>
            var btnObj = document.querySelector("#btn");
            btnObj.onclick = function () {
                alert("哈哈");
            }
        </script>

（5）

==============根据选择器的方式获取元素（2）===========
        <p>这是一个p</p>
        <p class="cls">这是一个p</p>
        <span>这是一个span</span>
        <span class="cls">这是一个span</span>
        <script src="H1.js"></script>
        <script>
            var Obj = document.querySelectorAll(".cls");
            for (var i=0;i<Obj.length;i++){
                Obj[i].style.backgroundColor = "red";
            }
        </script>

（6）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-left: 10px;
            float: left;
            border: 2px solid pink;
        }
    </style>
</head>
<body>
<!--div高亮显示-->
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <script src="H1.js"></script>
        <script>
            var divObj = document.getElementsByTagName("div");
            for (var i=0;i<divObj.length;i++){
                divObj[i].onmouseover = function () {
                    this.style.border = "2px solid red"
                }
                divObj[i].onmouseout = function () {
                    this.style.border = "";
                }
            }
        </script>
</body>
</html>

（7）============自定义属性操作==========
    <ul id="uu">
        <li>小苏</li>
        <li>小红</li>
        <li>小黄</li>
        <li>小王</li>
        <li>小新</li>
        <li>小顾</li>
    </ul>
    <script src="H1.js"></script>
    <script>
        var uObj = my$("uu").getElementsByTagName("li");
        for (var i=0;i<uObj.length;i++) {
            uObj[i].setAttribute("score", (i + 1) * 10);
            uObj[i].onclick = function () {
                alert(this.getAttribute("score"));
            };
        }
    </script>

（8）=============移除自定义属性======================
    <input type="button" value="移除自定义属性" id="btn">
    <div id="div1"  score = "10" class="cls"></div>
    <script src="H1.js"></script>
    <script>
        my$("btn").onclick = function () {
            my$("div1").removeAttribute("score");
            // my$("div1").removeAttribute("class");
            my$("div1").className="";
        }
    </script>

（9 ）===============阻止超链接默认跳转==========
    <a href="http://www.baidu.com" id="ak">baidu</a>
    <script>
        document.getElementById("ak").onclick = function () {
            alert("haha");
            return false;
        }
    </script>



（10）==============点击小图显示大图================
    <a href="image/2.jpg" id="ak"><img src="image/1.gif" alt=""></a>
    <img src="" alt="" id="im">
    <script src="H1.js"></script>
    <script>
        my$("ak").onclick = function () {
            my$("im").src = this.href;
            return false;
        }
    </script>

（11）<!--==============列表隔行变色================-->
        <input type="button" value="隔行变色" id="btn">
        <ul id="uu">
            <li>周杰伦</li>
            <li>蔡依林</li>
            <li>张韶涵</li>
            <li>孙燕姿</li>
            <li>梁静茹</li>
            <li>范玮琪</li>
            <li>王心凌</li>
            <li>萧亚轩</li>
        </ul>
        <script src="H1.js"></script>
        <script>
            my$("btn").onclick = function () {
                var uObj = my$("uu").getElementsByTagName("li");
                for (var i = 0;i<uObj.length;i++){
                    if (i%2==0){
                        uObj[i].style.backgroundColor = "yellow";
                    } else{
                        uObj[i].style.backgroundColor = "red";
                    }
                }
            };
        </script>

（case 4）

（case1 ）===============阻止超链接默认跳转==========
    <a href="http://www.baidu.com" id="ak">baidu</a>
    <script>
        document.getElementById("ak").onclick = function () {
            alert("haha");
            return false;
        }
    </script>
（case 2）==============点击小图显示大图================
    <a href="image/2.jpg" id="ak"><img src="image/1.gif" alt=""></a>
    <img src="" alt="" id="im">
    <script src="H1.js"></script>
    <script>
        my$("ak").onclick = function () {
            my$("im").src = this.href;
            return false;
        }
    </script>

（case 3）

<!--==============列表隔行变色================-->
        <input type="button" value="隔行变色" id="btn">
        <ul id="uu">
            <li>周杰伦</li>
            <li>蔡依林</li>
            <li>张韶涵</li>
            <li>孙燕姿</li>
            <li>梁静茹</li>
            <li>范玮琪</li>
            <li>王心凌</li>
            <li>萧亚轩</li>
        </ul>
        <script src="H1.js"></script>
        <script>
            my$("btn").onclick = function () {
                var uObj = my$("uu").getElementsByTagName("li");
                for (var i = 0;i<uObj.length;i++){
                    if (i%2==0){
                        uObj[i].style.backgroundColor = "yellow";
                    } else{
                        uObj[i].style.backgroundColor = "red";
                    }
                }
            };
        </script>