js之document对象

document对象叫做文档对象模型（DOM），它代表和操作文档的内容。

1、选取文档元素

• 用指定的id属性：document.getElementById(...)
• 用指定的name属性:document.getElementsByName(...)
• 用指定的标签名字:document.getElementsByTagName(...)，特殊情况：document.body代表body元素，document.head代表head元素，documentElement代表根元素。
• 用指定的css类:document.getElementsByClassName(...)
• 用指定的css选择器：document.querySelectorAll()，接收一个css选择器的字符串参数。另外还有一个document.querySelector()，返回第一个匹配的元素。

2、文档结构和遍历

parentNode：该节点的父节点

childNodes：该节点的子节点的实时表示

firstChild、lastChild：第一个和最后一个节点

nextSibling、previousSibling：下一个和上一个节点。

nodeType：节点的类型

nodeValue：text节点和comment节点的文档内容

nodeName：元素的标签名，已大写形式展示

3、属性

• 获取、设置、检测、删除属性：getAttribute()、setAttribute()、hasAttribute()、removeAttribute()
• 数据集属性：在HTML5中，任意以data-为前缀的小写的属性都是何方的，叫做数据集属性，我们可以通过dataset来获取所有的数据集属性对象，它的key值是去掉前缀的data-的属性

4、元素的内容

innerHTML：返回那个元素的内容

outerHTML：返回包含被查询元素的开头和结尾标签的内容。当设置outerHTML时，元素本身被新的内容所替换

textContent（非IE）/innerText（IE）：返回纯文本内容

5、创建、插入和删除节点

createElement()：创建element节点

cloneNode()：返回该节点的全新副本

appendChild()：向该节点的末尾插入指定的节点

insertBefore()：接收两个参数，第一个是待插入的节点，第二个是已插入的节点，新节点将插入到该节点的前面，该方法是在新节点的父节点上调用，第二个参数必须是父节点的子节点，如果传递null，则与appendChild行为一样

tip：如果调用appendChild和insertBefore将已存在的一个节点再次插入，则那个节点会自动从它当前位置删除并在新的位置重新插入。

removeChild：删除节点

replaceChild：删除一个节点，并用新的节点替换它。

6、文档和元素的几何形状和滚动

• 文档坐标和视口坐标：相对于文档的左上角叫文档坐标，相对于在其中显示文档的视口的左上角叫视口坐标，如果没有滚动条，则文档坐标==视口坐标，文档坐标=视口坐标+滚动条的偏移量
• pageXOffset、pageYOffset：浏览器窗口滚动条的位置
• 查询元素的几何尺寸：调用元素的getBoundingClientRect()，返回元素在视口坐标中的位置，包含left、right、top、bottom属性。
• 滚动：scrollTo()/scroll()：接收两个参数，x和y坐标，设置滚动条的偏移量，scrollBy()：与前面两个方法类似，只是它的参数是相对的，在当前滚动条的偏移量上增加。
• html元素拥有的位置属性：以offset开头，以client开头，以scroll开头

offsetWidth：内容+内边距+边框	clientWidth：内容+内边距	scrollWidth：内容+内边距的宽度+溢出内容
offsetHeight：内容+内边距+边框	clientHeight：内容+内边距	scrollHeight：内容+内边距的宽度+溢出内容
offsetLeft：文档坐标的X坐标	clientLeft	scrollLeft：设置和读取元素滚动条的位置
offsetTop：文档坐标的Y坐标	clientTop	scrollTop：设置和读取元素滚动条的位置
offsetParent：以上属性所相对的父元素
注：对于大多数元素，offsetParent元素就是文档，但对于已定位的元素的后代元素和一些其它元素，如table，则是相对于祖先元素

7、查询选取的文本：

//返回被选取的纯文本，但无法返回input和textarea里被选中的内容
function getSelectedText(){
    if(window.getSelection){        //HTML5标准API
        return window.getSelection().toString();
    }else if(document.selection){    //ie特有的技术
        return document.selection.createRange().text;
    }
}

8、可编辑的内容（富文本编辑器就是以此来实现的）

设置任何标签的contenteditable属性，这将使得元素的内容可编辑，当用户点击该元素的内容时就会出现插入光标，用户敲击键盘就可以插入其中

<div contenteditable>
    click to edit
</div>

如果将document对象的designMode属性设置为on，使得整个文档可编辑，设置为off，将恢复为只读文档，如下代码使得iframe内部的文档可编辑

<iframe id="editor" src="about:blank"></iframe>
<srcipt>
    window.onload(){
        var editor = document.getElementById('editor');
        editor.contentDocument.designMode = "on";
    }
</script>