57 byid元素节点属性

<!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>
            /*
                document.getElementById(id);
                【功能】通过当前元素节点的id，获取对应元素节点

                元素节点属性
                    通过这个节点对象，访问它的一系列属性。
                    tagName     获取元素节点的标签名
                    innerHTML   获取元素节点标签间的内容        解析标签


                HTML属性的属性
                    id
                    title
                    style
                    className   在获取class时，不能直接使用class，必须使用className
                访问这些属性：
                    元素节点.属性名
                    元素节点[属性名]
            */

            window.onload = function(){ //在页面加载完成以后执行的函数
                var oDiv = document.getElementById
                ("div1")
                alert(oDiv)
                alert(oDiv.tagName)         //DIV
                alert(oDiv.innerHTML)       //协议
                oDiv.innerHTML = "<h1>我<h1/>"      //赋值的时候会直接解析标签


                alert(oDiv.id)              //div1
                alert(oDiv.title)           //hello
                alert(oDiv.className)       //box
                
                oDiv.title = "word"
                oDiv.className = "oxd"


                alert(oDiv.style)           //[object CSSStyleDeclaration]  样式对象
                alert(oDiv.style.width)     //300px
                oDiv.style.width = "100px"

                /*
                    在style样式中
                    background-color    使用-链接的属性
                    访问的时候，需要将-去掉，然后将后续单词的首字母大写。
                */
                alert(oDiv.style.backgroundColor)       //red
                oDiv.style.backgroundColor = "yellow"
            }
        </script>
    </head>
    <body>
        <div id="div1" title="hello" class="box" style="width: 300px; height: 300px; background-color: red;">协议</div>
    </body>
</html>
57 byid元素节点属性

推荐阅读更多精彩内容
