脚本化文档

选取文档元素

1.用指定的ID属性

var section = document.getElementById('section')

2.用指定的name属性

name属性的值不是必须唯一：多个元素可能有同样的名字，在表单中，单选和复选按钮通常是这种情况。而且，和id不一样的是name属性只在少数html元素中有效，包括表单、表单元素、<iframe>和<img>元素

使用getElementsByName()

var radio = document.getElementsByName('radio')    name = radio

3.用指定的标签名字

选取文档中的第一个<span>元素
var spans = document.getElementsByTagName('span')[0];

var spans = document.getElementsByTagName('span');     <span></span>

document.images和document.forms的属性为HTMLCollection对象，这些对象都是只读的类数组对象，它们有length属性，也可以像真正的数组一样索引（只是读而不是写），给它们的内容用如下标准的循环进行迭代

for(var i = 0;i<document.images.length;++i){    //循环所有的图片
    document.images[i].style.display = 'none';  //....隐藏它们
}

不能直接在nodeLis和HTML集合上调用Array的方法，但可以间接地使用

var content = Array.prototype.map.call(document.getElementsByTagName('span'),
    function(e){
        return e.innerHTML
    }
    )
输出：["124"]

如果要迭代一个nodeList对象时在文档中添加或删除的元素，首先会需要对NodeList对象生成一个静态的副本：

var list = ['a','b','c','d'];
var a = Array.prototype.slice.call(list,0);
console.log(a)
输出：["a", "b", "c", "d"]  

4.用指定的CSS类

//查找class为war的所有元素
var war = document.getElementsByClassName('war');
//查找id为log并且有'fatal'和'error'类的元素的所有后代
var log = document.getElementById('log');
var fatal = log.getElementsByClassName('fatal error');
console.log(fatal)
输出：[span.fatal.error, span.fatal.error]
<span id="log">
    <span class="fatal error"></span>
</span>

5.匹配指定的CSS选择器

元素可以基于属性值来选取

p[lang = 'fr']   //所有使用法语的段落，如：<p lang = 'fr'>

*[name = 'x']  //所有包含name = 'x'属性的元素

querySelector和querySelectAll的区别

querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)
var b = document.querySelector('#log');
console.log(b);
输出：<span id = "log"></span>
var c = document.querySelectorAll('#log')
console.log(c);
输出：[span#log] 

节点树的文档

parentNode   该节点的父节点

childNodes     该节点的子节点

firstChild / lastChild   该节点的子节点的第一个和最后一个

nextSibling / previoursSibling   该节点的兄弟节点中的前一个和下一个。具有相同父节点的两个节点为兄弟节点

nodeType   该节点的类型。9代表Document节点，1代表Element节点，3代表Text节点，8代表Comment节点，11代表DocumentFragment节点

nodeValue   Text节点或Comment节点的文本内容

nodeName   元素的标签名，以大写形式表示

HTML属性作为Element的属性

查询一张图片的URL

var img = document.getElementById('imgs'); 
var imgu = img.src;  //查找src属性是图片的URL

设置form表单提交属性

var f = document.forms[0];  //找到文档中第一个form
f.action = 'www.baidu.com';   //设置提交至的URL
f.method = 'POST'   //HTTP请求类型
同等于：
<form action="www.baidu.com" method="post"></form>

getAttribute() 方法返回指定属性名的属性值

提示：如果您希望以 Attr 对象返回属性，请使用 getAttributeNode

实例：

//获得链接的 target 属性
<img src="piao1.jpeg" target="_blank">
var image = document.getElementsByTagName('img')[0].getAttribute('target');
输出：_blank

setAttribute() 方法添加指定的属性，并为其赋指定的值

如果这个指定的属性已存在，则仅设置/更改值

语法：element.setAttribute(attributename,attributevalue)

实例：

设置 input 元素的 type 属性

<input onclick="setA()">
function setA(){
        document.getElementsByTagName('input')[0].setAttribute('type','button');  //给input设置type="button",点击之后变成button按钮
    }

hasAttribute()  如果存在指定属性，则 hasAttribute() 方法返回 true，否则返回 false

语法：element.hasAttribute(attributename)

实例：

<p id="demo">请点击按钮来查看 button 元素是否拥有 onclick 属性。</p>
<button onclick="myFunction()">试一下</button>
function myFunction()
{
var btn=document.getElementsByTagName("BUTTON")[0];
var x=document.getElementById("demo");
x.innerHTML=btn.hasAttribute("onclick");
}

removeAttribute()  方法删除指定的属性

此方法与 removeAttributeNode() 方法的差异是：removeAttributeNode() 方法删除指定的 Attr 对象，而此方法删除具有指定名称的属性。结果是相同的。同时此方法不返回值，而 removeAttributeNode() 方法返回被删除的属性，以 Attr 对象的形式

语法：element.removeAttribute(attributename)     无返回值

实例：

删除 header 元素的 style 属性

<h1 style="color:red">Hello World</h1>
<p id="demo">点击按钮来删除标题中的 style 属性。</p>
<button onclick="myFunction()">试一下</button>
function myFunction()
{
document.getElementsByTagName("H1")[0].removeAttribute("style"); 
}

textContent()  属性设置或返回指定节点的文本内容，以及它的所有后代

如果您设置了 textContent 属性，会删除所有子节点，并被替换为包含指定字符串的一个单独的文本节点

提示：有时，此属性可用于取代 nodeValue 属性，但是请记住此属性同时会返回所有子节点的文本

语法：设置节点的文本内容    node.textContent=text

　　　返回节点的文本内容    node.textContent

实例：

获得列表的所有文本内容
document.getElementById("myList).textContent;

split()   方法用于把一个字符串分割成字符串数组

语法：stringObject.split(separator,howmany)

返回值：

一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括separator 自身。

但是，如果 separator 是包含子表达式的正则表达式，那么返回的数组中包括与这些子表达式匹配的字串（但不包括与整个正则表达式匹配的文本）。

提示和注释

注释：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

注释：String.split() 执行的操作与 Array.join 执行的操作是相反的。

实例1：

var str="How are you doing today?"
document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))
输出：
How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you

实例2:

//分割结构更为复杂的字符串
"2:3:4:5".split(":")    //将返回["2", "3", "4", "5"]
"|a|b|c".split("|")    //将返回["", "a", "b", "c"]

实例3：

//把句子分割成单词
var words = sentence.split(' ')

//使用正则表达式作为 separator
var words = sentence.split(/s+/)

//如果您希望把单词分割为字母，或者把字符串分割为字符，可使用下面的代码
"hello".split("")       //可返回 ["h", "e", "l", "l", "o"]

//若只需要返回一部分字符，请使用 howmany 参数
"hello".split("", 3)    //可返回 ["h", "e", "l"]

map Map 对象表示 HTML <map> 元素

访问 Map 对象

您可以通过使用 getElementById() 来访问 <map> 元素:

<map name="myMap" id="myMap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

<p>点击按钮来获得图像映射中 area 元素的数目。</p>

<p id="demo"></p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var x = document.getElementById("myMap").areas.length;
document.getElementById("demo").innerHTML = x;
}
输出：3

创建 Map 对象

您可以通过使用 document.createElement() 方法来创建 <map> 元素

<p id="demo"></p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var x = document.createElement("MAP");
x.setAttribute("id", "myMap");
x.setAttribute("name", "myMap");
document.body.appendChild(x);

var y = document.createElement("AREA");
y.setAttribute("href", "/example/html/venus.html");
y.setAttribute("shape", "circle");
y.setAttribute("coords", "180,139,14");
document.getElementById("myMap").appendChild(y);

document.getElementById("demo").innerHTML = "已创建 MAP，现在您可以在图像中点击 venus 区域。";
}
输出：已创建 MAP，现在您可以在图像中点击 venus 区域（创建成功）

jquery map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象

语法：.map(callback(index,domElement))

详细说明

由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以得到基础的数组。

.map() 方法对于获得或设置元素集的值特别有用。请思考下面这个带有一系列复选框的表单

<form method="post" action="">
  <fieldset>
    <div>
      <label for="two">2</label>
      <input type="checkbox" value="2" id="two" name="number[]">
    </div>
    <div>
      <label for="four">4</label>
      <input type="checkbox" value="4" id="four" name="number[]">
    </div>
    <div>
      <label for="six">6</label>
      <input type="checkbox" value="6" id="six" name="number[]">
    </div>
    <div>
      <label for="eight">8</label>
      <input type="checkbox" value="8" id="eight" name="number[]">
    </div>
  </fieldset>
</form>

<p><b>Values: </b></p>

$("p").append($(':checkbox').map(function() {   //遍历:checkbox,将:checkbox里的id放入p标签里
    return this.id;
  }).get().join(','));

输出：Values: two,four,six,eight

<p class="textmap"><b>Values: </b></p>
    <form class="textmapForm">
          <input type="text" name="name" value="John"/>
          <input type="text" name="password" value="password"/>
          <input type="text" name="url" value="http://ejohn.org/"/>
    </form>

    <script>
    $(function(){
        $(".textmap").append( $("input").map(function(){
              return $(this).val();   //遍历input,将input里的value放入class="textmap"里
        }).get().join(", ") );
        console.log($("input").map(function(){
              return $(this).val();
        }));
    });
    </script>
输出：Values: John, password, http://ejohn.org/

get()原来JQuery下有一个概念叫“类数组”，例如$("li");获取的集合就是类数组，有数组的一些属性，但是不是真正的数组，这类数组的instance of Array是false。

从jQuery对象和js对象的角度来理解的话就是JQuery这种类数组可以理解为属于JQuery对象的数组，所以不能应用JS对象的方法。

map()的工作有两步：

1、遍历。遍历集合中的每一个元素。

2、替换。对每一个元素执行callback，用返回值替换集合中原本的值。

所以值虽然变了，但是依然属于JQuery对象。

总结：

map()函数返回JQuery对象的数组。

get()函数返回JS对象的数组。

ps:jQuery对象只能用JQuery的方法。

textContent()  纯文本元素内容

var div = document.getElementsByTagName('div')[0];  //选div第一个
var text = div.textContent;  //纯文本显示
div.textContent = "hello document";  //修改纯文本内容

toUpperCase() 将字母转换为大写

createElement 创建节点

<span onclick="span()">span</span>

function span(){
        var spans = document.getElementsByTagName('span')[0];  //选span第一个
        var s = document.createElement('span');   //创建一个节点
        s.textContent= '新增';   //给节点赋值
        spans.appendChild(s);   //将新增的节点放入到第一个span里面
    }

createTextNode   创建文本节点

appendChild()  方法向节点添加最后一个子节点

提示：如果您需要创建包含文本的新段落，请记得添加到段落的文本的文本节点，然后向文档添加该段落。

您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。

实例：

从一个列表向另一个列表中移动列表项

<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>
<p id="demo">请点击按钮把项目从一个列表移动到另一个列表中。</p>
<button onclick="myFunction()">亲自试一试</button>

function myFunction()
{
var node=document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
}

语法：node.appendChild(node)

返回值

insetBefore()   方法在您指定的已有子节点之前插入新的子节点

提示：如果您希望创建包含文本的新列表项，请记得创建文本节点形式的文本，以便追加到 LI 元素中，然后向列表插入这个 LI。

您也可以使用 insertBefore 方法插入/移动已有元素。

实例1：

把一个列表项从一个列表移动到另一个中

<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>
<p id="demo">请点击按钮把项目从一个列表移动到另一个列表中。</p>
<button onclick="myFunction()">亲自试一试</button>

function myFunction(){
        var node = document.getElementById("myList2").lastChild;  //myList2的最后一个子节点
        var list = document.getElementById("myList1");
        list.insertBefore(node,list.childNodes[0]);
    }

实例2：

将第二个节点添加到第一个节点的子节点中

<button onclick="btn1()">节点一</button>
<button onclick="btn2()">节点二</button>
<button onclick="btn3()">节点三</button>

function btn3(){
        var btn3 = document.getElementsByTagName('button')[2];
        var btn1 = document.getElementsByTagName('button')[0];
        btn1.insertBefore(btn3,btn1.childNodes[0]);      //将btn3插入到btn1的第一个子节点
    }

语法：node.insertBefore(newnode,existingnode)

removeChild()  方法指定元素的某个指定的子节点。以 Node 对象返回被删除的节点，如果节点不存在则返回 null。

语法：node.removeChild(node)

实例：

从列表中删除一个项目

<ul id="myList">
　　<li>Coffee</li>
　　<li>Tea</li>
　　<li>Milk</li>
</ul>
<p id="demo">点击按钮来删除列表中的首个项目。</p>
<button onclick="myFunction()">试一下</button>

function myFunction()
{
var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
}

replaceChild() 方法用新节点替换某个子节点

这个新节点可以是文档中某个已存在的节点，或者您也可创建新的节点。

语法：node.replaceChild(newnode,oldnode)

实例：

用一个新项目替换列表中的某个项目

<ul id="myList">
　　<li>Coffee</li>
　　<li>Tea</li>
　　<li>Milk</li>
</ul>
<p id="demo">点击按钮来替换列表中的首个项目。</p>
<button onclick="myFunction()">试一下</button>

function myFunction()
{
var textnode=document.createTextNode("Water");
var item=document.getElementById("myList").childNodes[0];
item.replaceChild(textnode,item.childNodes[0]);
}

//首先创建一个新的文本节点。
//然后替换首个列表项中的首个子节点。
//注释：本例用文本节点 "Water" 替换文本节点 "Coffee"，而不是整个 LI 元素，这是替换节点的另一种方法。

用函数展示replaceChild()的另一种用法：

//用一个新的<b>元素替换n节点，并使n成为该元素的子节点
function embolden(n){
        //假如参数为字符串而不是节点，将其当作元素的id
        if(typeof n == "string")n = document.getElementById(n);
        var parent = n.parentNode;      //获得n的父节点
        var b = document.createElement('b');     //创建一个<b>元素
        parent.replaceChild(b,n);   //用该<b>元素替换节点n
        b.appendChild(n);   //使n成为<b>元素的子节点
}

outerHTML()  设置或获取对象及其内容的 HTML 形式

innerHTML() / outerHTML() / innerText() / outerText()不同之处：

1)、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。 
2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。 
    对于一个id为"testdiv"的div来说，outerHTML、innerHTML以及innerTEXT三者的区别可以通过下图展示出来：

insertAdjacentHTML() 可以在指定的地方插入html内容和文本内容

insertAdjacentText方法与 insertAdjacentHTML方法类似，只不过只能插入纯文本，参数相同

参数介绍：
where：插入位置。包括beforeBegin,beforeEnd,afterBegin,afterEnd。
el：用于参照插入位置的html元素对象
html：要插入的html代码

nsertAdjacentHTML 方法：在指定的地方插入html标签语句

原型：insertAdajcentHTML(swhere,stext)

参数：

swhere: 指定插入html标签语句的地方，

stext:要插入的内容

有四种值可用：

1.     beforeBegin: 插入到标签开始前

2.     afterBegin:插入到标签开始标记之后

3.     beforeEnd:插入到标签结束标记前

4.     afterEnd:插入到标签结束标记后

实例：insertAdjacentHTML()用法

<body onload="some()">
<div id="ya">原著</div>
</body>

 function some(){
        document.all.ya.insertAdjacentHTML('afterBegin','<h1>在文本前容器内插入内容1</h1>')
        document.all.ya.insertAdjacentHTML('beforeEnd','<h2>在文本前容器内插入内容2</h2>')
        document.all.ya.insertAdjacentHTML('beforeBegin','<h4>在文本前容器内插入内容3</h4>')
        document.all.ya.insertAdjacentHTML('afterEnd','<h5>在文本前容器内插入内容4</h5>')
    }

creatDocumentFragment() 创建空文档片段

pageXOffset()  pageYOffset()   设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置

语法：

window.pageXOffset
window.pageYOffset

注意： IE 8 及 更早 IE 版本不支持该属性,但可以使用 "document.body.scrollLeft" 和 "document.body.scrollTop" 属性 

怪异模式下下在文档的<body>元素(document.body)上查询

实例：

滚动100个像素的内容，并弹出pageXOffset和pageYOffset

function scrollWindow(){
    window.scrollBy(100,100)
    alert("pageXOffset: " + window.pageXOffset + ", pageYOffset: " + window.pageYOffset)
}

<input type="button" onclick="scrollWindow()" value="滚动" />
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>

jquery CSS操作 -- scrollLeft()  方法返回或设置匹配元素的滚动条的水平位置

滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时，位置是 0

语法：$(selector).scrollLeft()

 实例1：

设置 <div> 元素中滚动条的水平偏移

$(document).ready(function(){
  $("button").click(function(){
    $("div").scrollLeft(100);
  });
});

<div style="border:1px solid black;100px;height:130px;overflow:auto">
The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
</div>
<button class="btn1">把滚动条的水平位置设置为 100px</button>

实例2：

返回水平滚动条位置

返回第一个匹配元素的水平滚动条位置。

语法：$(selector).scrollLeft()

$(document).ready(function(){
  $(".btn1").click(function(){
    alert($("div").scrollLeft()+" px");
  });
});

<div style="border:1px solid black;100px;height:130px;overflow:auto">
The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
</div>
<button class="btn1">获得滚动条的水平位置</button>
<p>试着移动滚动条，然后再次点击按钮。</p>

实例3：

设置水平滚动条位置

设置所有匹配元素的水平滚动条位置。

语法：$(selector).scrollLeft(position)

$(document).ready(function(){
  $("button").click(function(){
    $("div").scrollLeft(100);
  });
});

<div style="border:1px solid black;100px;height:130px;overflow:auto">
The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
</div>
<button class="btn1">把滚动条的水平位置设置为 100px</button>

innerheight()  innerwidth ()

定义和用法

只读属性，声明了窗口的文档显示区的高度和宽度，以像素计。

这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。

IE 不支持这些属性。它用 document.documentElement 或 document.body （与 IE 的版本相关）的 clientWidth 和 clientHeight 属性作为替代。

getBoundingClientRect()

getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性

 语法：这个方法没有参数

rectObject = object.getBoundingClientRect()

返回值类型：TextRectangle对象，每个矩形具有四个整数性质（ 上， 右 ， 下，和左 ）表示的坐标的矩形，以像素为单位

   rectObject.top：元素上边到视窗上边的距离;

　rectObject.right：元素右边到视窗左边的距离;

　rectObject.bottom：元素下边到视窗上边的距离;

　rectObject.left：元素左边到视窗左边的距离;

               

width和height：ie9以上支持width/height属性

但在原始的IE中未实现：

var box = e.getBoundingClientRect();
var w = box.width || (box.right - box.left);
var h = box.height || (box.bottom - box.top)

兼容ie6~ie8的width/height的写法:

var rectWidth = rectObject.right - rectObject.left;
    rectHeight = rectObject.bottom - rectObject.top;

ie7及ie7以下会多出两个像素

解决方法如下：

var rectLeft = rectObject.left - document.documentElement.clientLeft || 2;
    rectRight = rectObject.right - document.documentElement.clientLeft || 2;
    rectBottom = rectObject.bottom - document.documentElement.clientTop || 2;
    rectTop = rectObject.top - document.documentElement.clientTop || 2;

附原文：http://www.cnblogs.com/Songyc/p/4458570.html

附offset,scroll,client详解链接：http://www.jb51.net/article/35478.htm

document.elementFromPoint()    判定元素在某点(接上)

 每个HTML元素都有一下属性：

<form>表单

//id为"shipping"的表单中所得的单选按钮
document.querySelectorAll('#shipping input[type="radio"]');
//id为"shipping"的表单中所有名字为"method"的单选按钮
document.querySelectorAll('#shipping input[type="radio"][name="method"]');

有name或id属性的<form>元素能够通过很多方法来选取。 name="address" 属性的<form>可以用以下任何方法来选取：

如果address的表单第一个元素的name是"street"，可以使用以下任何一种表达式来引用该元素：

如果要明确的选取一个表单元素，可以索引表单对象的elements属性：

考虑以下表单，它包含多个单选按钮来选择运输方式：

<form name="shop">
        <fieldset>
            <legend>Shop Method</legend>
            <label>
                <input type="radio" name="method" value="1st">first-class
            </label>
            <label>
                <input type="radio" name="method" value="2day">2-day Air
            </label>
            <label>
                <input type="radio" name="method" value="overnite">Overnight
            </label>
        </fieldset>
</form>

//对于该表单，用如下代码来引用单选按钮元素数组：
var methods = document.forms.shop.elements.method;   //引用单选按钮的元素数组
console.log(methods);  //[input, input, input, value: ""] input数组

//注意，<form>元素本身有一个HTML属性和对应的Javascript属性叫"method"，所以在此案例中，必须要用该表单的elements属性而非直接访问method属性。为了判定用户选取哪种运输方式，需要遍历数组中的表单元素并检测它们的checked属性：

var shop_method;
    for(var i=0;i<methods.length;++i){
        console.log(methods[i]);   //<input type="radio" name="method" value="1st">
        if(methods[i].checked)
            shop_method = methods[i].value;
    }

form对象的submit()方法来提交表单，调用reset()方法来重置表单元素的值

通过onreset事件提醒用户来确认是否重置：

<form name="shop" onreset="return confirm('Really erase ALL input and start over?')">
<button type="reset">Clear and Start Over</button>
</form>

查询选取的文本

有时判定用户在文档中选取了哪些文本非常有用。可以用类似如下的函数达到目的：

 function getSelectedText(){
       if(window.getSelection) return window.getSelection().toString();   //HTML5标准API
       else if(document.selection) return document.selection.createRange().text;   //IE特有的技术
    }

如上代码在书签工具中特别有用，它操作选取的文本，然后利用搜索引擎或参考站点查找某个单词。例如，如下HTML链接在Wikipedia上查找当前选取的文本。收藏书签后，该链接和它包含的javascriptURL就变成了一个书签工具：

<a href="javascript:var q;
   if(window.getSelection) q = window.getSelection().toString();
   else if(document.selection) q = window.selection.createRange().text;
   void window.open('http://en.wikipedia.org/wiki/' + q)
">Look Up Selected Text In Wikipedia</a>

上述展示的查询选取代码兼容性不佳，window对象的getSelection()方法无法返回那些表单元素<input>或<textarea>内部选中的文本，它只返回在文档主体本身中选取的文本。另一方面，IE的document.selection属性可以返回文档中任意地方选取的文本。

从文本输入域或<textarea>元素中获取选取的文本可使用一下代码：

elt.value.substring(elt.selectionStart,elt.selectionEnd);

IE8以及更早版本的浏览器不支持selectionStart和selectionEnd属性。

可编辑的内容

有两种方法来启用编辑功能：其一，设置任何标签的HTML contenteditable属性；其二，设置对应元素的javascript contenteditable属性；这都将使得元素的内容变成可编辑。

<div contenteditable="true">可编辑</div>

//当contenteditable = true  表示可编辑，当等于false 表示不可编辑

将Document对象的designMode属性设置为字符串 “on” 使得整个文档可编辑，设置为 “off” 将恢复为只读文档(不可编辑)。designMode属性并没有对应的HTML属性。

<iframe id="edt" src="about:blank"> <!--空iframe-->

var edt = document.getElementById('edt');    //获得iframe中的文档对象
edt.contentDocument.designMode = "on";    //开启编辑

当谈到它们实际的可编辑行为时，它们是不太兼容的。

setSelectionRange HTML文档/文字内容选中(未完待续......)

<p><input type="text" id="mytextbox" size="20" value="Mozilla"/></p>
<p><button onclick="SelectText()">Select text</button></p>

function SelectText () {
            var input = document.getElementById("mytextbox");
            input.focus();
            input.setSelectionRange(2,5);  //第二个到第五个被选中的文字
       }

execCommand()

语法：bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

返回值：

一个 Boolean ，如果是 false 则表示操作不被支持或未被启用

参数：

命令：

 实例：

<p>点击复制后在右边textarea CTRL+V看一下</p>
<input type="text" id="inputText" value="测试文本"/>
<input type="button" id="btn" value="复制"/>
<textarea rows="4"></textarea>

var btn = document.getElementById('btn');
        btn.addEventListener('click', function(){
            var inputText = document.getElementById('inputText');
            var currentFocus = document.activeElement;  //获取页面焦点
            inputText.focus();   //获取文本焦点
            console.log(inputText.value.length);
            inputText.setSelectionRange(0, inputText.value.length);  //
            document.execCommand('copy', true);   //复制文本
            currentFocus.focus();
     });

更多命令查看地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

execCommand()所支持的命令通常是由工具栏上的按钮触发的。当要触发的命令不可用时，良好的UI会使对应的按钮无效。调用document.queryCommandEnabled()来查询当前所使用的命令，或者查询浏览器是否支持该命令。

fontname()命令使用document.queryCommandValue()查询

如果当前选取的文本使用了两种不同的字体，“fontname”的查询结果是不确定的。使用document.queryCommandIndeterm()来检测这种情况。

命令：

 互操作命令列表，请参见：https://www.quirksmode.org/dom/execCommand.html