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>