JavaScript document对象深度解析：属性与方法

75 浏览量更新于2024-08-30 收藏 55KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

"JavaScript中document对象使用详解" 在JavaScript中，`document`对象是浏览器提供的一种全局对象，它代表了当前加载的HTML文档，并提供了访问和操作文档的各种方法和属性。这个对象是Web开发中非常重要的一个组成部分，因为它允许开发者与用户界面进行交互，更新页面内容，以及处理用户输入。首先，`document`对象包含了一些用于控制页面样式的基本属性，如： - `document.title`：用于获取或设置当前文档的标题，这个标题显示在浏览器的标题栏或者标签页上。 - `document.bgColor`：用来设置整个页面的背景颜色，对应HTML中的`<body>`元素的`bgcolor`属性，不过这个属性在现代浏览器中已不推荐使用，建议使用CSS来设置。 - `document.fgColor`：设置文本颜色，同样已被弃用，应使用CSS替代。 - `document.linkColor`, `document.alinkColor`, `document.vlinkColor`：分别设置未被点击、激活状态和已点击过的超链接颜色，现在推荐使用CSS定义链接样式。此外，`document`对象还有其他一些实用属性，如： - `document.URL`：获取当前页面的完整URL。 - `document.fileCreatedDate`, `document.fileModifiedDate`, `document.fileSize`：这些是只读属性，分别表示文件的创建日期、最后修改日期和大小，但需要注意的是，它们并不适用于所有浏览器，因为并不是所有浏览器都支持这些属性。 `document`对象还提供了访问和操作HTML元素的方法，例如： - `document.cookie`：用于设置和读取网页的cookies，这在跟踪用户会话或存储小型数据时非常有用。 - `document.charset`：设置或获取文档的字符编码，比如`"gb2312"`表示简体中文的GBK编码。在文档的主体部分，`document.body`是一个特别重要的子对象，它代表了HTML文档中的`<body>`元素。通过`document.body`，我们可以控制文档主体的样式和内容，比如： - `document.body.bgColor`, `document.body.link`, `document.body.alink`, `document.body.vlink`：分别设置背景颜色、未点击链接颜色、激活链接颜色和已点击链接颜色，推荐使用CSS替换。 - `document.body.text`：设置文本颜色，同样应使用CSS替代。 - `document.body.innerText`：获取或设置`<body>`元素内的纯文本内容。 - `document.body.innerHTML`：获取或设置`<body>`元素内的HTML代码，这在动态修改页面内容时非常有用。 - `document.body.margin*`：设置页面的边距，包括上、左、右、下四个方向，现在通常使用CSS的`margin`属性来代替。 `document`对象提供了丰富的功能，使得JavaScript可以方便地操作HTML文档，实现动态网页效果，如响应用户交互、更新页面元素、处理数据等。在实际开发中，开发者应结合CSS和DOM操作来充分利用`document`对象的功能，创建出交互性和用户体验优秀的网页应用。

资源详情

资源推荐

JavaScript中中document对象使用详解对象使用详解

对象属性

代码如下:

document.title //设置文档标题等价于HTML的<title>标签

document.bgColor //设置页面背景色

document.fgColor //设置前景色(文本颜色)

document.linkColor //未点击过的链接颜色

document.alinkColor //激活链接(焦点在此链接上)的颜色

document.vlinkColor //已点击过的链接颜色

document.URL //设置URL属性从而在同一窗口打开另一网页

document.fileCreatedDate //文件建立日期，只读属性

document.fileModifiedDate //文件修改日期，只读属性

document.fileSize //文件大小，只读属性

document.cookie //设置和读出cookie

document.charset //设置字符集简体中文:gb2312

======================================================================

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()” //鼠标指针移出对象时触发

======================================================================

location-位置子对象

代码如下:

document.location.hash // #号后的部分

document.location.host // 域名+端口号

document.location.hostname // 域名

document.location.href // 完整URL

document.location.pathname // 目录部分

document.location.port // 端口号

document.location.protocol // 网络协议(http:)

document.location.search // ?号后的部分

常用对象事件

代码如下:

documeny.location.reload() //刷新网页

document.location.reload(URL) //打开新的网页

document.location.assign(URL) //打开新的网页

document.location.replace(URL) //打开新的网页

======================================================================

images集合(页面中的图象)

a)通过集合引用

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38512781

粉丝: 6
资源: 953

JavaScript document对象深度解析：属性与方法

javascript-document对象详解(下).zip

javascript的document对象

document.getElementById详解

防抖与节流的封装函数与使用详解

html table使用详解,HTML table使用详解

jquery源码逐行详解

document.getElementById是什么意思

echarts折线图配置详解

jQuery表单插件ajaxForm,ajaxSubmit使用详解

ios 获取html的高度,iOS Webview自适应实际内容高度的4种方法详解

点击事件_JS事件详解(下)

querySelector()详解

node.js中多人聊天室代码详解以及怎样跳转

设置input输入框为只读方法详解

动态添加点击事件_html中如何给图片添加点击事件的详解

canvas详解03-回执图像和视频

java todataurl_利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解

js实现分页点击跳转详解

h3标签中 有script标签 script标签内有 document.write 导致soup无法获取script标签外的文本内容

html5 canvas 开发详解 例子下载

最新资源

h3标签中有script标签 script标签内有 document.write 导致soup无法获取script标签外的文本内容

html5 canvas 开发详解例子下载