66 元素节点属性和attributes

00

<!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 src="C:\Users\Administrator\Desktop\网页编程\tool.js"></script>
        <script>
            /*
                ownerDocument   属性
                【注】ownerDocument
                属性返回该节点的文档对象根节点，返回的对象相当于 document



                parentNode previousSibling nextSibling 属性

                parentNode              属性返回该节点的父节点
                previousSibling         属性返回该节点的前一个同级节点
                nextSibling             属性返回该节点的后一个同级节点
                */

            window.onload = function(){
                var oDiv = document.getElementById("div1")

                alert(oDiv.ownerDocument == document)   //true


                alert(oDiv.parentNode.nodeName)     //BODY

                removeSpaceNode2(oDiv.parentNode)
                alert(oDiv.previousSibling.nodeName)    //SPAN

                alert(oDiv.nextSibling.nodeName)        //P               
            }

            
        </script>
    </head>
    <body>
        <span></span>
        <div id="div1"></div>
        <p></p>
    </body>
</html>

01 attributes

<!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>
            /*
                属性节点
                attributes属性返回该节点的属性节点【集合】
                集合特点：1、不重复  
                         2、无序

                
                属性
                attributes.length   返回属性节点个数
                */

            window.onload = function(){
                var oDiv = document.getElementById("div1")
                alert(oDiv.attributes)      //[object NamedNodeMap]

                alert(oDiv.attributes.length)       //4


                //访问其中一个属性节点
                alert(oDiv.attributes.getNamedItem("id"))       //[object Attr]
                alert(oDiv.attributes["id"])        //[object Attr]


                /*
                属性节点
                    nodeName        nodeType        nodeValue
                    属性名称           2             属性值
                */
               alert(oDiv.attributes["id"].nodeName)        //id
               alert(oDiv.attributes["id"].nodeType)        //2
               alert(oDiv.attributes["id"].nodeValue)       //div1
            }
        </script>
    </head>
    <body>
        <div id="div1" title="hello" name="world" class="box"></div>
    </body>
</html>