• 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>
    

     

     

    前望
  • 相关阅读:
    聊聊豆瓣阅读kindle版..顺便悼念一下library.nu…
    PhoneGap+jQm webapp本地化(1)环境搭建以及资源介绍
    尝试分析Q群作为技术群是个不恰当的选择!
    某android平板项目开发笔记计划任务备份
    android 自动化测试的傻瓜实践之旅(UI篇) 小试身手
    latex/Xelatex书籍排版总结顺便附上一本排好的6寸android书…
    某android平板项目开发笔记自定义sharepreference UI
    android ORM框架的性能简单测试(androrm vs ormlite)
    网络管理员必学手册
    PPT插入FLV视频文件的简单方法
  • 原文地址:https://www.cnblogs.com/ybbqg/p/2518117.html
Copyright © 2020-2023  润新知