JavaScript学习 - 基础(六) - DOM操作

 <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>