JavaScript操作选择对象的简单实例
JavaScript操作选择对象的实用示例
在网页开发中,JavaScript为我们提供了强大的能力去操作DOM元素和用户交互。今天,我们将通过一个简单的实例来展示如何使用JavaScript选择和操作文本内容。这个实例涵盖了非IE浏览器和IE浏览器的处理方式,以确保广泛的兼容性。
对于IE浏览器,我们可以使用`document.selection`对象来获取用户选择的文本范围。这个对象提供了一个`createRange()`方法来获取选区对象,以及一个`pasteHTML()`方法,可以将HTML内容粘贴到选区,替换选中的文本。
以下是这个实例的详细代码:
```javascript
function SetSelectionText(text) {
// 非IE浏览器
if (window.getSelection) {
var sel = window.getSelection();
var r = sel.getRangeAt(0); // 获取选区范围
var selFrag = r.cloneContents(); // 克隆选中的文本内容
var frag = selFrag.childNodes; // 获取选中的节点数组
for (var i = 0; i < frag.length; i++) {
console.log(frag[i].nodeName); // 打印选中的节点信息
}
var h1 = document.createElement('H1'); // 创建一个新的H1元素
h1.textContent = text; // 设置元素内容
}
else if (document.selection && document.selection.createRange) {
// IE浏览器处理方式
var sel = document.selection.createRange(); // 获取选区对象
sel.pasteHTML('
' + text + '
'); // 将新的HTML内容粘贴到选区,替换选中的文本}
}
```