zoukankan      html  css  js  c++  java
  • DHTML1(节点操作)

    1.DOM与DHTML概述:

    dom(Document Object Model)三层模型:
      dom1:将Html文档封装成对象
      dom2,dom3:将Xml文档封装成对象
    简单来说:将静态网页中的html标签(一经写好,固定了)"变活"(可操作)

    DHTML:dynamic html
    DHMTL就是HTML+CSS+JS+DOM
    html:负责将数据进行标签的封装
    dom:负责将标签以及标签中的数据封装成对象
    css:负责标签中数据的样式
    JS:将三者进行融合,通过程序设计方式来操作这些对象
    示意图:DOM树
    加载进内存的是一颗DOM树.这些标签以及标签的数据都是这棵树上的节点.

    百度百科:

    DOM的优势主要表现在:易用性强,使用DOM时,将把所有的XML/HTML文档信息都存于内存中,并且遍历简单.

    DOM的缺点主要表现在:效率低,解析速度慢,内存占用量过高,对于大文件来说几乎不可能使用。另外效率低还表现在大量的消耗时间,因为使用DOM进行解析时,将为文档的每个element、attribute、processing-instrUCtion和comment都创建一个对象,这样在DOM机制中所运用的大量对象的创建和销毁无疑会影响其效率。

    DOM树: (包含了标签,标签中的属性,标签中封装的数据)

    DOM树

    2.DOM节点获取:

    在上面的示意图中:

    根节点:Document
    如果父节点为:html
       直接子节点:head,body 
       兄弟节点:head是body兄弟节点
       a的下一个兄弟节点:h1,a没有上一个兄弟节点,属性是a节点对象的attributes集合的一员
       h1的上一个兄弟节点:a

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> DOM节点 </title>
      <style type="text/css">
       #divID{background-color:red;}
      </style>
     
     <script type="text/javascript">
       function demo(){
         var divObj=document.getElementById("divID");//获取到第一个ID为divID的对象
         //getNodeInfo(divObj);//name=DIV type=1 value=null(标签型节点为null)
         
       //1.获取div节点的父节点
         getNodeInfo(divObj.parentNode);//name=BODY type=1 value=null
       
       //2.获取div节点的子节点
         var childs=divObj.childNodes;
         //alert(childs.length);
         //getNodeInfo(childs[0]);//name=#text type=3 value=div标签中的内容
       
       //3.获取div节点的上一个兄弟节点
         //getNodeInfo(divObj.previousSibling);//name=#text type=3 value=空格(没有显示)
         //getNodeInfo(divObj.previousSibling.previousSibling);//name=INPUT type=1 value=null
       
       //4.获取div节点的下一个兄弟节点
         //getNodeInfo(divObj.nextSibling.nextSibling);//name=TABLE type=1 value=null
        
        
        //5.通过遍历获取到A节点
        /*
        var obj=divObj;
        while(((obj=obj.nextSibling).nodeName)!="A");
        getNodeInfo(obj);//name=A type=1 value=null
        */
        
        //6.获取节点td
        var tableObj=divObj.nextSibling.nextSibling;
        var tdObj;
        alert((tdObj=tableObj.getElementsByTagName("TD")).length);//4个td
        getNodeInfo(tdObj[0].childNodes[0]);//获取到单元格一的文本节点
                                            //name=#text type=3 value=单元格一
        //document的all集合
         var allObj=document.all;//它将获取到所有文档中所有的对象(标签对象,注释comment)
                                 //除了TextNode对象
       }
       
       function getNodeInfo(node){
        alert("name="+node.nodeName+" type="+
                       node.nodeType+" value="+node.nodeValue);
    
    /*也可以使用document.write*/

    }
    </script> </head> <body> <input type="button" onclick="demo()" value="演示"/> <div id="divID">
    div标签中的内容 <!--该ID与引用标签选择器的ID是一回事—>
    </
    div> <table> <tr> <td id="divID">单元格一</td> <td>单元格二</td> </tr> <tr> <td>单元格三</td> <td>单元格四</td> </tr> </table> <a href="http://www.baidu.com">百度一下</a> </body>

    1. getNodeInfo(divObj.previousSibling);的打印结果是由于

        <input type="button" onclick="demo()" value="演示"/>
        <div id="divID">
       之间有一个换行被浏览器解析为空白文本节点(也有的浏览器可能不解析该空白文本节点)即:name=#text type=3 value=空格(没有显示)

        <input type="button" onclick="demo()" value="演示"/><div id="divID">
         以上写法获取到的上一个兄弟节点是input

    2.document对象中的方法:
    a.getElementById:通过ID属性值获取对应的节点对象.如果有多个标签的id值相同,获取到第一个id所属对象,尽量保证id唯一性
     
    b.getElementsByName 根据标签的 NAME属性 值获取对象,返回对象数组(集合):例如:同一组radio的name值相同 
     
    c.getElementsByTagName:既没有id,也没有name时,可以通过标签名来获取节点对象,返回是对象集合(数组).注意:document中的该方法将作用于整个文档.

    3.节点类型:
      标签型节点的type为1(nodeType属性)
      属性节点:类型:2
      文本性节点:类型:3
      注释型节点:类型:8
      document:类型:9

    父节点 parentNode
    直接子节点 childNodes(返回一个对象数组)
    兄弟节点
        上一个兄弟节点 previousSibling
        下一个兄弟节点 nextSibling
    一个父节点可能有多个直接子节点,但是一个直接子节点只有一个父节点.

    3.将文档中的节点以层级方式输出:

    listNodes.js:

    /*JavaScript*/
     /*递归遍历*/
     function listNodes(node,level){
           printNodes(node,level);
           var childs=node.childNodes;
         
           ++level;
          
           for(var index=0;index<childs.length;++index)
               if(childs[index].hasChildNodes())
                 listNodes(childs[index],level);
               else
                 printNodes(childs[index],level);
                 
        }
        
     var str="";
     
     /*为了凸显层级关系*/
     function nodeLevels(level){
          var blankStr="";
          for(var i=0;i<level;++i)
            blankStr+="&nbsp;";
          
         blankStr+="|--";
         return blankStr;
        }
    
     function printNodes(node,level){
            
            str += nodeLevels(level)+node.nodeName+
                   "..."+node.nodeType+"..."+node.nodeValue+" "+"<br/>";
               
        }
      function getDocumentNodes(){
        listNodes(document,0);
        document.write(str);
      }

    第二种方法:

    var str="";
     var newWindow=window.open("","_blank");
     function printNodes(node,level){
            str = nodeLevels(level)+node.nodeName+
                   "..."+node.nodeType+"..."+node.nodeValue+" "+"<br/>";
             
          newWindow.document.write(str);      
        }
      function getDocumentNodes(){
        listNodes(document,0);
        //document.write(str);//正常输出,输出的是最终的字符串
      }
      /*
      不在新的窗口中写入会引发类似下面问题:
      顺序遍历1,2,3
      遍历1->页面又写入1->2,3,1
      遍历2->页面又写入2->3,1,2
      遍历3->页面又写入3->1,2,3
      .....
      死循环 
      */
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title>列出文档中所有节点的层级</title>
      <script type="text/javascript" src="ListNodes.js"></script>
       <script type="text/javascript">
          alert(document.getElementsByTagName("BODY").length);//0 
                                                              //此时浏览器还未加载body标签              
          // getDocumentNodes();
       </script>
     </head>
    
     <body>  
       <!--测试注释-->
       <script type="text/javascript">
          alert(document.getElementsByTagName("BODY").length);//1
          getDocumentNodes();
      </script>
    
     </body>
    </html>

    文档中节点层级

    写在<head></head>中的脚本注意alert(document.getElementsByTagName("BODY").length);会在加载body前执行,由于body还未加载因此获取不到.

    一般将JS语句封装到函数中,那么只有在调用该函数才会执行,例如:onclick=”click()” 在事件源上注册事件,虽然JS中的click函数定义在<head></head>中,但是没调用,不执行,直到鼠标左键被按下->事件被激发,才会调用click方法去处理.当你去点击鼠标时->此时页面已加载完毕.

    关于HTML页面加载可以参考:

    http://blog.csdn.net/sun93732/article/details/5898605

     

  • 相关阅读:
    《NoSQL精粹》读书笔记
    react+flux编程实践(一) 基础篇
    MongoDB索引(一) --- 入门篇:学习使用MongoDB数据库索引
    (译+注解)node.js的C++扩展入门
    深入解析Javascript异步编程
    (译)package.json详解
    Protobuf学习
    Redis学习
    MySQL学习-常用命令整理
    TCP/IP-TCP
  • 原文地址:https://www.cnblogs.com/yiqiu2324/p/3273255.html
Copyright © 2011-2022 走看看