36-JavaScript-DOM-dom编程初解

╰+哭是因爲堅強的太久メ 2022-09-18 12:51 122阅读 0赞

# 1. Node 对象 #

Node 对象是整个 DOM 的主要数据类型。  
节点对象代表文档树中的一个单独的节点。  
节点可以是元素节点、属性节点、文本节点.  
  
参考: [http://www.w3school.com.cn/xmldom/dom\_node.asp][http_www.w3school.com.cn_xmldom_dom_node.asp]  
参考DHTML: [DHTML网页制作完全手册\_.chm][DHTML_.chm]

# 2. 常用属性 #

① nodeName String 节点名称  
  
② nodeValue String 节点值  
  
③ nodeType Number 节点类型  
  
参考: [http://www.w3school.com.cn/xmldom/dom\_nodetype.asp][http_www.w3school.com.cn_xmldom_dom_nodetype.asp]  
  
![SouthEast][]  
  
④ firstChild Node  
  
⑤ lastChild Node  
  
⑥ childNodes NodeList  
  
⑦ previousSibling Node 前一个兄弟节点  
  
⑧ nextSibling Node 后一个兄弟节点  
  
⑨ ownerDocument Document  
  
⑩ 其他  
A) textContent 设置或返回节点及其后代的文本内容。(火狐)  
B) text 返回节点及其后代的文本（IE 独有的属性）。  
C) attributes Map 该节点属性集对象 (Element)

示例:

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    
    <script type="text/javascript">
    var ground;
    
    function showDivInfo() {
        ground = $("ground");
        // console.info(ground);
        console.info( ground.nodeName );    // DIV
        console.info( ground.nodeType );    // 1
        console.info( ground.nodeValue );   // null
        console.info( ground.textContent );
    }
    
    function showChildren() {
        ground = $("ground");
        var children = ground.childNodes;
        
        console.info( children );
        console.info( children.length );
    
        // 遍历子节点
        for(var i = 0; i < children.length; i++ ) {
            console.info( "nodeName: " + children[i].nodeName 
                     + "   nodeType: " + children[i].nodeType  
                     + "   nodeValue: " + children[i].nodeValue);
        }
    /*
        nodeName: #text   nodeType: 3   nodeValue: ("\n ")
        nodeName: DIV     nodeType: 1   nodeValue: null
        nodeName: #text   nodeType: 3   nodeValue: ("\n ")
        nodeName: DIV     nodeType: 1   nodeValue: null
        nodeName: #text   nodeType: 3   nodeValue: ("\n ")
    */
    }
    
    function $(id) {
        return document.getElementById(id);
    }    
    
    </script>    
    
    <style type="text/css">
     div {
        border: 1px solid black;
        background-color: gray;
        margin: 2px;
        padding: 5px;
        width: 400px;
     }    
     #ground {
        width: 500px;
     }
    </style>
    
    </head>
    <body>
        
        <div id="ground">
            <div id="rabbit">a rabbit is eating carrots! </div>
            <div id="dog">a dog is eating bones !</div>
        </div>
        
        <button οnclick="showDivInfo()">ground div 's base info</button> <br/>
        <button οnclick="showChildren()">ground div 's children</button> <br/>
    
    </body>
    
    </html>

# 3. 常用方法  #

① hasChildNodes() Boolean  
  
判断当前节点是否拥有子节点。  
  
② appendChild(newchild) Node  
  
向节点的子节点列表的末尾添加新的子节点  
  
③ removeChild(node) Node  
  
删除（并返回）当前节点的指定子节点  
  
④ replaceChild(new\_node,old\_node) Node  
  
将某个子节点替换为另一个  
  
⑤ insertBefore(newchild,refchild) Node

已有的子节点前插入一个新的子节点

[http_www.w3school.com.cn_xmldom_dom_node.asp]: http://www.w3school.com.cn/xmldom/dom_node.asp
[DHTML_.chm]: http://download.csdn.net/detail/wuqinfei_cs/6607119
[http_www.w3school.com.cn_xmldom_dom_nodetype.asp]: http://www.w3school.com.cn/xmldom/dom_nodetype.asp
[SouthEast]: /images/20220828/f1fe9bda10614d6cba4aedf13a42e024.png