DOM:
DOM定義了訪問HTML 和XML 文檔的標準:
1.核心DOM 針對結構化文檔的標準模型
2.XMK DOM 針對XML文檔的標準模型
3.HTML DOM 針對HTML文檔的標準模型


DOM節點:
整個文檔是一個文檔節點(document對象)
每個html元素是元素節點(element對象)
html元素內的文本是文本節點(text對象)
每個html屬性是屬性節點(arrtibute對象)
註釋是註釋節點(comment對象)

 <div id="XX">XX
        <div id="AA">AA
            <span id="A1"
 
>A1</span>
            <span id="A2">A2</span>
            <span id="A3">A3</span>
        </div>
        <div id="BB">BB</div>
        <div>CC</div>
    </div>

    <script>
        // DOM 操作

        //獲取標簽對象:
        //根據ID獲取
        // var X = document.getElementById(‘A1‘);
 


        //根據name獲取
        // var X = document.getElementsByName()[0]

        //根據classname獲取
        // var X = document.getElementsByClassName()[0]

        //根據相同標簽名獲取
        // var X = document.getElementsByTagName()[0]

        // 方法返回帶有指定名稱和命名空間的所有元素的 NodeList。
        // var X = document.getElementsByTagNameNS()[0]
 



        // //DOM屬性:
        // console.log(X.nodeName);//(顯示標簽名)
        // //SPAN
        // console.log(X.nodeValue);//(顯示value)
        // // null
        // console.log(X.innerHTML);//(顯示HTML包括標簽)
        // //A1
        // console.log(X.innerText);//(顯示標簽內容)
        // //A1


        var X = document.getElementById(‘AA‘);
        // DOM導航屬性:
        // 父節點
        // console.log(X.parentNode);
        //第一個子元素
        // console.log(X.firstChild);
        //最後一個子元素
        // console.log(X.lastChild);
        //所有的子元素
        // console.log(X.childNodes);




        //方式一,直接在標簽上定義事件

        // // 方式二:
        // var a11 = document.getElementsByName(‘a11‘)[0];
        // a11.onclick = function f1() {
        //     console.log("OK!!!")
        // }

        // //方式三(this方式)
        // var a11 = document.getElementsByName(‘a11‘)[0];
        // a11 = function f1() {
        //     this.onclick(console.log("OK!!!"))
        // }

    </script>

JavaScript學習 - 基礎(六) - DOM操作