学习第七天(2019-11-20)

第12章 DOM2和DOM3

DOM2和DOM3分为许多模块,分别描述了DOM的某个非常具体的子集。

一、DOM的变化

      DOM2级和3级的目的在于扩展DOM API,以满足操作XML的所有需求,同时提供更好的错误处理及特性检测能力。从某种意义上讲,实现这一目的很大程度意味着对命名空间的支持。这些变化主要在以下方面:

  针对XML命名空间的变化,下面的类型都针对命名空间进行了变化:

      1. Node 类型 

      2. Document 类型

      3. Element 类型 

      4. NamedNodeMap 类型 

   

      DOM的其他部分在“DOM2级核心”中也发生了一些变化。这些变化与 XML命名空间无关,而是更倾向于确保 API的可靠性及完整性,主要有:

        1. DocumentType 类型的变化 

        2. Document 类型的变化

        3. Node 类型的变化

        4. 框架的变化

 

二、样式

   在 HTML中定义样式的方式有3种:通过<link/>元素包含外部样式表文件、使用<style/>元素定义嵌入式样式,以及使用style特性定义针对特定元素的样式。“DOM2级样式”模块围绕这3种应用样式的机制提供了一套 API。要确定浏览器是否支持DOM2级定义的 CSS能力,可以使用下列代码。 

      var supportsDOM2CSS = document.implementation.hasFeature("CSS", "2.0");

      var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2", "2.0");

样式的变化主要体现在下面的几个方面:

      1、访问元素的样式(包括) : DOM样式属性和方法 、 计算的样式;

      2、操作样式表;

      3、与HTML元素样式相关的如何确定页面中元素的大小。

 

三、遍历

 

     “DOM2级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM结构的类型:NodeIterator和TreeWalker(基于深度优先搜索)。

     使用如下代码可以检测浏览器对 DOM2级遍历能力的支持情况。

1 var supportsTraversals = document.implementation.hasFeature("Traversal", "2.0");
2 var supportsNodeIterator = (typeof document.createNodeIterator == "function"); 
3 var supportsTreeWalker = (typeof document.createTreeWalker == "function"); 

    1、NodeIterator

     NodeIterator 类型的两个主要方法是 nextNode()和 previousNode(),基本使用如下:

      以下面的HTML片段为例,

          <div id="div1">   

               <p><b>Hello</b> world!</p>     

               <ul>         

                      <li>List item 1</li>         

                      <li>List item 2</li>       

                      <li>List item 3</li>     

              </ul> </div> 

       若想要遍历<div>元素中的所有元素,可以使用下列代码:

1 var div = document.getElementById("div1");
2 var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, null, false);
3 var node = iterator.nextNode();
4 while (node !== null) {     
5      alert(node.tagName);        //输出标签名     
6      node = iterator.nextNode();
7 }

 

     2、TreeWalker 

       TreeWalker是NodeIterator的一个更高级的版本。TreeWalker 真正强大的地方在于能够在DOM结构中沿任何方向移动。使用TreeWalker遍历DOM树,对于上面的HTML片段,即使不定义过滤器,也可以取得所有<li>元素,如下面的代码所示。 

1 var div = document.getElementById("div1");
2 var walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null, false); 
3 walker.firstChild(); //转到<p>
4 walker.nextSibling(); // 转到<ul> 
5 var node = walker.firstChild(); //转到第一个<li>
6 while (node !== null) {
7     alert(node.tagName);
8     node = walker.nextSibling();
9 } 

 

四、范围

1、范围是选择DOM结构中特定部分,然后再执行相应操作的一种手段。 

    以下面的 HTML代码为例。  

    <!DOCTYPE html>
        <html>
           <body>
               <p id="p1"><b>Hello</b> world!</p>
           </body>
    </html>
我们可以使用下列代码来创建范围:

1 var range1 = document.createRange();
2 var range2 = document.createRange();
3 var p1 = document.getElementById("p1");
4 range1.selectNode(p1);
5 range2.selectNodeContents(p1);

 

2、使用范围选区可以在删除文档中某些部分的同时,保持文档结构的格式良好,或者复制文档中的相应部分。

3、IE8及更早版本不支持“DOM2级遍历和范围”模块,但它提供了一个专有的文本范围对象,可以用来完成简单的基于文本的范围操作。IE9完全支持DOM遍历。

posted @ 2019-11-20 23:31  xiongbing  阅读(130)  评论(0编辑  收藏  举报