说明：本文为《JavaScript高级程序设计》第10章学习笔记。
可以应用不同方式来处理文档底层的DOM树，首先，可利用现行浏览器中的非标准的属性和方法，以及鲜为人知且有待进一步利用的DOM的标准接口。
一．样式编程
IE4.0为每一个页面上的元素都引入了一个style对象来管理元素的CSS样式。DOM最后也采用这个方式，并将其作为访问元素的样式信息的标准手段。
下面的表格列出了一些常用的CSS特性及它们对应的JavaScript中的style对象的表示：
|
CSS样式特性
|
JavaScript样式属性
|
|
background-color
|
style.backgroundColor
|
|
color
|
style.color
|
|
font
|
style.font
|
|
font-family
|
style.fontFamily
|
|
font-weight
|
style.fontWeight
|
要用JavaScript来更改样式的值，只需将CSS的字符串分配给它们的样式对象的特性就行，eg. var oDiv = document.getElementById(“div1”);
oDiv.style.border = “1px solid black”;
也可以使用style对象来获取任何内联样式（直接通过HTML的style特性来分配的样式）的值。Eg. 有如下的div：
<div id=”div1” style=”background-color: red; height: 50px; width:50px”></div>
获取该div的style中的background-color的代码如下：
var oDiv = document.getElementById(“div1”);
alert(oDiv.style.backgroundColor);
同样的技巧也可应用于用户将鼠标移动到页面上指定元素的翻转效果，eg.
<div id=”div1”
style=”background-color: red; height: 50px; width: 50px”
onmouseover=”this.style.backgroundColor=’blue’”
onmouseout=”this.style.backgroundColor=’red’”/>
1. DOM样式的方法
DOM描述了一些样式对的方法，以达到与单独的CSS样式的定义部分进行交互的目的：
getPropertyValue(propertyName)——返回CSS特性propertyName的字符串值；
getPropertyPriority()——如果在规则中指定CSS特性“important”，则返回“important”，否则返回空字符串；
item(index)——返回在给定索引index处的CSS特性的名称；
removeProperty(propertyName)——从CSS定义中删除propertyName；
setProperty(propertyName, value, priority)——按照指定的优先级来设置CSS特性propertyName的value值。
让我们来看一个例子，若div如下：
<div id=”div1” style=”background-color: red; height: 50px; width: 50px”></div>
让我们来测试下前面的某几个方法，js代码如下：
var oDiv = document.getElementById(“div1”);
alert(oDiv.style.item(0)); //outputs “background-color”
alert(oDiv.style.getPropertyValue(“background-color”));
oDiv.removeProperty(“background-color”);
我们可用style方法重写上面提到过的翻转方法：
<div id=”div1”
style=”background-color: red; height: 50px; width: 50px”
onmouseover=”this.style.setProperty(‘background-color’, ‘blue’, ‘’)”
onmouseout=” this.style.setProperty(‘background-color’, ‘red, ‘’)”/>
2. 自定义鼠标提示
鼠标提示：就是把鼠标移动到图片按钮上时，出现的帮助性黄色方框。
Eg. <a href=”http://www.bogjava.net/amigoxie” title=”阿蜜果的blog”>阿蜜果</a>
上述例子是只有文本的鼠标提示，我们还可以自定义鼠标提示，例如当鼠标移动到指定目标上时，显示隐藏的<div>，实例代码如下：
<html>
<head>
<title>Style例子</title>
<script type="text/javascript">
function showTip(oEvent) {
var oDiv = document.getElementById("divTip1");
oDiv.style.visibility = "visible";
oDiv.style.left = oEvent.clientX + 5;
oDiv.style.top = oEvent.clientY + 5;
}
function hideTip(oEvent) {
var oDiv = document.getElementById("divTip1");
oDiv.style.visibility = "hidden";
}
</script>
</head>
<body>
<p>将鼠标移动到红色方框中</p>
<div id="div1"
style="background-color: red; height: 50px; width:50px"
onmouseover="showTip(event) " onmouseout="hideTip(event) "></div>
<div id="divTip1"
style="background-color: yellow; position: absolute; visibility: hidden; padding: 5px">
<span style="font-weight: bold">自定义鼠标提示</span>
</div>
</body>
</html>
3. 可折叠区域
可折叠区域的基本思想：可通过点击某个地方来显示或隐藏屏幕中的某个区域。让我们来看一个相关的例子：
<html>
<head>
<title>可折叠区域的例子</title>
<script type="text/javascript">
function toggle(sDivId) {
var oDiv = document.getElementById(sDivId);
oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none";
}
</script>
</head>
<body>
<div style="background-color: blue; color: white; font-weight: bold; padding: 10px; cursor: pointer" onclick="toggle('divContent1')">控制内容
1的显示和隐藏</div>
<div style="border: 3px solid blue; height: 100px; padding: 10px" id="divContent1">内容1</div>
<p> </p>
<div style="background-color: blue; color: white; font-weight: bold; padding: 10px; cursor: pointer" onclick="toggle('divContent2')">控制内容
2的显示和隐藏</div>
<div style="border: 3px solid blue; height: 100px; padding: 10px" id="divContent2">内容2</div>
</body>
</html>
本例中的两个可折叠区域分别用来显示和隐藏例子中id为divContent1和divContent2的两个div。
4．访问样式表
使用style对象可以方便地获取某个有style特性的元素的CSS样式。但它无法表示由CSS规则或在style特性外部定义的类定义的元素的CSS样式。例如下述例子中警告框将打不出背景色，而是空字符串：
<html>
<head>
<title>样式的例子</title>
<style type="text/css">
div.special {
background-color: red;
height: 10px;
width: 10px;
margin: 10px;
}
</style>
<script type="text/javascript">
function getBackgroundColor() {
var oDiv = document.getElementById("div1");
alert(oDiv.style.backgroundColor);
}
</script>
</head>
<body>
<div id="div1" class="special"></div>
<input type="button" value="获取背景色" onclick="getBackgroundColor()" />
</body>
</html>
原因在于上述例子的CSS数据并非存储在style属性中，而是存储在类中，此种情况下可用如下方式引用：
用document.styleSheets集合来获取定义类的样式表的引用。只需修改getBackgroundColor()内容修改成如下内容：
var oCSSRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
alert(oCSSRules[0].style.backgroundColor);
如果3个元素都引用了special样式，当在运行过程中只想修改其中一个的背景色时，不可用如下方法：
function changeBackgroundColor() {
var oCSSRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
oCSSRules[0].style.backgroundColor = “blue”;
}
此种方法将导致三者的div的背景色都被改变，可修改该方法的内容如下：
var oDiv = document.getElementById(“div1”);
oDiv.style.backgroundColor = “blue”;
5． 最终样式
最终样式由所有从内联样式和CSS规则计算得来的样式信息组成。用来告诉我们元素最后是如何显示在屏幕上的。
1） IE中的最终样式
微软为每个元素提供一个currentStyle对象，它包含了所有元素的style对象的特性和任何未被覆盖的CSS规则的style特性。下面来看一个例子：
将访问样式表中的alert(oDiv.style.backgroundColor);
修改为：alert(oDiv.currentStyle.backgroundColor);
2） DOM中的最终样式
DOM提供一个getComputedStyle()方法，它根据给定的元素创建类似style的对象。只有某些浏览器支持该功能，不推荐使用。
二．innerText和innerHTML
innerText：用来修改起始标签和结束标签的文本。Eg. oDiv.innerText = “内容”;
应用innerHTML特性，可以直接给元素分配HTML字符串，而不需要考虑使用DOM方法来创建元素。Eg.
oDiv.innerHTML = “<strong>Hello,阿蜜果</strong><em>阿蜜果</em>”;
还可以用innerText和innerHTML来获取元素的内容。如果innerText和innerHTML返回相同的值。但是，如果同时包含文本和其他元素，innerText将只返回文本的表示，而innerHTML将返回所有元素和文本的HTML代码。
通过将innerText复制给它自身，表示从指定的元素中删除所有的HTML标签。Eg.
oDiv.innerText = oDiv.innerText;
虽然innerText和innerHTML并非DOM标准的一部分，但事实上现在大部分的浏览器，包括IE、Opera和Safari，都支持innerText和innerHTML，而Mozilla，仅支持innerHTML。
三． outerText和outerHTML
在IE4.0引入，它们与innerText和innerHTML类似，只不过它们替换的是整个目标节点。
四． 范围
范围可以用来选择文档的某个部分，而不管节点的边界。
1． DOM中的范围
DOM Level2定义了方法createRange()来创建范围。在DOM兼容的浏览器中的，这个发方法属于document对象，所以可以这样创建一个范围：
var oRange = document.createRange();
要判断文档是否支持DOM风格的DOM风格的范围，可以使用hasFeature()方法：
var supportDOMRanges = document.implementation.hasFeature(“Range”, “2.0”);
1） DOM范围中的简单选区
选择使用范围的文档的某部分的最简单的方法是用selectNode()或selectNodeContents()。这些方法只接受一个参数（DOM节点），然后它们用节点中的信息来填充范围。
其中，selectNode()方法将选择整个节点，包括它的子节点，而selectNodeContents()则选择节点所有的子节点。
创建范围时，会分配给它一些特性：
startContainer——范围是从哪个节点中开始的；
startOffset——在startContainer中范围开始的偏移位置；
endContainer——范围是从哪个节点结束的；
endOffset——在endContainer中范围结束的偏移位置；
commonAncestorContainer——startContainer和endContainer都处于哪个最小的节点。
当使用selectNode()时，startContainer、endContainer和commonAncestorContainer均等同于传入的节点的父节点；startOffset等同于给定节点在父节点的childNodes集合中的索引，而endOffset等同于startOffset加1。
当使用selectNodeContents()时，startContainer、endContainer和commonAncestorContainer等同于传入的节点，startOffset等于0；endOffset等于子节点的数量（node.childNode.length）.
2） DOM范围中的复杂选区
创建复杂选区需要使用复杂范围的setStart()和setEnd()方法。这两个方法均接受两个参数：节点的引用和偏移量。对于setStart()，引用的节点是startContainer，偏移量是startOffset；对于setEnd()，引用的节点是endContainer，而偏移量是endOffset。
3） 与DOM范围对象的内容进行交互
当创建对象时，内部将创建文档碎片节点，在选区中的所有节点都被附加其。然而，在附加之前，范围对象必须保证所选的内容的故事是正确的。
deleteContents()：从文档中将范围内的内容全部删除；
extracdtContents()：从文档中删除选区范围，并将范围内的文档碎片作为函数返回值返回。
4）插入DOM范围的内容
innerNode()方法用来在选区的开头插入节点。除了可以将内容插入范围，还可用surroundContents()方法插入包围范围的内容。这个方法接受一个参数（要包围范围的内容的节点）。在后台会执行以下几步：
抽取出范围中的内容；
将给定节点插入到原来范围所在的位置；
将文档碎片的内容添加到给定节点中。
这类功能在网页上也很有用，可以用来突出显示页面上的特定单词，如下：
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = op1.lastChild;
var oRange = document.createRange();
var oSpan = document.createElement("span");
oSpan.style.backgroundColor = "yellow";
oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);
oRange.surroundContents(oSpan);
前面的代码用黄色的背景突出显示范围选区。
5) 折叠DOM范围
折叠范围类似文本框的一种行为。当文本框中有文字时，可以用鼠标突出全部文字。但是，只要再点击一下鼠标左键，选区就消失了，光标将停留在两个字母之间。
可以用collapse()方法来折叠范围，这个方法接受一个参数：用于表示是折叠到范围的那一端的Boolean值。如果参数是true，范围就折叠到开头；如果是false，范围就折叠到末尾。要判断范围是否已被折叠，可以用collapsed特性：
oRange.collapse(true); //折叠到开始点
alert(oRange.collapsed); //输出true
6）比较DOM范围
使用compareBoundaryPoints()方法来判断范围是否具有相同的边界（开头或者结尾）。这个方法接受两个参数：要进行比较的范围及如何进行比较，后者是个常量值：
START_START(0)——比较两个范围的起点；
START_TO_END(1)——比较低一个范围的起点和第二个范围的终点；
END_TO_END(2)——比较两个范围的终点；
END_TO_START(3)——比较第一个范围的终点和第二个范围的起点。
如果第一个范围的被测点在第二个范围的被测点之前，返回-1；
如果两被测点相同，返回0；
如果第一个范围的被测点在第二个范围的被测点之后，返回1。
7）复制DOM的范围
通过cloneRange()方法来创建范围的副本。它可以创建与被调用的范围对象完全一致的副本：
var oNewRange = oRange.cloneRange();
新的范围包含的所有特性与原范围的特性均相同，并且能够丝毫不会影响原范围地修改它。
8）清理
当使用完范围后，最好用detach()方法释放系统资源。这不是必需的，因为不再被引用的范围最后总是被垃圾收集器清理掉。
2． IE中的范围
IE中的范围称为文本范围，它们主要用来处理文本。要创建范围，要调用<body/>、<button/>、<input/>或者<textarea/>元素上的createTextRange()方法：
var oRange = document.body.createTextRange();
用这个范围创建的范围可以在页面上的任何位置上使用。
1） IE范围中的简单选区
选择页面的某个区域的最简单的方法是用范围的findText()方法，这个方法可找到文本字符串的第一个实例并用范围包含它，
eg. <p id=”p1”><b>Hello</b>阿蜜果</p>
var oRange = document.body.createTextRange();
var bFound = oRange.findText(“Hello”);
代码执行后，文本Hello就被包含在范围之内。可用范围的text特性来检测它，或者也可以检测findText()的返回值，如果是true，表示找到文本：
alert(bFound);
alert(oRange.text);
要在文档中移动范围，可用findText()方法的第二个参数，这是个表示继续搜索的方向的数字；负数表示向回查找，正数表示搜索继续往前。所以，要找到文档中Hello的前两个实例，可以用这段代码：
var oFound = oRange.findText(“Hello”);
var bFoundAgain = oRange.findText(“Hello”, 1);
与DOM的selectNode()方法最相近的是IE的moveToElementText()方法，它可接受DOM元素作为参数，并选取元素的所有文本，如下：
var oRange = document.body.createTextRange();
var oP1 = document.getElementById(“p1”);
oRange. moveToElementText(oP1);
要测试上述代码是否正常，可使用:
alert(oRange.htmlText);
2） IE范围中的复杂选区
略。
posted on 2007-08-18 16:05
阿蜜果 阅读(2858)
评论(2) 编辑 收藏 所属分类:
Javascript