折叠范围

HTML

<section id="wrap">
    <article id="main">
        <h1>游子吟</h1>
        <h2>孟郊</h2>
        <p>慈母手中线，游子身上衣。临行密密缝，意恐迟迟归。谁言寸草心，报得三春晖。</p>
    </article>
    <header>
        <input type="button" value="创建范围" onclick="createrange()" />
    </header>
    <footer>
        <dl>
            <dt>范围1</dt>
            <dd>Start Container(开始点的父节点）:<span id="txtStartContainer1"></span></dd>
            <dd>Start Offset(开始点的偏移值）:<span id="txtStartOffset1"></span></dd>
            <dd>End Container(结束点的父节点）:<span id="txtEndContainer1"></span></dd>
            <dd>End Offset(结束点的偏移值）:<span id="txtEndOffset1"></span></dd>
            <dd>Common Ancestor（共同祖先节点）:<span id="txtCommonAncestor1"></span></dd>
        </dl>
        <dl>
            <dt>范围2</dt>
            <dd>Start Container(开始点的父节点）:<span id="txtStartContainer2"></span></dd>
            <dd>Start Offset(开始点的偏移值）:<span id="txtStartOffset2"></span></dd>
            <dd>End Container(结束点的父节点）:<span id="txtEndContainer2"></span></dd>
            <dd>End Offset(结束点的偏移值）:<span id="txtEndOffset2"></span></dd>
            <dd>Common Ancestor（共同祖先节点）:<span id="txtCommonAncestor2"></span></dd>
        </dl>
    </footer>
</section>
    					    

JS

//折叠范围
function createrange() {
    var range1 = document.createRange();
    var main= document.getElementById("main");
	var h1 = document.getElementsByTagName("h1")[0];
	var h2 = document.getElementsByTagName("h2")[0];
    range1.setStartBefore(h1);
    range1.setEndAfter(h2);
	console.log("折叠前内容：" + range1.toString());
	range1.collapse(true);
	console.log("折叠后内容：" + range1.toString());
	console.log("是否折叠？" + range1.collapsed);
	console.log("startContainer：" + range1.startContainer.tagName);
	console.log("startOffset：" + range1.startOffset);	
	console.log("endContainer：" + range1.endContainer.tagName);
	console.log("endOffset：" + range1.endOffset);		
}
//创建IE范围
function createrange() {
	var range1 = document.body.createTextRange();
	var range2 = document.body.createTextRange();
	range1.findText("游子吟");
	range2.findText("孟郊");
	alert(range1.compareEndPoints("StartToStart", range2)); 
	alert(range1.compareEndPoints("EndToEnd", range2));
}