DOM范围

//创建范围

    function getRange( ele ) {        var range = document.createRange(),                eleIndex = -1,                i, len;        for ( i = 0, len = ele.parentNode.childNodes.length; i < len; i++ ) {            if ( ele.parentNode.childNodes[i] == ele ) {                eleIndex = i;                break;            }        }

        //1设置选区        range.selectNode( ele );        range.selectNodeContents( ele );        //2复杂选区设置        range.setStart( ele.parentNode, eleIndex );        range.setEnd( ele.parentNode, eleIndex + 1 );        range.setStart( ele.firstChild, 2 );        range.setEnd( ele.firstChild, ele.firstChild.length );        var startEle, endEle;        range.setStartAfter( startEle );        range.setStartBefore( startEle );        range.setEndAfter( endEle );        range.setEndPoint( endEle );

        //3操作选区        range.deleteContents();    //删除选区        range.extractContents();     //删除选区 返回删除的片段        range.cloneContents();  //返回选区副本        range.cloneRange();  //克隆        range.detach();  //从文档中分离        range = null; //解除引用

        //4插入选区        var span = document.createElement( "span" );        span.appendChild( document.createTextNode( "inserted text" ) );        range.insertNode( span );

        //环绕范围插入内容 可用于凸显效果        var color = document.createElement( "span" );        color.style.background = "yellow";        range.surroundContents( color );

        //5折叠dom范围 适合文本框        range.collapse( true );  //true折叠到起点 false折叠到终点        alert( range.collapsed ); //返回是否折叠

        //6比较dom范围        var rang1= document.createRange(), rang2= document.createRange();        range.compareBoundaryPoints( rang1, rang2 );

    }

    getRange( document.querySelector( ".p" ) );

转载于:https://www.cnblogs.com/zodiacblog/p/3981126.html

相关资源：详解Javascript中DOM的范围