從零開始學 Web 之 DOM（二）對樣式的操做，獲取元素的方式

時間 2020-05-22

標籤開始 web dom 樣式獲取元素方式欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公衆號，歡迎你們訂閱關注。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！javascript

一、對樣式的操做

1.一、點擊按鈕設置 div 的寬高和背景顏色

<body>
<input type="button" value="顯示顏色" id="btn">
<div id="dv"></div>

<script src="common.js"></script>
<script>
    my$("btn").onclick = function () {
        my$("dv").style.width = "200px";
        my$("dv").style.height = "100px";
        my$("dv").style.backgroundColor = "pink";
    };
</script>
</body>

凡是 css 屬性時由多個單詞構成的，那麼在 js 中設置的時候須要把 "-" 去掉，而後除第一個單詞的首字母大寫便可。css

好比：css裏面的 background-color，在js裏面的寫法是 backgroundColor.html

1.二、點擊按鈕隱藏和顯示 div 標籤

<body>
<input type="button" value="hide" id="btn">
<div id="dv" style="width: 200px; height: 100px; background-color: pink;"></div>

<script src="common.js"></script>
<script>
    my$("btn").onclick = function () {
        if(this.value === "hide") {
            my$("dv").style.display = "none";
            this.value = "show";
        }else if(this.value === "show") {
            my$("dv").style.display = "block"; // block是顯示標籤
            this.value = "hide";
        }
    };
</script>
</body>

1.三、網頁開關燈

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cls {
            background-color: #000;
        }
    </style>
</head>
<body class="">
<input type="button" value="ON/OFF" id="btn">

<script src="common.js"></script>
<script>
    my$("btn").onclick = function () {
        document.body.className = document.body.className !== "cls" ? "cls" : "";
    };
</script>
</body>

document.body 能夠選中 body 標籤。前端

1.四、阻止超連接默認跳轉

<body>
<!--方式一-->
<a href="http://www.baidu.com" onclick="alert('------'); return false;">百度</a>

<!--方式二-->
<a href="http://www.baidu.com" onclick="return f1()">百度</a>

<script>
    function f1() {
        alert("---------");
        return false;
    }
</script>

<!--方式三-->
<a href="http://www.baidu.com" id="ah">百度</a>
<script>
    document.getElementById("ah").onclick = function () {
        alert("------");
        return false;
    };

<!--方式四-->
<a href="http://www.baidu.com" id="ah">百度</a>
<script>
    document.getElementById("ah").onclick = function (e) {
        alert("------");
        e.preventDefault();
    };
</script>
</body>

阻止超連接的跳轉：返回給 onclick 事件一個 return false，而不僅僅是 false。java

方式二：當使用內聯 js 的時候，onclick 裏面是 f1() 而不是 f1。是函數的執行，而不是函數體自己。可是在外面寫 js 的時候，賦值給 onclick 的是函數體自己，認不是函數的執行。數組

方式二中之因此加 return，是由於 f1() 執行後返回的是 false，而不是 return false，因此要加一個 return。瀏覽器

方式四：調用事件參數對象的 preventDefault() 方法：e.preventDefault(); 能夠阻止超連接跳轉。注意 IE8 不支持。ide

1.五、點擊小圖在小圖下顯示大圖

<a href="images/2.JPG" id="ah"><img src="images/Daotin.png"></a>
<img src="" id="im">
<script src="common.js"></script>
<script>
    my$("ah").onclick = function () {
        my$("im").src = this.href;
        return false;
    };
</script>

使用 return false; 阻止連接本來的跳轉。函數

1.六、列表高亮顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
<ul>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
    <li>哈哈哈</li>
</ul>

<script src="common.js"></script>
<script>
    var liObjs = document.getElementsByTagName("li");

    for(var i=0; i<liObjs.length; i++) {
        // 鼠標進入事件
        liObjs[i].onmouseover = function () {
            this.style.backgroundColor = "pink";
        };
        // 鼠標離開事件
        liObjs[i].onmouseout = function () {
            this.style.backgroundColor = ""; // 空表示恢復以前的顏色
        };
    }
</script>
</body>
</html>

1.七、經過 name 屬性獲取元素

<input type="button" value="按鈕" id="btn"><br>
<input type="text" value="lvonve" name="nm1"><br>
<input type="text" value="lvonve" name="nm2"><br>
<input type="text" value="lvonve" name="nm1"><br>
<input type="text" value="lvonve" name="nm3"><br>
<input type="text" value="lvonve" name="nm1"><br>

<script src="common.js"></script>
<script>
    my$("btn").onclick = function () {
        var inputs = document.getElementsByName("nm1");

        for (var i = 0; i < inputs.length; i++) {
            inputs[i].value = "Daotin";
        }
    };
</script>

經過 name 屬性獲取元素適用於表單標籤，基本標籤沒有 name 屬性學習

基本標籤：div,p,h1,ul,li,br等

表單標籤：input, select,option,form,textarea,datalist,label等

1.八、根據類樣式的名字獲取元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cls {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p class="cls">第一個p標籤</p>
    <p>第二個p標籤</p>
    <span class="cls">第一個span</span><br>
    <span>第二個span</span>
    <div>第一個div</div>
    <div class="cls">第二個div</div>
    <input type="button" value="按鈕" id="btn">

    <script src="common.js"></script>
    <script>
        my$("btn").onclick = function () {
            var objs = document.getElementsByClassName("cls");

            for(var i=0; i<objs.length; i++) {
                objs[i].style.backgroundColor = "red";
            }
        };
    </script>
</body>

注意：getElementsByClassName 在IE8等低版本瀏覽器不支持。

二、獲取元素的方式總結

一、根據 id 的屬性的值獲取元素，返回值是一個元素對象

document.getElementById("id屬性的值");

二、根據標籤名獲取元素，返回值是包含多個元素對象的僞數組

document.getElementsByTagName("標籤名字");

三、根據 name 屬性的值獲取元素，返回值是包含多個元素對象的僞數組

document.getElementsByName("name屬性的值");

四、根據 class 類樣式的名字獲取元素，返回值是包含多個元素對象的僞數組

document.getElementsByClassName("class類樣式的值");

五、根據 CSS 選擇器獲取元素，返回值是一個元素對象

document.querySelector("#id屬性的值");
document.querySelector("標籤的名字");
document.querySelector(".class類樣式的值");

六、根據 CSS 選擇器獲取元素，返回值是包含多個元素對象的僞數組

document.querySelectorAll("#id屬性的值");
document.querySelectorAll("標籤的名字");
document.querySelectorAll(".class類樣式的值");

注意區分是名字仍是值。

三、案例：模擬搜索框

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input {
            color: gray;
        }
    </style>
</head>
<body>
    <input type="text" value="請輸入搜索內容">

    <script src="common.js"></script>
    <script>
        // 獲取文本框對象
        var inputObj = document.getElementsByTagName("input")[0];

        // 爲文本框註冊獲取焦點事件
        inputObj.onfocus = function () {
            if(this.value === "請輸入搜索內容") {
                this.value = "";
                this.style.color = "#000";
            }
        };

        // 爲文本框註冊失去焦點事件
        inputObj.onblur = function () {
            if(this.value.length === 0) {
                this.value = "請輸入搜索內容";
                this.style.color = "gray";
            }
        };
    </script>
</body>