选取一块区域
setStart表示某个节点的range对象的起点位置，
setEnd表示某个节点的range对象的终点位置
setStartBefore:表示用于将某个节点的起点位置设置为range对象的起点位置。
setStartAfter:表示用于将某个节点的终点位置设置为range对象的起点位置。
setEndBefore:表示用于将某个节点的起点位置设置为range对象的终点位置。
setEndAfter:表示用于将某个节点的终点位置设置为range对象的终点位置。
CSS代码：input { font-size: 14pxfont-weight: bold }
input[type=range]:before { content: attr(min)padding-right: 5px}
input[type=range]:after { content: attr(max)padding-left: 5px}
output {
display: block
font-size: 5.5em
font-weight: bold
}
HTML代码：
<form method="post">
<h4>音量控制</h4>
<input type="range" name="range" min="0" max="10" step="1" value="" />
<output name="result"> </output>
</form>
JS代码：
(function() {
var f = document.forms[0],
range = f['range'],
result = f['result'],
cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5
// 检测浏览器是否是足够酷
// 识别range input.
var o = document.createElement('input')
o.type = 'range'
if ( o.type === 'text' ) alert('不好意思，你的浏览器还不够酷，试试最新的Opera浏览器吧。')
// 设置初始值
// 无论是否本地存储了，都设置值为5
range.value = cachedRangeValue
result.value = cachedRangeValue
// 当用户选择了个值，更新本地存储
range.addEventListener("mouseup", function() {
alert("你选择的值是：" + range.value + ". 我现在正在用本地存储保存此值。在现代浏览器上刷新并检测。")
localStorage ? (localStorage.rangeValue = range.value) : alert("数据保存到了数据库或是其他什么地方。")
}, false)
// 滑动时显示选择的值
range.addEventListener("change", function() {
result.value = range.value
}, false)
})()
<figure>
<figcaption>这是一群美女</figcaption>
<img src="1.jpg" alt="" width="50">
<img src="2.jpg" alt="" width="50">
<img src="3.jpg" alt="" width="50">
</figure>
<body>
<script>
function AD() {
// var txt = document.getElementById("txt")
// 上方方法与下方方法结果相同，只是不同获取input节点的方法。
var txt = document.forms[0]['txtName']
var userAction = txt.selectionDirection
alert(userAction)
}
</script>
<form>
<input type="text" id="txt" name="txtName">
<input type="button" value="获取用户选择文字方向" onclick="AD()">
</form>
</body>
<body>
<script>
function deleteContents(mode) {
// 创建一个Range对象
var rangeObj = document.createRange()
var demoArea = document.getElementById("demo")
if (mode) { / 如果为true，表示删除整个元素 /
// 选取整个Node
rangeObj.selectNode(demoArea)
rangeObj.deleteContents()
} else { / 如果为false，表示仅删除元素中的内容 /
// 选择Node中的Contents
rangeObj.selectNodeContents(demoArea)
rangeObj.deleteContents()
}
}
</script>
<div id="demo" style="background-color: #f00width: 300pxheight: 300px">这是一个Range方法DEMO</div>
<button onclick="deleteContents(true)">删除整个元素</button>
<button onclick="deleteContents(false)">仅删除元素中的内容</button>
</body>
