從零開始學 Web 之 DOM（一）DOM的概念，對標籤操做

時間 2019-11-17

標籤開始 web dom 概念標籤欄目 HTML 简体版

原文原文鏈接

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

1、DOM概念

DOM 的全稱爲：Document Object Model 文檔對象模型css

咱們把 html 文件當作一個文檔，由於萬物皆對象，因此這個文檔也是一個對象。這個文檔中全部的標籤均可以當作一個對象，好比 div 標籤，p 標籤等。html

一、相關概念

html 頁面有一個根標籤 html 標籤。
標籤也叫元素，也叫對象。
頁面中的頂級對象：document。

節點（node）：頁面中全部的內容都是節點。包括標籤，屬性，文本等前端

xml 文件也能夠當作一個文檔。
html：側重於展現數據。
xml：側重於存儲數據。java

二、DOM樹

文檔下面有根標籤 html，html 下有 head 和 body 標籤，head 下又有 title 等，body 下又有 div 等。node

由文檔及文檔中的全部元素（標籤）組成的樹狀結構，叫樹狀圖（DOM樹）數組

2、DOM的做用

DOM的做用主要是：操做頁面的元素（標籤）。瀏覽器

DOM常常進行的操做dom

獲取元素
動態建立元素
對元素進行操做（設置屬性或調用其方法）
事件（什麼時機作相應的操做）

3、DOM初體驗

基本上分三步走：函數

根據 id 等獲取元素
爲獲取的元素註冊事件
添加事件處理函數

注意：全部function後面都有分號。

一、對標籤的操做

1.一、點擊按鈕，彈出對話框

<body>
    <input type="button" value="按鈕" id="btn">
    <script>
        document.getElementById("btn").onclick = function () {
            alert("hahahaha");
        };
    </script>
</body>

1.二、點擊按鈕顯示圖片，並設置圖片寬高

<body>
    <input type="button" value="按鈕" id="btn">
    <img src="" id="im">
    <script>
        document.getElementById("btn").onclick = function() {
            document.getElementById("im").src = "1.png";
            document.getElementById("im").width = 600;
            document.getElementById("im").height = 200;
        };
    </script>
</body>

document.getElementById("xxx"); 返回值是一個標籤對象，利用這個對象能夠操做其中的元素，像 type，value 等都是它的元素。

注意：html 標籤裏面的 width 和 height 屬性是不須要加 px 的，css 的 style 裏面的寬高才要加。

1.三、點擊按鈕修改 p 標籤的內容

<body>
    <input type="button" value="按鈕" id="btn">
    <p id="p1">p標籤</p>
    <script>
        document.getElementById("btn").onclick = function() {
            document.getElementById("p1").innerText = "我是一個P標籤";
        };
    </script>
</body>

凡是成對的標籤，設置中間的中間的文本內容，都是用innerText屬性。

1.四、點擊按鈕設置全部的 p 標籤內容

<body>
    <input type="button" value="按鈕" id="btn"/>
    <div>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
    </div>
    <div>
        <p>Daotin</p>
        <p>Daotin</p>
        <p>Daotin</p>
    </div>

    <script>
        document.getElementById("btn").onclick = function () {
            var pObjs = document.getElementsByTagName("p");         
            
            for(var i=0; i<pObjs.length; i++) {
                pObjs[i].innerText = "world";
            }
        }
    </script>

</body>

若是隻想設置第一個 div 裏面的 p標籤怎麼辦呢？

<body>
    <input type="button" value="按鈕" id="btn"/>
    <div id="box">
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
    </div>
    <div>
        <p>Daotin</p>
        <p>Daotin</p>
        <p>Daotin</p>
    </div>

    <script>
        document.getElementById("btn").onclick = function () {
            var pObjs = document.getElementById("box").getElementsByTagName("p");           
            
            for(var i=0; i<pObjs.length; i++) {
                pObjs[i].innerText = "world";
            }
        }
    </script>
</body>

1.五、點擊按鈕修改圖片的 alt 和 title 屬性

<body>
<input type="button" value="按鈕" id="btn">
<img src="1.png" alt="Google" title="logo">

<script>
    document.getElementById("btn").onclick = function () {
        var imgObjs = document.getElementsByTagName("img");
        imgObjs[0].alt = "Daotin"; 
        imgObjs[0].title = "nihao";
    };
</script>
</body>

imgObjs[0]：表明的就是僞數組的第一個對象。

1.六、點擊按鈕修改多個文本框的值

<body>
<input type="button" value="點擊按鈕填充文本" id="btn"><br>
<input type="text" value=""><br>
<input type="text" value=""><br>
<input type="text" value=""><br>
<input type="text" value=""><br>
<input type="text" value=""><br>

<script>
    document.getElementById("btn").onclick = function (ev) {
        var inputs = document.getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i++) {
            // 判斷 type 是否爲text
            if(inputs[i].type === "text") {
                // 這時候不能使用 innerText ，由於這不是成對的標籤
                inputs[i].value = "Daotin,你好啊";
            }
        }
    };
</script>
</body>

1.七、點擊按鈕修改 value 屬性

<body>
<input type="button" value="點擊按鈕填充文本" id="btn"><br>

<script>
    var btnObj =  document.getElementById("btn");
    btnObj.onclick = function (ev) {
        // btnObj.value = "Daotin";
        // btnObj.type = "text";
        // btnObj.id = "btn2";
        this.value = "Daotin";
        this.type = "text";
        this.id = "btn2";
    };
</script>
</body>

在一個對象的事件裏面對當前事件的屬性的操做，可使用this.屬性來修改。

1.八、按鈕的排他功能

<body>
<input type="button" value="lvonve">
<input type="button" value="lvonve">
<input type="button" value="lvonve">
<input type="button" value="lvonve">
<input type="button" value="lvonve">

<script>
    // 獲取所有按鈕
    var btnObjs = document.getElementsByTagName("input");

    // 循環爲全部按鈕註冊點擊事件
    for(var i=0; i<btnObjs.length; i++) {
        btnObjs[i].onclick = function (ev) {
            // 先設置點擊每一個按鈕的時候將全部的按鈕value爲lvonve
            for(var j=0; j<btnObjs.length; j++) {
                btnObjs[j].value = "lvonve";
            }
            //再設置當前點擊的按鈕爲Daotin
            this.value = "Daotin";
        };
    }
</script>
</body>

並非咱們一般想的，點擊某一個按鈕的時候，將以前點擊的按鈕恢復，而是點擊每個按鈕以前，將全部的按鈕恢復。

1.九、點擊圖片修改路徑

<body>
<input type="button" value="lvonve" id="btn">
<img src="1.png" id="im">

<script>
    function myid(id) {
        return document.getElementById(id);
    }
    myid("btn").onclick = function (ev) {
        myid("im").src = "2.jpg";
    };
</script>
</body>

若是有多個地方都使用了document.getElementById("") 的話，能夠封裝成一個函數來調用。

1.十、點擊按鈕選擇性別和興趣

<body>
<input type="button" value="修改性別" id="btn1">
<input type="radio" value="1" name="sex">男
<input type="radio" value="2" name="sex" id="nv">女
<input type="radio" value="3" name="sex">保密
<br>
<input type="button" value="選擇興趣" id="btn2">
<input type="checkbox" value="1" name="hobby" id="chi">吃飯
<input type="checkbox" value="2" name="hobby">睡覺
<input type="checkbox" value="3" name="hobby" id="play">打豆豆

<script>
    function my$(id) {
        return document.getElementById(id)
    }

    my$("btn1").onclick = function () {
        my$("nv").checked = true; // 填「checked」等同於true
    };

    my$("btn2").onclick = function () {
        my$("chi").checked = true;// 填「checked」等同於true
        my$("play").checked = true;// 填「checked」等同於true
    };
</script>
</body>

一、在單標籤中，若是屬性對應的值只有一個，並且值和屬性同名，那麼 js 操做 DOM 的時候，這個屬性值能夠用布爾類型表示。好比：checked="checked" selected="selected" disabled="disabled" readonle="readonly" 等。

二、在上面例子，不論是寫 "checked"仍是其餘任何的字符串，都會選中的，由於非空字符串都會被瀏覽器轉換成 true。

三、在 html 中，若是屬性的值只有一個，能夠直接寫這個屬性，而不須要賦值，也是有效的。好比：<input type="text" value="文本" readonly /> 這個時候，這個文本框也是被禁用的。