64 元素节点属性

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            /*
                childNodes  获取当前元素节点的所有的子节点，包括两种节点类型
                    1、元素节点
                    2、文本节点
            */
            window.onload = function(){
                var oDiv = document.getElementById("div1")
                
                alert(oDiv.childNodes)      //[object NodeList]  是装有当前元素节点所有的子节点
                alert(oDiv.childNodes.length)       //3



                /*
                    DOM节点类型
                    元素节点    文本节点    属性节点


                    【注】节点可以分为元素节点、属性节点和文本节点，
                    而这些节点又有三个非常有用的属性，
                    分别为：nodeName、nodeType 和 nodeValue


                    节点类型        nodeName        nodeType        nodeValue
                      元素          元素名称           1              null
                      属性          属性名称           2             属性值
                      文本           #text            3        文本内容（不包含 html）
                */
                alert(oDiv.childNodes[0].nodeName)      //EM
                alert(oDiv.childNodes[0].nodeType)      //1
                alert(oDiv.childNodes[0].nodeValue)     //null

                alert(oDiv.childNodes[1].nodeName)      //#text
                alert(oDiv.childNodes[1].nodeType)      //3
                alert(oDiv.childNodes[1].nodeValue)     //文本文本



                /*
                    firstChild      快速找到元素节点子节点的第一个
                    lastChild       快速找到元素节点子节点的最后一个
                */
                alert(oDiv.firstChild.nodeName)         //EM
                alert(oDiv.lastChild.nodeName)          //STRONG
            }
        </script>
    </head>
    <body>
        <div id="div1"><em>斜体</em>文本文本<strong>粗体</strong></div>
    </body>
</html>