使用 DOM 进行 web 和 XML 开发的示例

本章提供了一些介绍如何使用 DOM 进行 Web 以及 XML 开发的较长示例。在可能的情况下，示例只使用 JavaScript 中较常见的 API、技巧以及模式来操作文档对象。

示例 1：高度和宽度

下面的示例展示了不同尺寸的图片对 height 和 width 属性的使用：

html


  
    宽度/高度示例
    
  
  
    

      图片 1：无高度、宽度及样式
      
    


    

      图片 2：height="50"，width="500"，无样式
      
    


    

      图片 3：无高度、宽度，样式中设置了“height: 50px; width: 500px;”

示例 2：图片属性

html


  
    修改图片的边框

    
  

  
    

      border test

示例 3：修改样式

在这个简单的例子中，HTML 段落元素的一些基本样式属性是使用该元素上的样式对象和该对象的 CSS 样式属性来访问的，这些对象可以从 DOM 中检索和设置。在这个示例中，你是直接操作各个样式的。在下一个例子中（见示例 4），你可以使用样式表及其规则来改变整个文档的样式。

html


  
    改变颜色和字体大小的示例

    
  
  
    

      链接文字

示例 4：使用样式表

document 对象的 styleSheets 属性返回该文档中已加载的样式表列表。你可以使用 styleheet、style 和 CSSRule 对象单独访问这些样式表及其规则，如本例所示，它将所有的样式规则选择器打印到控制台。

js
const ss = document.styleSheets;

for (let i = 0; i < ss.length; i++) {
  for (let j = 0; j < ss[i].cssRules.length; j++) {
    dump(`${ss[i].cssRules[j].selectorText}\n`);
  }
}

下面的是一个只定义了三条样式规则的单个样式表的文档：

css
body {
  background-color: darkblue;
}
p {
  font-family: Arial;
  font-size: 10pt;
  margin-left: 0.125in;
}
#lumpy {
  display: none;
}

该脚本的输出是这样的：

BODY
P
#LUMPY

示例 5：事件传播

本实例以一种非常简单的方式演示了事件是如何在 DOM 中启动和处理的。当这个 HTML 文档的 BODY 加载时，一个事件监听器被注册在 TABLE 的顶行。事件监听器通过执行函数 stopEvent 来处理事件，它改变了表格底部单元格的值。

然而，stopEvent 也调用了事件对象方法 event.stopPropagation，它使事件不再向 DOM 中冒泡。请注意，表格本身有一个 onclick 事件处理器，当表格被点击时应该显示一条信息。但是 stopEvent 方法已经停止了传播，所以在表格中的数据被更新后，事件阶段实际上已经结束，并且显示了一个警报框来确认这一点。

html


  
    事件传播

    

    
  

  
    

      

        一
      

      

        二

示例 6：getComputedStyle

这个例子演示了如何使用 window.getComputedStyle 方法来获取一个元素的样式，这些样式不是用 style 属性或用 JavaScript 设置的（例如 elt.style.backgroundColor="rgb(173, 216, 230)"）。后面这些类型的样式可以用更直接的 elt.style 属性来检索，其属性在 DOM CSS 属性列表中列出。

getComputedStyle() 返回一个 CSSStyleDeclaration 对象，其各个样式属性可以用这个对象的 getPropertyValue() 方法进行引用，正如下面的示例文档所示。

html


  
    getComputedStyle 示例

    

    
  

  
    
 


    

      

        
        height max-width
        bg-color

示例 7：显示事件对象的属性

本示例使用 DOM 方法来显示 onload event 对象的所有属性及其在表格中的值。它还展示了一种有用的技术，即使用 for...in 循环来迭代对象的属性以获取其值。

事件对象的属性在不同的浏览器之间有很大的不同，WHATWG DOM 标准列出了标准的属性，然而许多浏览器对这些属性做了很大的扩展。

把下面的代码放到一个空白的文本文件中，并把它加载到各种浏览器中，你会对不同数量和名称的属性感到惊讶。你可能还想在页面中添加一些元素，从不同的事件处理程序中调用这个函数。

html


  
    
    显示事件的属性

    

    
  

  
    
DOM  事件对象的属性列表

示例 8：使用 DOM Table 接口

DOM HTMLTableElement 接口提供了一些用于创建和操作表格的便利方法。两个经常使用的方法是 HTMLTableElement.insertRow 和 HTMLTableRowElement.insertCell。

要增加一行和一些单元格到现有的表：

html

  

    Row 0 Cell 0
    Row 0 Cell 1

备注