JavaScript（七）

最新推荐文章于 2025-01-02 13:44:24 发布

原创最新推荐文章于 2025-01-02 13:44:24 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

JavaWeb 专栏收录该内容

48 篇文章

订阅专栏

本文详细介绍了DOM（文档对象模型）的概念，包括其发展历程、不同级别、浏览器支持情况以及如何使用DOM进行节点、属性和样式的操作。

1.30 DOM简介

DOM（Document Object Model,文档对象模型）是一种独立于浏览器类型来表示文档的方法，它允许开发人员通过一组通用的对象、属性、方法和事件来访问文档，并通过脚本动态修改页面内容。
DOM是由W3C制定的标准，它为应用程序访问和操作HTML和XML文档提供了一个标准的API（应用程序编程接口）。

1.31 DOM级别

根据W3C的DOM规范，DOM是HTML与XML的应用编程接口，DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。

☞ DOM 1级：DOM1级（DOM Level 1）于1998年10月成为W3C的推荐标准。DOM1级由两个模块组成：DOM核心（DOM Core）和DOM HTML。其中，DOM核心规定的是如何映射基于XML的文档结构，以便简化对文档中任意部分的访问和操作。DOM HTML模块则在DOM核心的基础上加以扩展，添加了针对HTML的对象和方法。

☞ DOM 2级：如果说DOM 1级的目标主要是映射文档的结构，那么DOM 2级的目标就要宽泛多了。DOM2级在原来DOM的基础上又扩充了鼠标和用户界面事件、范围、遍历（迭代DOM文档的方法）等细分模块，而且通过对象接口增加了对CSS（层叠样式表）的支持。DOM 1级中的DOM核心模块也经过扩展开始支持XML命名空间。

2级DOM模型引进了几个新DOM模型模块来处理新的接口类型：
DOM视图（DOM Level 2 Views ）：描述跟踪一个文档的各种视图（使用CSS样式设计文档前后）的接口；
DOM事件（DOM Level 2 Events）：描述事件接口；
DOM样式（ DOM Level 2 Style ）：描述处理基于CSS样式的接口；
DOM遍历与范围（DOM Level 2 Traversal and Range ）：描述遍历和操作文档树的接口；

☞ DOM 3级：DOM 3级则进一步扩展了DOM，引入了以统一方式加载和保存文档的方法–在DOM加载和保存（DOM Load and Save）模块中定义；新增了验证文档的方法–在DOM验证（DOM Validation）模块中定义。DOM3级也对DOM核心进行了扩展，开始支持XML 1.0规范，涉及XML Infoset、XPath和XML Base。
Web浏览器对DOM的支持：

☞在DOM标准出现了一段时间之后，Web浏览器才开始实现它。微软在IE5中首次尝试实现DOM，但直到IE5.5才算是真正支持DOM 1级。在随后的IE6和IE7中，微软都没有引入新的DOM功能，而到了IE8才对以前DOM实现中的bug进行了修复。

☞Netscape直到Netscape 6（Mozilla 0.6.0）才开始支持DOM。在Netscape 7之后，Mozilla把开发重心转向了Firefox浏览器。Firefox 3完全支持DOM 1级，几乎完全支持DOM 2级，甚至还支持DOM 3级的一部分。

☞目前，支持DOM已经成为浏览器开发商的首要目标，主流浏览器每次发布新版本都会改进对DOM的支持。下表列出了主流浏览器对DOM标准的支持情况。
如何检测Web浏览器对DOM的支持：

☞ 在JavaScript中可以使用implementation.hasFeature方法检查浏览器的DOM兼容性，例如下面代码可以检查浏览器是否支持DOM Level 1的HTML特性：
var s=document.implementation.hasFeature(“HTML”,”1.0”);
下表给出了DOM的标准特性及其说明

1.32 DOM的节点层次
- DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息或标记。每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。
  以下面的文档为例：
- 它可以用一下的DOM树来描述：
- 在这个DOM树中，文档节点（document）是根节点，文档节点只有一个子节点，即元素，我们称之为文档元素（用document的documentElement属性表示）。文档元素是文档的最外层元素，文档中的其他元素都包含在文档元素中。HTML中的每一个标记都可以通过DOM树中的一个节点来表示：元素（element）通过元素节点表示，特性（attribute）通过特性节点表示，注释（comment）通过注释节点表示。在DOM标准中，一共定义了12种节点类型。
- 节点类型：DOM定义了一个Node接口以及很多节点类型来表示DOM树中的各个节点。Node接口中定义了12个常量，它们分别代表了DOM标准中12种节点类型，所有DOM节点都可以通过nodeType属性获取器节点类型信息。
  
  下表给出了这12种类型的定义及说明：
上述节点中，最常用的有两种：

☞ 元素节点（Element）
☞ 文本节点（Text）
除节点外，DOM还定义了一些助手对象，它们可以和节点一起用，但不是DOM文档必有的部分。

☞ NodeList－－节点数组，按照数值进行索引;用来表示和一个元素的子节点。
☞ NamedNodeMap－－同时使用数值和名字进行索引的节点表，用于表示元素特性。
Node节点也定义了一些所有节点类型都包含的特征和方法：

1.33 使用DOM
- 访问指定节点：已知某个节点的某个属性（如id、name），在DOM树中寻找符合条件的节点。相关的方法包括：getElementById()、getElementsByName()和getElementsByTagName()。
  
  ☞ getElementById()方法：返回对拥有指定ID 的第一个对象的引用，应用该方法可以根据传入的id参数返回指定的元素节点。在HTML文档中，元素的ID属性是该元素对象的唯一标识，因此getElementById()方法是最快的节点访问方法。
  
  *需要注意的是：IE7及其更低版本在实现getElementById()方法是存在一个缺陷，那就是如果某个元素的name属性与getElementById()方法的参数值相同， getElementById()方法会返回该元素。但在其后续版本中已更正此bug，当然，最后的做法是：建议web开发人员将name和id属性设置为相同的值，从而确保getElementById()方法在各种浏览器中返回相同的结果。
  
  *另外，getElementById()方法中接收的参数ID是严格区分大小写的，使用时务必要注意。
  
  ☞ getElementsByName()方法：该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所以getElementsByName() 方法返回的是一个包含若干个元素的数组，而不是一个元素。
  
  **E7及其更低版本中，getElementsByName()方法存在与getElementById()方法类似的bug，它也会同时匹配元素的name和id属性，使用时需要特别注意。
  
  ☞ getElementsByTagName()方法：该方法返回带有指定标签名的对象的集合。getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。如果把特殊字符串 “*” 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。
  
  *递给 getElementsByTagName() 方法的字符串不区分大小写。

1.34 document对象

document对象的常用属性：

  title — 设置文档标题，等价于HTML的title标签
  bgColor — 设置页面背景色
  fgColor — 设置前景色(文本颜色)
  linkColor — 未点击过的链接颜色
  alinkColor — 激活链接(焦点在此链接上)的颜色
  vlinkColor — 已点击过的链接颜色
  URL — 设置URL属性，从而在同一窗口打开另一网页
  cookie — 设置和读出cookie

document对象的常用方法：

write() — 在文档中写入字符串
     writeln() —在文档中写入字符串，并在字符串的末尾增加一个换行符(\n) 
     open() — 打开文档流close() — 关闭文档流
     getElementById() —返回对拥有指定 id 的第一个对象的引用 
     getElementByName() —返回带有指定名称的对象集合 
     getElementByTagName() —返回带有指定标签名的对象集合 
     creatElement() — 创建一个元素节点 
     appendChild() — 添加子节点 
   ……

document对象中元素的集合

   all—返回文档中所有对象的集合（仅适用于IE）
   forms—返回文档中所有表单对象的引用。
   可以有两种形式来访问表单对象
    A、通过下标形式访问：
      如：document.forms[0].name
    B、通过name形式访问：
      如：document.forms[“myform”].text1.value
   anchors—返回文档中所有超链接对象的引用。
   images—返回文档中所有img对象的引用。
   links—返回文档中所有area和link对象的引用。

1.35 对文档的对象的内容，属性，样式的操作

一、操作内容

1、innerHTML— 用来设置或获取对象起始和结束标签内的内容。（识别HTML标签）

2、innerText—用来设置或获取对象起始和结束标签内的文本内容。（不识别HTML标签，适用于IE）

 textContent—用来设置或获取对象起始和结束标签内的文本内容。（不识别HTML标签，
适用于Firfox）

3、outerHTML—用来设置或获取包含本对象起始和结束标签在内的内容。（识别HTML标签）

 outerText—设置(包括标签)或获取(不包括标签)对象的文本 。innerText和outerText
在获取时是相同效果，但在设置时，innerText仅设置标签内的文本，而outerText设置
包括标签在内的文本。（适用于IE）

二、操作属性

1、直接操作方式

  对象.属性
  对象.属性=值 （设置、获取、添加属性）

2、使用DOM提供的方法

  getAttribute(属性名称) —获取给定的属性的值
  setAttribute(属性名称,属性值) —设置或添加属性
  removeAttribute(属性名称) —删除节点属性

三、操作样式

1、行内样式

对象.style.属性
对象.style.属性=值（设置、获取、添加样式属性）

如 var p1=document.getElementById(“text1");
       p1.style.color=“blue”;
       p1.style.fontSize=“16px”;
       p1.style.backgoundColor=“red”;

*遇到属性是“-”连接的，要将“-"去掉，后面的单词的首字母大写。

2、CSS层叠样式

（1）通过id来更改样式

     对象.id=样式名称

（2）通过className来更改样式

     对象.className=样式名称

（3）更改或者设置某个属性的值

IE） document.styleSheets[下标].rules[下标].style.属性
       document.styleSheets[下标].rules[下标].style.属性=值
       
（FF）document.styleSheets[下标].cssRules[下标].style.属性
       document.styleSheets[下标].cssRules[下标].style.属性=值

说明：document.styleSheets  样式表的集合
      document.styleSheets[下标].rules  样式规则的列表
       document.styleSheets[0].rules.style  样式规则的集合

（4）动态的添加删除css样式规则

（FF）添加：document.styleSheets[下标].insertRule("选择器{属性:值}",位置)
    删除：document.styleSheets[下标].deleteRule(位置)
    
（IE）添加：document.styleSheets[下标].addRule（"选择器","属性:值",位置)
    删除：document.styleSheets[下标].removeRule(位置)

3、行内样式和css层叠样式通用的方式

对象.currentStyle.属性       IE   用来获得实际的样式属性
  getComputedStyle(对象,null)  FF   用来获得实际的样式属性

*只能获取不能设置