Javascript标准DOM Range操作全集第1/3页(js dom操作方法)

发布时间：2024-02-27

2级DOM定义了一个createRange()方法，如果是按照DOM此标准的浏览器（IE并不是支持此标准的，但是IE里的属性或方法却远比标准中定义的多得多），它属于document对象，所以创建一个range对象要这样做：var oRange = document.createRange();如果你要检测你的浏览器是否支持此标准Range对象，可以用hasFeature()方法来检测：var supportsDOMRanges = document.implementation.hasFeature("Range", "2.0");if (supportsDOMRange) {var oRange = document.createRange();//range code here}Range对象进行简单的选择最简单用Range进行选择，用selectNode()或者selectNodeContents()方法，这两个方法只有一个接收参数，一个DOM节点。selectNode()方法选择全部节点，包括它的孩子，而selectNodeContents()选择的节点只是它的孩子。如 <p id="p1"><b>Hello</b> World</p><script>var oRange1 = document.createRange();var oRange2 = document.createRange();var oP1 = document.getElementById("p1");oRange1.selectNode(oP1);oRange2.selectNodeContents(oP1);</script>oRange1和oRange2包含上面所说的两种方法，但是看了下面的示图相信你能很快明白这两个方法的区别：当你创建了一个Range对象时，Range实例就会有以下的属性：startContainer — 返回range对象从何开始的节点对象（父节点的第一个节点）startOffset — 返回Range开始的偏移量(offset)，如果startContainer是一个文本节点，注释节点，或者是CDATA节点，这个属性返回文本的偏移量，否则返回第一个节点的索引。endCOntainer — 返回Range对象最后一个节点对象（父节点的最后一个节点）endOffset — 返回Range结束时的偏移量(offset)特性与startOffset相同。commonAncestorContainer — 返回第一个包含该Range对象的节点。注：这些属性均为只读属性(read-only)，startOffset和endOffset将在下文中有较详细的解释。下面这段代码将说明这些属性，请在Mozilla firefox里运行（支持此标准的浏览器——DOM2级，IE里将无效）： <html> <head> <title>DOM Range Example</title> <script type="text/javascript"> function useRanges() { var oRange1 = document.createRange(); var oRange2 = document.createRange(); var oP1 = document.getElementById("p1"); oRange1.selectNode(oP1); oRange2.selectNodeContents(oP1); document.getElementById("txtStartContainer1").value = oRange1.startContainer.tagName; document.getElementById("txtStartOffset1").value = oRange1.startOffset; document.getElementById("txtEndContainer1").value = oRange1.endContainer.tagName; document.getElementById("txtEndOffset1").value = oRange1.endOffset; document.getElementById("txtCommonAncestor1").value = oRange1.commonAncestorContainer.tagName; document.getElementById("txtStartContainer2").value = oRange2.startContainer.tagName; document.getElementById("txtStartOffset2").value = oRange2.startOffset; document.getElementById("txtEndContainer2").value = oRange2.endContainer.tagName; document.getElementById("txtEndOffset2").value = oRange2.endOffset; document.getElementById("txtCommonAncestor2").value = oRange2.commonAncestorContainer.tagName; } </script> </head> <body><p id="p1"><b>Hello</b> World</p> <input type="button" value="Use Ranges" onclick="useRanges()" /> <table border="0"> <tr> <td> <fieldset> <legend>oRange1</legend> Start Container: <input type="text" id="txtStartContainer1" /><br /> Start Offset: <input type="text" id="txtStartOffset1" /><br /> End Container: <input type="text" id="txtEndContainer1" /><br /> End Offset: <input type="text" id="txtEndOffset1" /><br /> Common Ancestor: <input type="text" id="txtCommonAncestor1" /><br /> </fieldset> </td> <td> <fieldset> <legend>oRange2</legend> Start Container: <input type="text" id="txtStartContainer2" /><br /> Start Offset: <input type="text" id="txtStartOffset2" /><br /> End Container: <input type="text" id="txtEndContainer2" /><br /> End Offset: <input type="text" id="txtEndOffset2" /><br /> Common Ancestor: <input type="text" id="txtCommonAncestor2" /><br /> </fieldset> </td> </tr> </table> </body></html>上面的代码将不作注释了，有什么问题，在评论中留言。Range中还有一些其它的方法：setStartBefore(node) — 设置Range的相对于node节点的起始位置setStartAfter(node) — 同上setEndBefore — 设置Range的相对于node节点的结束位置setEndAfter — 同上

推荐整理分享Javascript标准DOM Range操作全集第1/3页(js dom操作方法)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:javascript中dom的含义,js dom bom,js中dom的用法,js设置dom样式,JavaScript标准内置对象在编程中的作用,js中dom的用法,javascript中dom的含义,javascript中dom,内容如对您有帮助，希望把文章链接给更多的朋友！

尽可能写"友好"的"Javascript"代码在SearchEngine的robot搜索时，针对的type，text/html此类文本的友好度是最高的（现阶段text/xml除外），而text/javascript此类的友好度不理想，如果robot还要判断D

兼容Mozilla必须知道的知识。我想我也该把这个东西先拿出来了。希望可以帮助大家，我也是想到了哪些就写哪些，如果有遗漏的地方，还请指出，我会加上去的。列表了多种IE与M

你所要知道JS（DHTML）中的一些技巧这些天都没有更新日志了，这篇文章就也算是自己的一些经验谈了。简单的说一些技巧给大家，希望对你有所帮助，如果还有疑问，可以在下边留言。