JS Document属性与方法详解及示例

142 浏览量更新于2024-09-01 收藏 81KB PDF 举报

在JavaScript编程中，Document对象是Web页面的核心组件，它代表整个HTML文档。本文将深入探讨Document对象的属性和常用方法，这些属性和方法对于理解和控制网页的结构、样式以及与用户的交互至关重要。首先，我们来看看Document的一些核心属性： 1. `document.title`：这是文档的标题，等同于HTML中的`<title>`标签。通过这个属性，你可以设置或获取当前页面的标题，这对于SEO和用户体验都非常重要。 2. `document.bgColor` 和 `document.fgColor`：这两个属性分别用于设置页面背景色和前景色（即文本颜色）。它们虽然现在较少使用，但在早期浏览器中曾被广泛运用。 3. `document.linkColor`、`document.alinkColor`、`document.vlinkColor`：这三个属性分别对应未点击、已点击和访问过的链接颜色，可以用于定制链接的视觉效果。 4. `document.URL`：允许你设置文档的URL，这通常用来实现页面间的跳转，或者在同一窗口中导航到新的URL。 5. `document.fileCreatedDate` 和 `document.fileModifiedDate`：这两个属性反映了文件的创建和修改日期，但请注意，它们是只读的，不能直接修改。 6. `document.charset`：定义了文档使用的字符编码，如简体中文的`gb2312`，设置字符集有助于正确显示非ASCII字符。 7. `document.fileSize`：表示文档的大小，也是一个只读属性。 8. `document.cookie`：允许你处理文档中的cookies，这对于存储用户状态信息或个性化设置非常有用。接着，我们来关注Document的一些常用方法： - `document.write()`：这是一个动态向页面插入内容的方法，常用于简单的数据输出，但不推荐在现代Web开发中使用，因为它可能干扰DOM解析过程。 - `document.createElement(Tag)`：用于创建一个新的HTML元素对象，是构建和操作DOM树的基础。 - `document.getElementById(ID)` 和 `document.getElementsByName(Name)`：这两个方法分别根据元素的ID或name属性查找并返回匹配的元素，是处理DOM元素的常见方式。 - `document.body.appendChild(oTag)`：这个方法将传入的HTML元素添加到`<body>`元素的末尾，用于构建和更新页面结构。最后，我们提到的是`body`子对象，它是Document对象的一部分，具有特定的属性和方法： - `document.body`：引用整个文档的`<body>`部分，相当于`<body>`标签。 - `document.body.bgColor`、`document.body.link`、`document.body.alink`、`document.body.vlink`：与Document对象的相应属性相同，用于设置和获取`<body>`的样式。 - `document.body.text` 和 `document.body.innerText`：分别用于设置`<body>`内的文本颜色和所有文本内容。理解并熟练运用Document对象的这些属性和方法，将大大提高你的前端开发效率和网页控制能力。在实际项目中，结合现代前端框架和最佳实践，合理使用这些工具，能够让你编写出更加高效和可维护的代码。

JS的的Document属性和方法小结属性和方法小结

Document想必大家并不陌生吧，在使用js的过程中会经常遇到它，那么它有哪些属性、哪些方法，在本文将以

示例为大家详细介绍下，希望对大家有所帮助

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

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

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

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

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

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

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

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

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

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

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

document.cookie //设置和读出cookie

———————————————————————

常用对象方法

document.write() //动态向页面写入内容

document.createElement(Tag) //创建一个html标签对象

document.getElementById(ID) //获得指定ID值的对象

document.getElementsByName(Name) //获得指定Name值的对象

document.body.appendChild(oTag)

———————————————————————

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 // 域名+端口号//好像返回的是主机名localhost,没有返回端口号

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) //打开新的网页

———————————————————————

selection-选区子对象

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

weixin_38570202

粉丝: 9
资源: 952

JS Document属性与方法详解及示例

JavaScript中document用法小结

JS获取文件大小方法小结

jQuery中使用了document和window哪些属性和方法小结

JavaScript window.document的属性、方法和事件小结

JS Document属性与方法详解：基础设置与常用操作

javaScript事件学习小结（四）event的公共成员（属性和方法）

JavaScript中 DOM操作方法小结

javascript中Number的方法小结

javascript读取文本节点方法小结

js查找节点的方法小结

最新资源