js怎么取js 选中元素的所有元素的html内容

来源：蜘蛛抓取(WebSpider) 时间：2016-11-19 16:35 标签： html5 js拖动选中区域
使用HTML5的JS选择器操作页面中的元素 - 推酷
使用HTML5的JS选择器操作页面中的元素
1 &!DOCTYPE html&
2 &html lang=&en&&
&meta charset=&UTF-8&&
&title&使用HTML5的JS选择器操作页面中的元素&/title&
&!--信息输入标签--&
&h2&兴趣爱好：&label&&/label&&/h2&
&!--复选框列表--&
&input type=&checkbox& id=&c1&&&label for=&c1&&篮球&/label&
&input type=&checkbox& id=&c2&&&label for=&c2&&唱歌&/label&
&input type=&checkbox& id=&c3&&&label for=&c3&&游泳&/label&
&input type=&checkbox& id=&c4&&&label for=&c4&&桌球&/label&
&button&获取兴趣爱好&/button&
//监听获取按钮的点击事件
document.querySelector('button').addEventListener('click',function(e){
//按钮默认事件
e.preventDefault();
//获取所有选中的复选框
var checked = document.querySelectorAll('input:checked'),
results = [];//结果数组
//将元素列表转化为数组
checked = Array.prototype.slice.call(checked);
//循环数组，获取选中的值
checked.forEach(function(item){
var id = item.getAttribute('id'), //获取复选框id
label = document.querySelector('label[for=&'+ id +'&]'); //根据id获取对应label元素
results.push(label.innerHTML); //将数值推入数组
document.querySelector('h2 & label').innerHTML = results.join(',');//设置显示标签内容
39 &/body&
40 &/html&
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致js获取网页选中部分的内容，包含html代码
function getSelectedContents(){
& & if (window.getSelection)
{ //chrome,firefox,opera
range=window.getSelection().getRangeAt(0);
& var container =
document_createElement_x_x_x_x('div');
& container.a(range.cloneContents());
& return container.innerHTML;
& //return window.getSelection(); //只复制文本
& & else if
(document.getSelection) { //其他
range=window.getSelection().getRangeAt(0);
& var container =
document_createElement_x_x_x_x('div');
& container.a(range.cloneContents());
& return container.innerHTML;
& //return document.getSelection(); //只复制文本
& & else if
(document.selection) { //IE特有的
document.selection.createRange().htmlT
& //return document.selection.createRange().
//只复制文本
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。用JavaScript获取页面上被选中的文字的技巧
这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法。最关键的JavaScript API是：
event.selection = window.getSelection();
这里的selection实际上是个对象，但如果我们使用 .toString()或强行转化成字符串，我们将得到被选中的文字。
$(document).ready(function () {
$(".contenttext").mouseup(function (e) {
var parentOffset = $(this).offset();
var x = e.pageX - parentOffset.
var y = e.pageY - parentOffset.
txt = window.getSelection();
if (txt.toString().length & 1) {
alert(txt);
如果我们把这段代码放置到下面的页面中：
&title&Get selected text with JavaScript&/title&
&meta charset="UTF-8"&
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
&script src="/wordpress/wp-includes/js/jquery/jquery.js" type="text/javascript"&&/script&
&div class="contenttext"&
和客户端的 JavaScript 不同的是，PHP 代码是运行在服务端的。如果您在您的服务器上建立了如上例类似的代码，则在运行该脚本后，客户端就能接收到其结果，但他们无法得知其背后的代码是如何运作的。您甚至可以将 WEB 服务器设置成让 PHP 来处理所有的 HTML 文件，这么一来，用户就无法得知服务端到底做了什么。
使用 PHP 的一大好处是它对于初学者来说及其的简单，同时也给专业的程序员提供了各种高级的特性。当您看到 PHP 长长的特性列表时，请不要害怕。您可以很快的入门，只需几个小时您就可以自己写一些简单的脚本。
当用鼠标选中页面中的部分文字，同时你就获取到了选中的内容，我在这里使用alert()方法将其显示出来。
相关文章：
扫一扫二维码分享：javascript（4）
新的html浏览器都支持获取页面中选中文本的操作了。
看看js中提供的操作：
在chrome内：
&.getSelection();
{anchorNode: text, anchorOffset: 4, focusNode: text, focusOffset: 4, isCollapsed: true…}
&&:"Range"
&&__:Selection
在Microsoft的Edge浏览器内，也可以使用document.getSelection()，而旧的IE10可以使用
document.selection
使用document.getSelection().toString();就可以输出获取到的文本了。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：73820次
积分：1275
积分：1275
排名：千里之外
原创：35篇
转载：116篇
(6)(2)(2)(4)(1)(1)(1)(4)(19)(14)(1)(4)(6)(11)(2)(12)(3)(8)(5)(4)(3)(37)(1)

我要回帖

更多关于 html5 js拖动选中区域 的文章

 

随机推荐