36-JavaScript-DOM-dom编程初解

1. Node 对象


    Node 对象是整个 DOM 的主要数据类型。
    节点对象代表文档树中的一个单独的节点。
    节点可以是元素节点、属性节点、文本节点.

    参考: http://www.w3school.com.cn/xmldom/dom_node.asp
    参考DHTML: DHTML网页制作完全手册_.chm

2. 常用属性


    ① nodeName    String  节点名称

    ② nodeValue   String  节点值

    ③ nodeType    Number  节点类型

        参考: http://www.w3school.com.cn/xmldom/dom_nodetype.asp

        36-JavaScript-DOM-dom编程初解_第1张图片

    ④ 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 onclick="showDivInfo()">ground div 's base info</button> <br/>
    <button onclick="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

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



你可能感兴趣的:(JavaScript,dom)