javascript如何透過id屬性取得頁面元素-js教程-PHP中文網

javascript如何透過id屬性取得頁面元素

醉折花枝作酒筹

發布： 2023-01-06 11:17:07

原創

9412 人瀏覽過

在javascript中，可以使用getElementById方法取得取得頁面元素，語法格式為「document.getElementById("id名稱")」。 getElementById方法可傳回擁有指定ID的第一個物件的參考。

javascript如何透過id屬性取得頁面元素

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

網頁由標籤將資訊組織起來，而標籤的id屬性值是唯一的,如何透過javascript找到要取得的元素

document.getElementById("id") //语法

登入後複製

透過以下程式碼發現執行結果為null或[object HTMLParagraphElement]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>通过ID获取元素</title>
        <script type="text/javascript">
            var myceshi=document.getElementById(&#39;ceshi&#39;);//获取元素存储在变量中
            // document.write(&#39;结果:&#39;+myceshi);//输出变量
            alert(myceshi);
            document.write(&#39;结果:&#39;+myceshi);//输出变量
        </script>
    </head>
    <body>
        <div id="ceshi">I love javascript</div>
        <!-- <script type="text/javascript">
            var myceshi=document.getElementById(&#39;ceshi&#39;);//获取元素存储在变量中
            // document.write(&#39;结果:&#39;+myceshi);//输出变量
            alert(myceshi);
            document.write(&#39;结果:&#39;+myceshi);//输出变量
        </script> -->
    </body>
</html>

登入後複製

取得的元素是一個對象，如想對元素進行操作，我們要透過它的屬性或方法。（object HTMLParagraphElement 對象HTML段落元素，取得到的是元素，這個元素也就是對象，取得到的對像不會顯示裡面的值，所以顯示object HTMLParagraphElement，想要抽取裡面的值，就用innerHTML 取得）

getElementById() 方法可傳回擁有指定ID 的第一個物件的參考。

定義了多種尋找元素的方法，除了 getElementById() 之外，還有 getElementsByName() 和 getElementsByTagName()。

不過，如果您需要尋找文件中的一個特定的元素，最有效的方法是 getElementById()。

在操作文檔的一個特定的元素時，最好給該元素一個 id 屬性，為它指定一個（在文件中）唯一的名稱，然後就可以用該 ID 尋找想要的元素。

【推薦學習：javascript高階教學】

以上是javascript如何透過id屬性取得頁面元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！