DOM初探（6）——节点的四个属性

节点的四个属性：

nodeName

元素的标签名，以大写形式表示，只读

nodeValue

Text节点或Comment节点的文本内容，可读写

nodeType(重要)

该节点的类型，只读

attributes

Element节点的属性集合

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
    </head>
    <body>
        <div>123
            <!-- this is comment -->
            <strong></strong>
            <span></span>
            <em></em>
            <i></i>
            <b></b>
        </div>
        <script type="text/javascript">
            var div = document.getElementsByTagName("div")[0];
        </script>
    </body>
</html>

第一个属性:nodeName

只能读取值，不能写入值！！

第二个属性：nodeValue

只有文本节点和注释节点才有的！

能读取，能写入！！

第三个属性：nodeType

最有用的一个属性，它可以帮咱们分辨这个节点到底是什么节点。-----只读

(元素节点—1；属性节点—2；文本节点—3；注释节点—8；document—9；DocumentFrangment--11)

属性节点存在，但是几乎没有什么用。

现在我把div下面的元素节点全部跳出来，放到一个数组里面，给你返回：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
    </head>
    <body>
        <div>123
            <!-- this is comment -->
            <strong></strong>
            <span></span>
            <em></em>
            <i></i>
            <b></b>
        </div>
        <script type="text/javascript">
            var div = document.getElementsByTagName("div")[0];
            function retElementChild(node){
                //no children
                var arr = [],
                    child = node.childNodes,
                    len = child.length;
                for(var i = 0; i < len; i ++){
                    if(child[i].nodeType == 1)
                        arr.push(child[i])
                }
                return arr;
            }
            console.log(retElementChild(div));
        </script>
    </body>
</html>

我们还可以做得更像一点：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
    </head>
    <body>
        <div>123
            <!-- this is comment -->
            <strong></strong>
            <span></span>
            <em></em>
            <i></i>
            <b></b>
        </div>
        <script type="text/javascript">
            var div = document.getElementsByTagName("div")[0];
            function retElementChild(node){
                //no children
                var temp = {
                    length : 0,
                    push : Array.prototype.push,
                    splice : Array.prototype.splice
                },
                child = node.childNodes,
                len = child.length;
                for(var i = 0; i < len; i ++){
                    if(child[i].nodeType == 1)
                    temp.push(child[i])
                }
                return temp;
            }
            console.log(retElementChild(div));
        </script>
    </body>
</html>

第四个属性：attributes

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
    </head>
    <body>
        <div id="only" class="demo"></div>
        <script type="text/javascript">
            var div = document.getElementsByTagName("div")[0];
        </script>
    </body>
</html>

把元素的属性放到类数组里面去。

你可以用attributes把元素的属性名和属性值取出来

你也可以把属性值改了，但是属性名你改不了：

DOM初探（6）——节点的四个属性

猜你喜欢