html5学习笔记(7)

html5 编辑API之Range对象 1：

Range对象代表页面上的一段连续的区域：

Selection对象和Range对象

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body><script>function rangeTest(){var html;showRangeDiv = document.getElementById("showRange");selection = document.getSelection();if(selection.rangeCount > 0){html = "选取" + selection.rangeCount + "段内容<br/>";for(var i=0; i<selection.rangeCount; i++){var range = selection.getRangeAt(i);html += "第" + (i+1) + "段内容" + range + "<br/>";}showRangeDiv.innerHTML = html;}}</script>Selection对象和Range对象的使用(选取网页上的文字，并显示)<input type="button" value="click" οnclick="rangeTest()"><div id="showRange"></div>
</body>
</html>

SelectionNode，range对象的起点指定为某个节点的起点，range对象的终点指定为该节点的终点，使range对象包含该节点；

SelectionNodeContents , range对象的起点指定为某个节点中所有内容的起点；range对象的终点指定为该节点中所有内容的终点；

deleteContents方法：将range对象包含的内容删除

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body>
<script>function deleteRangeContent(onlyContent){var div = document.getElementById("div");var rangeObj = document.createRange();if(onlyContent){//删除节点的内容rangeObj.selectNodeContents(div);//选中的是节点中的内容rangeObj.deleteContents();}else{//删除整个节点rangeObj.selectNode(div);//选中的是整个节点rangeObj.deleteContents();}}
</script>
<div id="div" style="background-color: aqua; width: 300px; height: 50px">元素中的内容
</div>
<button οnclick="deleteRangeContent(true)">删除内容</button>
<button οnclick="deleteRangeContent(false)">删除元素</button></body>
</html>

setStart, 指定range对象的起点

setEnd，。。。。。终点。

等方法：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body>
<script>function deleteChar(){var div = document.getElementById("myDiv");var textNode = div.firstChild;var rangeObj = document.createRange();rangeObj.setStart(textNode,1);rangeObj.setEnd(textNode,4);rangeObj.deleteContents();}
</script>
<div id="myDiv" style="color: crimson">用来删除的文字
</div>
<button οnclick="deleteChar()">删除文字</button>
</body>
</html>

其他方法：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body>
<script>function deleteRow(){var table = document.getElementById("myTable");if(table.rows.length>0){var row = table.rows[0];var rangeObj = document.createRange();rangeObj.setStartBefore(row);rangeObj.setEndAfter(row);rangeObj.deleteContents();}}
</script>
<table id="myTable" border ='1' cellpadding="0"><tr><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td></tr>
</table>
<button οnclick="deleteRow()">删除第一行</button>
</body>
</html>

转载于:https://blog.51cto.com/4440271/1684074

html5学习笔记(7)相关推荐

Html5学习笔记1 元素标签属性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
HTML5 学习笔记
HTML5 学习笔记前言该学习笔记的相关学习视频:[狂神说Java]HTML5完整教学通俗易懂目前笔记只有简单的例子和框架,将来在实践中会进一步学习和补充内容目录 HTML5 学习笔记前言 ...
HTML5学习笔记之音视频标签
HTML5学习笔记之音视频标签其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习 ...
html5学习笔记--leon
html5学习笔记–leon ####什么是html5 1.H5并不是新的语言,而是html语言的第五次重大修改–版本 2.支持:所有的主流浏览器都支持h5.(chrome,firefox,safar ...
html5表格所有属性,HTML5学习笔记之表格标签
HTML5学习笔记之表格标签其他HTML5相关文章一.表格标签 image 1.作用: 以表格形式将数据显示出来, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式 2.格式 ...
HTML5学习笔记 —— JavaScript基础知识
HTML5学习笔记 -- JavaScript基础知识标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读评论(0) 收藏举报分类: JavaScr ...
CSS3秘笈第三版涵盖HTML5学习笔记6~8章
第二部分----CSS实用技术第6章,文本格式化指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...
HTML5学习笔记（一）：HTML简介
Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...
HTML5学习笔记--第六章文本元素
HTML5学习地址链接: 我要自学网. 6-1 标题元素 <!DOCTYPE html> <html><head><meta charset="UT ...
HTML5学习笔记（2020年11月）
前言在B站听尚硅谷的HTML课程,随听随记,感觉老师讲的很不错,用很快的速度过了一遍,比较基础,大家凑合着看.同时,对于markdown文档也是第一次学习使用,还有很不规范的地方. 目录前言一. ...

html5学习笔记(7)

html5学习笔记(7)相关推荐

最新文章

热门文章