详解JavaScript Document对象

时间 2020-02-01

标签详解 javascript document 对象栏目 JavaScript 繁體版

原文原文链接

赞助我以写出更好的文章，give me a cup of coffee?javascript

2017最新最全前端面试题

在浏览器中，与用户进行数据交换都是经过客户端的javascript代码来实现的，而完成这些交互工做大多数是document 对象及其部件进行的，所以document对象是一个比较重要的对象。css

document对象概述

document对象是文档的根节点，window.document属性就指向这个对象。也就是说，只要浏览器开始载入HTML文档，这个对象就开始存在了，能够直接调用。html

document.childNodes属性返回该对象的全部子节点。对于HTML文档来讲，document对象通常有两个子节点。前端

第一个子节点是document.doctype，表示文档类型节点（DocumentType）。对于HTML5文档来讲，该节点就表明<!DOCTYPE html>。html5

第二个子节点是document.documentElement，表示元素节点（Element），表明：<html lang="en">。java

document 对象的属性

document对象主要有以下属性：git

属性	说明
document.title	设置文档标题等价于HTML的<title>标签
document.bgColor	设置页面背景色
document.linkColor	未点击过的连接颜色
document.alinkColor	激活连接(焦点在此连接上)的颜色
document.fgColor	设置前景色(文本颜色)
document.vlinkColor	已点击过的连接颜色
document.URL	设置URL属性从而在同一窗口打开另外一网页
document.fileCreatedDate	文件创建日期，只读属性
document.fileModifiedDate	文件修改日期，只读属性
document.fileSize	文件大小，只读属性
document.cookie	设置和读出cookie
document.charset	设置字符集简体中文:gb2312

指向其余节点或对象的属性

document.doctype // <!DOCTYPE html>
document.documentElement //返回文档的根节点 <html>...</html>
document.head // <head>...</head>
document.body // <body>...</body>
document.defaultView // window

document.querySelector('textarea').focus();
document.activeElement // <textarea>

querySelector返回的是一个对象，而querySelectorAll返回的一个集合(NodeList)。IE8以上支持github

详见：W3C selector API面试

指向特定元素集合的属性

document.all ：文档中全部的元素，Firefox不支持该属性。
document.forms ：全部的form元素。
document.images：全部的img元素。
document.links：全部的a元素。
document.scripts：全部的script元素。
document.styleSheets：全部的link或者style元素。

对象方法：

方法	说明
document.write()	动态向页面写入内容
document.createElement(Tag)	建立一个html标签对象
document.getElementById(ID)	得到指定ID值的对象
document.getElementsByTagName(tagname)	得到指定标签名的对象
document.getElementsByName(Name)	得到指定Name值的对象
document.getElementsByClassName(classname)	得到指定类名的对象（html5 API）

getElementById(id)方法返回一个对象，该对象对应着文档里一个特定的元素节点。
getElementsByTagName()方法将返回一个对象数组，他们分别对应着文档里一个特定的元素节点segmentfault

write()和writeln()方法：区别在于后者在传送到文档中的字符串末时附加一个回车符。

querySelector方法的参数使用CSS选择器语法，getElementById方法的参数是HTML标签元素的id属性。

document.querySelector('li')
document.getElementById('last')

若是有多个节点知足querySelector方法的条件，则返回第一个匹配的节点。

document.createElement()是在对象中建立一个对象，要与appendChild() 或 insertBefore()方法联合使用。

其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

body-主体子对象

document.body //指定文档主体的开始和结束等价于body>/body>
document.body.bgColor //设置或获取对象后面的背景颜色
document.body.link //未点击过的连接颜色
document.body.alink //激活连接(焦点在此连接上)的颜色
document.body.vlink //已点击过的连接颜色
document.body.text //文本色
document.body.innerText //设置body>…/body>之间的文本
document.body.innerHTML //设置body>…/body>之间的HTML代码
document.body.topMargin //页面上边距
document.body.leftMargin //页面左边距
document.body.rightMargin //页面右边距
document.body.bottomMargin //页面下边距
document.body.background //背景图片
document.body.appendChild(oTag) //动态生成一个HTML对象

经常使用对象事件

document.body.onclick=”func()” //鼠标指针单击对象是触发
document.body.onmouseover=”func()” //鼠标指针移到对象时触发
document.body.onmouseout=”func()” //鼠标指针移出对象时触发

图层对象的4个属性

document.getElementById(”ID”).innerText //动态输出文本
document.getElementById(”ID”).innerHTML //动态输出HTML
document.getElementById(”ID”).outerText //同innerText
document.getElementById(”ID”).outerHTML //同innerHTML

看以下例子：

<p>hello world!<span>你好</span></p>
<script>
    var p = document.getElementsByTagName('p');//集合
//    alert(p[0].textContent);//firefox
//    alert(p[0].innerText);//IE
    alert(p[0].innerHTML);//hello world!<span>你好</span>
    alert(p[0].outerHTML);//<p>hello world!<span>你好</span></p>
    alert(p[0].textContent);//hello world!你好
</script>