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>

 

 

 

你可能感兴趣的:(JavaScript)