javascript范围DOM和IE

最新推荐文章于 2022-10-23 16:18:34 发布

yhcelebrite

最新推荐文章于 2022-10-23 16:18:34 发布

阅读量651

点赞数

分类专栏： dom javascript Web前端文章标签： javascript Range

本文链接：https://blog.csdn.net/yhcelebrite/article/details/40111941

版权

javascript 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

dom

2 篇文章 0 订阅

订阅专栏

Web前端

2 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

</head>
<body οnlοad="init();">
    <form id="form1">
    <div id="div1">
        <ul>
            <li>
                <a><b><em>Hello</em> World</b></a>
            </li>
            <li></li>
            <li></li>
        </ul>
    </div>
    </form>
        <script type="text/javascript">
            var init = function () {
                range_basic();
                userRanges();
                rangesComp();
                rangesLight();
            }
            function range_basic() {
                var supportDOMRanges = document.implementation.hasFeature("Range", "2.0");
                if (supportDOMRanges) {
                    var oRange1 = document.createRange();
                    var oRange2 = document.createRange();
                    var oDiv = document.getElementById("div1");
                    oRange1.selectNode(oDiv);
                    oRange2.selectNodeContents(oDiv);
                    var end;
                }
            }
            function userRanges() {
                var oRange1 = document.createRange();
                var oRange2 = document.createRange();
                var oDiv = document.getElementById("div1");

                var iP1Index = -1;
                for (var i = 0; i < oDiv.parentNode.childNodes.length; i++) {
                    if (oDiv.parentNode.childNodes[i] == oDiv) {
                        iP1Index = i;
                        break;
                    }
                }
                oRange1.setStart(oDiv.parentNode, iP1Index);
                oRange1.setEnd(oDiv.parentNode, iP1Index + 1);
                oRange2.setStart(oDiv, 0);
                oRange2.setEnd(oDiv, oDiv.childNodes.length);
            }
            function rangesComp() {
                var oDiv = document.getElementById("div1");
                var oemText = oDiv.getElementsByTagName("em")[0].childNodes[0];
                var otext = oDiv.getElementsByTagName("ul")[0].getElementsByTagName("li")[0].getElementsByTagName("b")[0].childNodes[1];
                var oRange1 = document.createRange();
                oRange1.setStart(oemText, 2);
                oRange1.setEnd(otext, 3);
                var oFargment = oRange1.extractContents();
                document.body.appendChild(oFargment);
            }
            function rangesLight() {
                var oDiv = document.getElementById("div1");
                var oemText = oDiv.getElementsByTagName("em")[0].childNodes[0];
                var oRange1 = document.createRange();
                oRange1.setStart(oemText, 1);
                oRange1.setEnd(oemText, 2);
                var oSpan = document.createElement("span");
                oSpan.style.color = "Red";
                oRange1.surroundContents(oSpan);
                oRange1.detach();
            }
    </script>
</body>
</html>

IE下的范围：

            function range_basic() {
                var oRange1 = document.body.createTextRange();
                var bFound = oRange1.findText("Hello");
                var sFound = bFound.text;
            }
            function userRanges() {
                var oRange1 = document.body.createTextRange();
                var bFound = oRange1.findText("Hello");
                var bFound2 = oRange1.findText("Hello", 1);
                var sFound = bFound.text;
                var sFound2 = bFound2.text;
            }
            function rangesComp() {
                var oRange1 = document.body.createTextRange();
                var oDiv = document.getElementById("div1");
                oRange1.moveToElementText(oDiv);
                var sHtmlText = oRange1.htmlText;
                var oCommonAncestor = oRange1.parentElement();
            }