getdocument詳解

一. getdocumentid

getdocumentid用於通過id屬性獲取HTML元素。

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function getdocumentid() {
        var element = document.getElementById("example");
        element.style.color = "red";
    }
    </script>
    </head>
    <body>
    <p id="example">Hello World!</p>
    <button onclick="getdocumentid()">Click me</button>
    </body>
    </html>

以上示例中，定義了一個getdocumentid函數，在點擊按鈕時該函數會獲取id為example的元素，並將其字體顏色改為紅色。

二. getdocument函數

getdocument函數用於通過選擇器獲取HTML元素。

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function getdocument() {
        var element = document.querySelector(".example");
        element.style.color = "blue";
    }
    </script>
    </head>
    <body>
    <p class="example">Hello World!</p>
    <button onclick="getdocument()">Click me</button>
    </body>
    </html>

以上示例中，定義了一個getdocument函數，在點擊按鈕時該函數會獲取class為example的元素，並將其字體顏色改為藍色。

三. getdocumentbyunid

getdocumentbyunid用於通過唯一標識符（unid）獲取HTML元素。

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function getdocumentbyunid() {
        var element = document.getElementsByName("example")[0];
        element.style.color = "green";
    }
    </script>
    </head>
    <body>
    <p name="example">Hello World!</p>
    <button onclick="getdocumentbyunid()">Click me</button>
    </body>
    </html>

以上示例中，定義了一個getdocumentbyunid函數，在點擊按鈕時該函數會獲取name為example的元素，並將其字體顏色改為綠色。

四. getdocumentbyclass

getdocumentbyclass用於通過class屬性獲取HTML元素。

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function getdocumentbyclass() {
        var elements = document.getElementsByClassName("example");
        for (var i = 0; i < elements.length; i++) {
            elements[i].style.color = "purple";
        }
    }
    </script>
    </head>
    <body>
    <p class="example">Hello World!</p>
    <p class="example">Hello World!</p>
    <p class="example">Hello World!</p>
    <button onclick="getdocumentbyclass()">Click me</button>
    </body>
    </html>

以上示例中，定義了一個getdocumentbyclass函數，在點擊按鈕時該函數會獲取所有class為example的元素，並將它們的字體顏色改為紫色。

五. getdocumentelement結果為null

getdocumentelement用於獲取當前元素的父元素。

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function getdocumentelement() {
        var element = document.getElementById("example");
        var parent = element.parentElement;
        if (parent != null) {
            parent.style.color = "orange";
        }
    }
    </script>
    </head>
    <body>
    <div>
    <p id="example">Hello World!</p>
    </div>
    <button onclick="getdocumentelement()">Click me</button>
    </body>
    </html>

以上示例中，定義了一個getdocumentelement函數，在點擊按鈕時該函數會獲取id為example的元素的父元素，並將其字體顏色改為橙色。但是，由於該元素沒有父元素，因此可能會返回null值。

六. getdocumentbyid vue

getdocumentbyid用於通過id屬性獲取HTML元素。

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    function getdocumentbyid() {
        var element = document.getElementById("example");
        element.style.color = "red";
    }
    </script>
    </head>
    <body>
    <div id="app">
    <p id="example">Hello World!</p>
    <button @click="getdocumentbyid">Click me</button>
    </div>
    </body>
    </html>
    <script>
    var app = new Vue({
        el: '#app',
        methods: {
            getdocumentbyid: getdocumentbyid
        }
    })
    </script>

以上示例中，定義了一個getdocumentbyid函數，在點擊按鈕時該函數會獲取id為example的元素，並將其字體顏色改為紅色。該示例使用了Vue框架，將其與方法getdocumentbyid綁定到按鈕上，在點擊按鈕時觸發方法事件。

七. getdocumentbyid

getdocumentbyid用於通過id屬性獲取HTML元素。

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function getdocumentbyid() {
        var element = document.getElementById("example");
        element.style.color = "red";
    }
    </script>
    </head>
    <body>
    <p id="example">Hello World!</p>
    <button onclick="getdocumentbyid()">Click me</button>
    </body>
    </html>

以上示例中，定義了一個getdocumentbyid函數，在點擊按鈕時該函數會獲取id為example的元素，並將其字體顏色改為紅色。

八. getdocumentbase

getdocumentbase用於獲取當前文檔的base元素。

    <!DOCTYPE html>
    <html>
    <head>
    <base href="https://www.example.com/path/" target="_blank">
    </head>
    <body>
    <script>
    var base = document.baseURI;
    document.write(base);
    </script>
    </body>
    </html>

以上示例中，獲取了文檔中的base元素並輸出了其href屬性。baseURI屬性返回當前文檔的URI。

原創文章，作者：EGAI，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/138515.html