javascript DOM model操作

DOM

D-document

O-object

M-Model

一、将文档想成一个倒数，每一部分（元素、内容、属性、注释）都是一个节点。

二、只要知道一个节点，按关系找到其它节点

父节点： parentNode

子节点（第一个，最后一个） childNodes firstChild lastChild

兄弟节点（上一个，下一个） nextSibling previousSlibing

三、找到节点：节点类型（nodeType）、节点名（nodeName）、节点值（nodeValue）

每个节点都拥有包含着关于节点某些信息的属性，这些属性是

nodeName （节点名称）

nodeType （节点类型）

nodeValue（节点值）

nodeName 属性含有节点名称

元素节点的nodeName 是标签名称

属性节点的nodeName 是属性名称

文本节点的nodeName 永远是#text

文档节点的nodeName 永远是#document

注释：nodeName 所包含的xml 元素的标签名称永远是大写的。

对于文本节点，nodeName 属性包含文本

对于属性节点，nodeValue属性包含属性值

nodeValue 属性对于文档节点和元素节点是不可用的

nodeType 属性可返回节点的类型

最重要的节点类型是：

元素类型节点类型

元素 1

属性 2

文本 3

注释 8

文档 9

可以在一个文档流中：

1.创建节点

document.createElement(节点元素名);

2.添加节点

appendChild(节点);

insertBefore(节点);

3.删除节点

removeChild(节点);

参考实例

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>节点操作</title>
    </head>
<body>
    content<br/>
    content<br/>
    content<br/>
    <div id="one">
        <b>bbbbbbbb</b>
        <s id="two">ssssssssssss</s><i>iiiiiii</i>
    </div>
    content<br/>
    content<br/>
    content<br/>
    <script type="text/javascript">
        function addNode(){
            var one = document.getElementById('one'); 
            var two = document.getElementById('two'); 
            var obj = document.createElement('a'); 
            obj.href= 'http://www.ybbqg.com';
            obj.tille= '追加节点';
            obj.textContent = 'nodeContent'; 
            //document.body.appendChild(obj);    //在body元素中追加节点
            //one.appendChild(obj);       //在指定元素中追加节点

            var u = document.createElement('u');
            u.name = 'uuuuuu'; 
            u.textContent = 'uuuuuuuuu'; 

            obj.appendChild(u); 
            //one.insertBefore(obj, two);       //在two元素之前添加
            //one.insertBefore(obj,  two.nextSibling);  //之前添加

            insertAfter(one, obj, two); 
     
        }

        //在之后添加节点
        function insertAfter(fobj, newobj, location){
            if (location.nextSibling.nodeType  == 1){
                fobj.insertBefore(newobj, location.nextSibling); 
            } else {
                fobj.appendChild(newobj); 
            }
        }

        //删除节点
        function delNode(){
            var one = document.getElementById('one'); 
            one.removeChild(one.lastChild); 
        }

    </script>
    <a href="javascript:addNode()">add</a>
    <a href="javascript:delNode()">del</a>
</body>
</html>

前望