«
javascript之DOM技术（二）

时间：2008-5-31    作者：Deri    分类： 分享 

   <p>　　一。样式编程</p><p>　　1.页面中的每一个元素都具有一个style对象，此对象管理元素的CSS样式。这是在IE4.0引入的，后来作为DOM标准被接受。使用方法:</p><p>　　var oDiv=document.getElementById("div1");</p><p>　　alert(oDiv.style.backgroundColor);</p><p>　　style对象拥有一个cssText属性，返回描述元素样式的CSS字符串。</p><p>　　2.样式对象style的方法（IE6并不支持这些方法）：</p><p>　　（1）getPropertyValue(propertyName)――返回CSS特性propertName的字符串值，比如this.style.getPropertyValue("background-color");这里的propertyName必须按照CSS的样式定义。</p><p>　　（2）getPropertyPriority()――返回important字符串或者为空</p><p>　　（3）item(index)――返回给定索引处的CSS特性名称</p><p>　　（4）removeProperty(propertyName)――移除某CSS特性</p><p>　　（5）setProperty(propertyName,value,priorty)――按照执行优先级设定CSS特性的值</p><p>　　3.通过隐藏层实现自定义鼠标提示的例子：</p><p><code><html><br />　　<head><br />　　　　<title>Style Example</title><br />　　　　　<script type="text/javascript" src="detect.js"></script><br />　　　　<script type="text/javascript" src="eventutil.js"></script><br />　　　　<script type="text/javascript"><br />　　　　　　function showTip() {<br />　　　　　　　　var oDiv = document.getElementById("divTip1");<br />　　　　　　　　oDiv.style.visibility = "visible";<br />　　　　　　　　var oEvent=EventUtil.getEvent();<br />　　　　　　　　oDiv.style.left = oEvent.clientX + 5;<br />　　　　　　　　oDiv.style.top = oEvent.clientY + 5;<br />　　　　　　}<br />　　<br />　　　　　　function hideTip() {<br />　　　　　　　　var oDiv = document.getElementById("divTip1");<br />　　　　　　　　var oEvent=EventUtil.getEvent();<br />　　　　　　　　oDiv.style.visibility = "hidden";<br />　　　　　　}<br />　　　　</script><br />　　</head><br />　　<body><br />　　　　<p>Move your mouse over the red square.</p><br />　　　　<div id="div1"<br />　　　　　　 style="background-color: red; height: 50px; width: 50px"<br />　　　　　　 onmouseover="showTip()" onmouseout="hideTip()"></div><br />　　<br />　　　　 <div id="divTip1"<br />　　　　　　　style="background-color: yellow; position: absolute; visibility: hidden; padding: 5px"><br />　　　　　　<span style="font-weight: bold">Custom Tooltip</span><br /><br />　　　　　　More details can go here.<br />　　　　 </div><br />　　</body><br /></html></code></p>
<p> </p>

   <p>　　这里使用了我在《javascript事件模型框架》中摘记的JS文件。实现可折叠区域的道理与此相同，很常用的功能，不再细说。</p><p>　　4.访问样式表，因为style对象只能访问一个元素的CSS样式，而对于<style/>定义的或者外部CSS文件定义的CSS规则没办法访问，这就引出了如何访问样式表的问题。我们可以通过下面的方式访问：</p><p>　　var cssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;</p><p>　　document.styleSheets返回页面上所有样式表的引用，标准DOM中规定每个样式表的规则集合叫cssRules，而IE中叫rules，所以我们用上面的表达式来处理浏览器兼容问题。一个访问的例子：</p><p><code><html><br />　　<head><br />　　　　<title>Accessing Style Sheets Example</title><br />　　　　<style type="text/css"><br />　　　　　　div.special {<br />　　　　　　　　background-color: red;<br />　　　　　　　　height: 10px;<br />　　　　　　　　width: 10px;<br />　　　　　　　　margin: 10px;<br />　　　　　　}<br />　　　　</style><br />　　　　<script type="text/javascript"><br />　　　　　　function changeBackgroundColor() {<br />　　　　　　　　var oCSSRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;<br />　　　　　　　　oCSSRules[0].style.backgroundColor = "blue";<br />　　　　　　}<br />　　　　</script><br />　　</head><br />　　<body><br />　　　　<div id="div1" class="special"></div><br />　　　　<div id="div2" class="special"></div><br />　　　　<div id="div3" class="special"></div><br />　　　　<br />　　　　<input type="button" value="Change Background Color" onclick="changeBackgroundColor()" /><br />　　</body><br /></html></code></p>
 <p> </p>

   <p>　　点击按钮时将三个div的背景色都设置为蓝色。</p><p>　　5.最终样式：顾名思义，就是样式规则（外部定义和内联的）综合计算之后呈现给用户的样式信息，用来告诉我们元素最终是如何显示在屏幕上的。IE和标准的DOM也有区别：</p><p>　　（1）IE中的最终样式称为currentStyle对象，与style对象不同的是它是只读的，你只能读而不能给它赋值。</p><p>　　（2）DOM中的最终样式，通过document.defaultView.getComputedStyle(元素对象,伪元素对象或者null)方法获得</p><p>　　二。innerHTML和innerText</p><p>　　很常用的功能，特别是在AJAX应用中，经常采用的手段是从服务端返回一小段HTML代码，通过innerHTML嵌入某个层当中来动态显示下拉框等。一个比较常见的用法：</p><p>　　oDiv.innertText=oDiv.innerText;</p><p>　　表示从指定元素中删除所有的HTML标签。</p><p>　　三。outerText和outerHTML</p><p>　　与innerHTML和innerText，不过替换的是整个目标节点，仅在IE和opera中支持此特性</p><p>　　四。范围</p><p>　　叫选区也许更为恰当，range用来选择文档的某个部分而不管节点的边界。也有两种的范围实现：DOM和IE的</p><p>　　1.DOM的range</p><p>　　（1）在DOM中创建选区的方法：</p><p>　　var supportDOMRange=document.implementation.hasFeature("Range","2.0");</p><p>　　if(supportDOMRange)</p><p>　　var oRange=document.createRange();</p><p>　　先判断是否支持DOM，然后使用createRange()方法创建范围</p><p>　　（2）简单选区</p><p>　　考虑下面的代码：</p><p>　　<p id="p1"><b>hello</b>world</p></p><p>　　我们通过下面的JS代码来访问上面这段代码：</p><p>　　var oRange1=document.createRange();</p><p>　　var oRange2=document.createRange();</p>
 <p> </p>

   <p>　　var op1=document.getElementById("p1");</p><p>　　oRange1.selectNode(op1);</p><p>　　oRange2.selectNodeContents(op1);</p><p>　　两个范围，通过selectNode和selectNodeContents方法来选区，有什么不同呢？oRange1选中的范围包括<p/>节点以及它的全部子节点，而oRange2只包含op1的子节点和文本节点（就是"<b>hello</b>world")。</p><p>　　（3）范围的特性：</p><p>　　<1>startContainer――范围是从哪个节点开始的，也就是第一个节点的父节点</p><p>　　<2>startOffset――在startContainer的偏移位置。</p><p>　　<3>endContainer――最后一个节点的父节点</p><p>　　<4>endOffset――在endContainer中范围结束的偏移位置</p><p>　　<5>commonAncestorContainer――startContainer和endContainer都处于哪个最小的节点</p><p>　　演示这些特性的例子：</p><p><code><html><br />　　<head><br />　　　　<title>DOM Range Example</title><br />　　　　<script type="text/javascript"><br />　　　　　　function useRanges() {<br />　　　　　　　　var oRange1 = document.createRange();<br />　　　　　　　　var oRange2 = document.createRange();<br />　　　　　　　　var oP1 = document.getElementById("p1");<br />　　　　　　　　oRange1.selectNode(oP1);<br />　　　　　　　　oRange2.selectNodeContents(oP1);<br />　　　　　　　　<br />　　　　　　　　document.getElementById("txtStartContainer1").value = oRange1.startContainer.tagName;<br />　　　　　　　　document.getElementById("txtStartOffset1").value = oRange1.startOffset;<br />　　　　　　　　document.getElementById("txtEndContainer1").value = oRange1.endContainer.tagName;<br />　　　　　　　　document.getElementById("txtEndOffset1").value = oRange1.endOffset;<br />　　　　　　　　document.getElementById("txtCommonAncestor1").value = oRange1.commonAncestorContainer.tagName;<br />　　<br />　　　　　　　　document.getElementById("txtStartContainer2").value = oRange2.startContainer.tagName;<br />　　　　　　　　document.getElementById("txtStartOffset2").value = oRange2.startOffset;<br />　　　　　　　　document.getElementById("txtEndContainer2").value = oRange2.endContainer.tagName;<br />　　　　　　　　document.getElementById("txtEndOffset2").value = oRange2.endOffset;<br />　　　　　　　　document.getElementById("txtCommonAncestor2").value = oRange2.commonAncestorContainer.tagName;<br />　　　　　　}<br />　　　　</script><br />　　</head><br />　　<body><p id="p1"><b>Hello</b> World</p><br />　　　　<input type="button" value="Use Ranges" onclick="useRanges()" />　　　　<br />　　　　<table border="0"><br />　　　　<tr><br />　　　　　　<td><br />　　　　　　　　<fieldset><br />　　　　　　　　　　<legend>oRange1</legend><br />　　　　　　　　　　Start Container: <input type="text" id="txtStartContainer1" /><br /><br />　　　　　　　　　　Start Offset: <input type="text" id="txtStartOffset1" /><br /><br />　　　　　　　　　　End Container: <input type="text" id="txtEndContainer1" /><br /><br />　　　　　　　　　　End Offset: <input type="text" id="txtEndOffset1" /><br /><br />　　　　　　　　　　Common Ancestor: <input type="text" id="txtCommonAncestor1" /><br />　　<br />　　　　　　　　</fieldset><br />　　　　　　</td><br />　　　　　　<td><br />　　　　　　　　<fieldset><br />　　　　　　　　　　<legend>oRange2</legend><br />　　　　　　　　　　Start Container: <input type="text" id="txtStartContainer2" /><br /><br />　　　　　　　　　　Start Offset: <input type="text" id="txtStartOffset2" /><br /><br />　　　　　　　　　　End Container: <input type="text" id="txtEndContainer2" /><br /><br />　　　　　　　　　　End Offset: <input type="text" id="txtEndOffset2" /><br /><br />　　　　　　　　　　Common Ancestor: <input type="text" id="txtCommonAncestor2" /><br /><br />　　　　　　　　</fieldset><br />　　　　　　</td><br />　　　　</tr><br />　　　　</table><br />　　　　<p><strong>Note:</strong> This example uses DOM ranges and will only work in browsers that support DOM ranges. This example will fail in Internet Explorer.</p><br />　　<br />　　</body><br /></html></code></p>
 <p> </p>

   <p>　　（4）复杂选区</p><p>　　通过setStart和setEnd来实现复杂选区，两个方法都接受两个参数：节点引用和偏移量。</p><p>　　（5）与范围对象的交互</p><p>　　<1>deleteContents()，删除范围内容</p><p>　　<2>extractContents,与deleteContents()相似，只不过返回被删除的文档碎片</p><p>　　<3>cloneContents()，创建范围内容副本</p><p>　　<4>surroundContents(node)，插入包围范围的内容</p><p>　　<5>insertNode(node)，在选区开头插入节点</p><p>　　<6>cloneRange(),复制范围</p><p>　　<7>detach()，释放系统资源</p><p>　　<8>compareBoundaryPoints()方法，比较范围，两个参数，一个比较规则（Range.START_START,Range.START_TO_END,Range.END_TO_START,Range.END_TO_END),一个是比较的范围引用</p><p>　　2.IE中的范围</p><p>　　IE的范围并不标准，主要用来处理文本节点，调用<body/>,<button/>,<input/>,<textarea>节点的createTextRange方法来创建范围，建议用document.body.createTextRange()来创建，因为其他元素创建的范围仅能用于它们内部。</p><p>　　（1）简单选区：</p><p>　　同样以下面这段代码为例子：</p><p>　　<p id="p1"><b>hello</b>world</p></p><p>　　要选择hello，可以使用：</p><p>　　var oRange=document.body.createTextRange();</p><p>　　oRange.findText("hello");</p><p>　　findText方法还可以接受第2个参数，如oRange.findText("hello",1);将选择hello之后再次找到的hello文本节点。</p><p>　　与DOM中的selectNode方法最相似的是IE的moveToElementText()方法，比如我们要选中p1节点以及它的所有子节点：</p><p>　　var oRange=document.body.createTextRange();</p></p><p>　　var oP1=document.getElementById("p1');</p><p>　　oRange.moveToElementText(oP1);</p><p>　　alert(oP1.htmlText);</p><p>　　另外，oRange.parentElement()返回选区的父节点。</p><p>　　（2）复杂选区：</p><p>　　move(),moveStart(),moveEnd(),expand()方法实现复杂选区，这些方法都接受两个参数：移动的单位（"character","word","sentence","textedit")和移动的单位的个数。</p><p>　　（3)与范围交互</p><p>　　<1>text属性，比如oRange.text="hello";</p><p>　　<2>pasteHTML()，插入HTMl代码，比如oRange.pasteHTML("<em>test</em>");</p><p>　　<3>duplicate()，复制范围</p><p>　　<4>compareEndPoints() 方法，比较范围，第一个参数也是比较规则（"StartToStart","StartToEnd,EndToStart","EndToEnd")和比较的范围引用。也可以通过isEqual()和isRange()方法来比较。</p><p>　　3.范围的常见应用，比如搜索引擎中，搜索出来的链接中的关键字用特别的颜色包围起来，另外就是网页广告比较常用。</p><p>　　来源：<a href="http://www.blogjava.net/killme2008/archive/2007/02/10/99135.html">http://www.blogjava.net/killme2008/archive/2007/02/10/99135.html</a></p></p>