• DOM详解


    一、简介

    DOM即(Document Object Model):文档对象模型,用来将标记型文档封装成对象,并将标记型文档中的所有内容(标签、文本、属性等)都封装成对象。即标记型文档的一种解析方式。因为封装为对象就可以对其中的属性和行为进行调用,以便于对这些文档及文档中的内容进行更方便的操作。

    DOM解析方式:将标记型文档解析为一颗dom树,而树中的内容都封装为节点对象。
    按照标签的层次关系体现出标签的所属,形成一个树状结构。所以我们将DOM解析文档形成的document对象称为dom树,而树中的标签以及文本甚至属性称为节点。这个节点也称为对象。标签通常也称为页面中的元素。
    注意:这个DOM解析的好处是可以对树中的节点进行任意操作,如增删查改。但也有弊端:这种解析需要将标记型文档加载进内存。意味着如果文档体积很大时较为浪费空间。

    二、另一种解析方式:SAX

    是由一些组织定义的一种民间常用的解析方式,并不是w3c标准,而DOM是w3c的标准。
    SAX的解析方式:基于事件驱动的解析。好处:获取数据的速度快。弊端:不遵从增删查改操作。

    三、DOM三种模型

    DOM level 1:将html文档封装成对象。
    DOM level 2:在level1的基础上加入了新功能,比如解析名称空间。
    DOM level 3:将xml文档封装成了对象。

    四、DHTML:动态html

    不是一门语言,而是多项技术综合体的简称,这些技术包括HTML、CSS、DOM、JavaScript。
    四种技术(语言)在动态html中扮演的角色:
    HTML:用标签封装数据。即负责提供标签,对数据进行封装,目的是便于对该标签中的数据进行操作。
    CSS:对数据样式进行定义。即负责提供样式属性,对标签中的数据进行样式的定义。
    DOM:将文档和标签等所有内容进行解析。即负责将标记型文档及文档中的内容进行解析。并封装成对象,在对象中定义了更多的属性和行为,便于对对象进行操作。
    JS:对页面行为进行定义(页面动态效果)。即负责提供程序设计语言,对页面中的对象进行逻辑操作。
    所以JavaScript是DHTML的主力编程语言。

    五、BOM:Browser Object Model(浏览器对象模型)

    这个模型方便于操作浏览器。浏览器对应的对象就是Window对象。

    六、获取节点对象

    DOM将标记型文档封装为了document对象,而文档中的内容封装成了节点对象。常见的节点对象有:标签、属性、文本。
    获取节点对象的方法:
    方式一:通过id获取:getElementByID();

     1 <script type="text/javascript">
     2 function changeDiv(){
     3 //通过id获取div标签
     4 var divNode = document.getElementById("divId");
     5 //操作该节点,如获取该节点的nodeName、nodeType、nodeValue
     6 
     7 //获取并修改文本数据
     8 divNode.innerHTML = "???????".fontcolor("red");
     9 }
    10 </script>
    11 <input type="button" value="点击查看效果" onclick="changeDiv()"/>
    12 <div id="divId">这是一个div节点</div>
    View Code

    方式二:通过name属性获取节点(因为name可以相同,所以返回的是一个数组)getElementsByName();

     1 <script type="text/javascript">
     2 function show(){
     3 //通过name获取节点数组
     4 var nodes = document.getElementsByName("haha");
     5 //
     6 var divNode = nodes[0];
     7 var textNode = nodes[1];
     8 
     9 document.write(divNode.innerHTML+"<br/>"+textNode.value);
    10 }
    11 </script>
    12 <input type="button" value="点击查看效果" onclick="show()"/>
    13 <div name="haha">这是一个div节点</div>
    14 <input type="text" value="请输入任意内容..." name ="haha"/>
    View Code

    方式三:对所以标签都适用的方法:像<a>这样的标签既没有id,也没有name,就可以直接通过标签名来获取:getElementsByTagName();

     1 <script type="text/javascript">
     2 function show(){
     3 //通过标签名获取节点数组
     4 var nodes = document.getElementsByTagName("a");
     5 //
     6 var node1 = nodes[0];
     7 var node2 = nodes[1];
     8 
     9 document.write(node1.href+"<br/>"+node2.href);
    10 }
    11 </script>
    12 <input type="button" value="获取以下链接地址" onclick="show()"/>
    13 <a href="http://www.w3school.com.cn">W3C官网</a>
    14 <a href="http://www.cnblogs.com/fzz9/">博客园主页</a>
    View Code

    七、通过节点层次关系获取节点

    节点的层次关系:
    1、父节点:parentNode(一个父节点)
    2、子节点:childNodes(若干个子节点)
    3、兄弟节点:上一个兄弟节点:previousSibling;下一个兄弟节点:nextSibling

    八、节点的一般操作

    1、创建并添加
    2、删除节点
    3、替换&克隆节点

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
     5 <title>节点的一般操作</title>
     6 <style type="text/css">
     7     div{
     8         border:#FFFFFF 1px solid;
     9         200px;
    10         padding:20px;
    11         margin:10px;
    12         font-family:"华文中宋";
    13         font-size:20px;
    14     }
    15     #divTitle{
    16         border-left-80px;
    17         50px;
    18         padding:10px;
    19         margin:10px;
    20         background:#00dd66;
    21     }
    22     #div1{
    23         background:#0066FF;
    24     }
    25     #div2{
    26         background:#6600FF;
    27     }
    28     #div3{
    29         background:#66FF00;
    30     }
    31     #div4{
    32         background:#FF0066;
    33     }
    34     hr{
    35         border:#CCFF00 1px solid;
    36     }
    37 </style>
    38 </head>
    39 
    40 <body>
    41     <script type="text/javascript">
    42         //在div3中添加一个文本节点
    43         function creNode(){
    44             //创建文本节点
    45             var newText = document.createTextNode("蜡炬成灰泪始干");
    46             //获取div3节点
    47             var div3 = document.getElementById("div3");
    48             //添加
    49             div3.appendChild(newText);
    50         }
    51         //删除节点
    52         function delNode(){
    53             var divNode3 = document.getElementById("div3");
    54             //方法一:删除节点,参数为true时,连同子节点也一起上删除,此方法在IE中有效 
    55            //divNode3.removeNode(true);
    56            //方法二:使用父节点删除(推荐)
    57            divNode3.parentNode.removeChild(divNode3);
    58         }
    59         
    60         //克隆节点
    61         function updateNode(){
    62             var div1 = document.getElementById("div1");
    63             var div3 = document.getElementById("div3");
    64             var copyDiv = div3.cloneNode(true);
    65             div1.parentNode.replaceChild(copyDiv,div1);
    66         }
    67         
    68         //添加标题连接
    69         function setTitle(){
    70             //创建链接元素
    71             var title = document.createElement("a");
    72             title.href = "http://hanyu.baidu.com/shici/detail?pid=1d4e20feb969440989a03d6e0700f077&from=kg0";
    73             title.innerHTML = "无题";
    74             title.target = "_blank";
    75             //获取divTitle节点
    76             var divTitle = document.getElementById("divTitle");
    77             //添加
    78             divTitle.appendChild(title);
    79         }
    80     </script>
    81     
    82     <input type="button" value="创建并添加节点" onclick="creNode()" />
    83     <input type="button" value="删除节点" onclick="delNode()" />
    84     <input type="button" value="克隆节点" onclick="updateNode()" />
    85     <input type="button" value="查看" onclick="setTitle()" />
    86     <hr/>
    87     <div id="divTitle"></div>
    88     <div id="div1">相见时难别亦难</div>
    89     <div id="div2">东风无力百花残</div>
    90     <div id="div3"></div>
    91     <div id="div4">蜡炬成灰泪始干</div>
    92 </body>
    93 </html>
    View Code
  • 相关阅读:
    【转】PHP操作MongoDB【NoSQL】
    web前端响应式
    CSS Hack
    ES6特性
    zepto.js使用前注意
    移动端 isScroll自定义实现
    严格模式use strict
    node.js和express.js安装和使用步骤 [windows]
    JSONP理解和使用
    require.js+backbone.js基本使用
  • 原文地址:https://www.cnblogs.com/fzz9/p/7772149.html
Copyright © 2020-2023  润新知