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>

 

 

 

posted @ 2012-05-25 15:38  前望  阅读(413)  评论(0)    收藏  举报