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

28 浏览量更新于2024-08-28 收藏 78KB PDF 举报

在JavaScript编程中，Document对象是浏览器的核心组成部分，它提供了与HTML文档交互的接口。本文档小结了关于Document对象的一些重要属性和方法，它们在网页开发中扮演着至关重要的角色。首先，我们来看看Document对象的基本属性： 1. `document.title`：这是设置文档标题的关键属性，相当于HTML中的`<title>`标签。通过这个属性，开发者可以动态地改变页面的标题，这对于SEO优化和用户体验非常重要。 2. `document.bgColor`：用于设置页面的背景颜色，这对于设计和整体视觉效果有着直接影响。 3. `document.fgColor`：控制页面上的文本颜色，即前景色，这对于确保文字清晰易读是必不可少的。 4. `document.linkColor`、`document.alinkColor` 和 `document.vlinkColor`：分别对应未点击、被点击后以及鼠标悬停时链接的颜色，这些属性有助于提升页面的交互性和可读性。 5. `document.URL`：允许程序员设置文档的URL，这常用于在同一窗口内跳转到其他网页。 6. `document.fileCreatedDate` 和 `document.fileModifiedDate`：这两个属性提供文件的创建和修改日期，但请注意，它们通常是只读的，意味着你不能直接修改这些值。接下来，我们关注一些常用的Document对象方法： - `document.write()`：这是一个动态向页面写入内容的方法，可以用来插入HTML、CSS或JavaScript代码，但不推荐在现代Web开发中使用，因为它的使用可能引发安全问题。 - `document.createElement(Tag)`：用于创建一个新的HTML元素对象，这对于构建复杂的DOM结构非常有用。 - `document.getElementById(ID)` 和 `document.getElementsByName(Name)`：用于根据元素的ID或name属性查找并获取对应的DOM对象，是实现页面动态交互的基础。 - `document.body.appendChild(oTag)`：将创建或获取的元素添加到`<body>`标签的末尾，用于更新或扩展页面内容。然后，是`<body>`子对象的特定属性和方法： - `document.body`：代表HTML文档的主体部分，等同于`<body>`标签，提供了对整个可见内容的控制。 - `document.body.bgColor`、`document.body.link`、`document.body.alink` 和 `document.body.vlink`：分别设置或获取页面主体的背景颜色以及不同链接状态下的颜色。 - `document.body.text` 和 `document.body.innerText`：前者设置元素内的纯文本，后者则是设置元素内所有文本内容，包括HTML标签。 - `document.body.innerHTML`：用于设置或替换整个`<body>`元素的HTML内容。 - `document.body.topMargin`：控制页面的上边距，可用于调整页面布局。掌握这些Document对象的属性和方法，可以帮助开发者更有效地管理和控制HTML文档，实现丰富的网页功能和交互体验。在实际项目中，应合理利用这些工具，遵循最佳实践，以确保代码的性能和安全性。

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

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-选区子对象

document.selection

例如：

代码如下:

<div>请选中这里的部分文字。</div>

<!–

function Foo()

{

document.selection.empty();

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

weixin_38518376

粉丝: 5
资源: 909

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

JavaScript中document用法小结

JS获取文件大小方法小结

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

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

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

javascript中Number的方法小结

JavaScript中 DOM操作方法小结

javascript读取文本节点方法小结

js查找节点的方法小结

flash javascript之间的通讯方法小结

最新资源