第7天：javascript-DOM 獲取標籤、註冊事件改變屬性的值、innerText、改變屬性的值等

時間 2019-12-14

標籤 7天 javascript dom 獲取標籤註冊事件改變屬性 innertext 欄目 JavaScript 简体版

原文原文鏈接

javascript WEB api——————DOM document object model

案例

爲元素註冊點擊事件，彈出對話框

<input type="button" id="btn" value="開發分離">
    <input type="button" id="btn2" value="最終版">
    <script>
    //定義函數
    function f1(){
        alert("開發分離的html和js代碼");
    }
    //根據id獲取這個標籤(元素)
    var btnObj = document.getElementById("btn");
    //爲按鈕註冊點擊事件
    //注意f1不加括號 否則f1()，頁面加載時就執行了
    //該註冊方式不是最好的
    btnObj.onclick =f1;
    //根據id屬性的值，從整個文檔中獲取這個標籤(元素)
    var btnObj2 = document.getElementById("btn2");
    //爲當前的這個按鈕元素(對象)，註冊點擊事件，添加事件處理函數（匿命函數）
    btnObj2.onclick = function(){
        alert("我要變帥");
    }
    </script>

點擊按鈕顯示、隱藏圖片

<script>
    //頁面加載後執行
    window.onload = function(){
        //根據id獲取按鈕
        var btnObj = document.getElementById("btn");
        //爲按鈕註冊點擊事件，添加事件處理函數
        btnObj.onclick = function(){
            imgObj.src = "迪麗熱巴.jpg";
            //設置圖片的大小 不用加px width=「」
             imgObj.width = "300";
        }
        //根據id獲取圖片標籤，設置圖片的src屬性值
        var imgObj = document.getElementById("img");
        //隱藏圖片
        var  hiddenObj = document.getElementById("hidden");
        hiddenObj.onclick = function(){
            //清空圖片src屬性
            imgObj.src = "";
        }
    }
    </script>
</head>
<body>
    <input type="button" value="顯示圖片"  id="btn">
    <input type="button" value="隱藏圖片" id="hidden">

    <img src="" alt="" id="img">
</body>

點擊按鈕改變p標籤顯示內容

<script>
    window.onload = function(){
        //根據id獲取元素，爲元素測試點擊事件
        var btnObj = document.getElementById("btn");
        btnObj.onclick = function(){
            var p = document.getElementById("p1");
            //p 標籤文本內容設置時，使用innerText這個屬性的方式
            //凡成對出現的標籤，中間的文本內容，設置的使用都使用innerText這個屬性
            p.innerText = "p改變後的內容:我仍是一個p標記";
        }
    }
    </script>
</head>
<body>
    <input type="button" id="btn" value="設置p標籤內容">
    <p id="p1">我是p標籤</p>
</body>

案例點擊按鈕改變a標籤的熱點文字和標籤地址

<script>
    //頁面加載後執行
    window.onload = function(){
        //根據id獲取文檔中btn按鈕元素
        var btnObj = document.getElementById("btn");
        //爲btn元素註冊點擊事件
        btnObj.onclick = function(){
            //根據id獲取文檔中a標籤元素
            var aObj = document.getElementById("google");
            //設置a標籤改變後的地址和熱點文字
            aObj.href = "www.baidu.com";
            aObj.innerText = "百度";
        }
    }
    </script>
</head>
<body>
    <input type="button" id="btn" value="點擊改變a標籤的地址和熱點文字">
    <a href="www.google.com" id="google">谷歌</a>
</body>

點擊按鈕修改多個p標籤的文字的內容javascript

<script>
    //頁面加載後執行
    window.onload = function(){
      //根據id獲取元素
      var btnObj = document.getElementById("btn");
      //爲btnObj對象註冊點擊事件
      btnObj.onclick = function(){
        //根據標籤名字獲取標籤
        var pList = document.getElementsByTagName("p");
        //遍歷獲取的到的標籤僞數組
        for(var i = 0; i < pList.length; i++){
            pList[i].innerText = "好煩，帥不能當飯吃!"
        }
      }
    }
    </script>
</head>
<body>
    <input type="button" id="btn" value="點擊改變">
    <p>哈哈，你最帥！！！</p>
    <p>哈哈，你最帥！！！</p>
    <p>哈哈，你最帥！！！</p>
    <p>哈哈，你最帥！！！</p>
    <p>哈哈，你最帥！！！</p>
</body>