深入解析JavaScript document对象及其属性与body子对象
198 浏览量
更新于2024-08-30
收藏 59KB PDF 举报
"在JavaScript编程中，document对象是Web浏览器的核心对象之一，它提供了对整个HTML文档的访问和控制能力。本文将详细介绍document对象的各种属性和方法，以及其与HTML元素的关系，帮助开发者更好地理解和运用这一关键工具。
首先，我们来看看document对象的一些重要属性：
1. `document.title`：这个属性用于设置或获取文档的标题，这等同于HTML中的`<title>`标签。标题对于SEO和用户体验至关重要，因为它会在浏览器标签页和搜索引擎结果中显示。
2. `document.bgColor`、`document.fgColor`、`document.linkColor`、`document.alinkColor`和`document.vlinkColor`：这些属性分别对应页面背景色、前景色（文本颜色）、未点击链接的颜色、激活链接的颜色（焦点时）以及已点击链接的颜色。它们允许开发者定制页面的视觉样式。
3. `document.URL`：用于设置文档的URL，可以用来在当前窗口中跳转到另一个页面。
4. `document.fileCreatedDate`、`document.fileModifiedDate`和`document.fileSize`：这三个只读属性分别提供了文件的创建日期、最后修改日期和大小，但在实际开发中很少直接使用，主要用于显示文件信息。
5. `document.cookie`：这是处理客户端Cookie的重要接口，用于设置和读取存储在用户浏览器中的小数据块，通常用于实现网站的会话管理和个性化。
6. `document.charset`：设置文档的字符编码，如简体中文的`gb2312`，确保正确显示各种字符。
接下来，我们转向document对象的`body`子对象，它是HTML文档的主体部分，代表了可见内容区域：
1. `document.body`：获取或设置HTML文档的主体，等同于`<body>`标签。
2. `document.body.bgColor`、`document.body.link`、`document.body.alink`、`document.body.vlink`和`document.body.text`：与document对象中的颜色属性类似，但针对的是`<body>`内的元素。
3. `document.body.innerText`：用于设置`<body>`元素内部的纯文本内容。
4. `document.body.innerHTML`：更灵活，可以设置整个`<body>`元素内的HTML结构，包括嵌套元素。
5. `document.body.topMargin`、`document.body.leftMargin`、`document.body.rightMargin`和`document.body.bottomMargin`：设置`<body>`元素周围的外边距，影响布局。
通过深入了解和熟练掌握document对象及其属性，开发者可以更好地控制网页的外观、行为和数据交互，提升网站的功能性和用户体验。无论是创建动态网页，还是进行高级前端开发，document对象都是不可或缺的基础工具。"
JavaScript中中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) //打开新的网页
下载后可阅读完整内容，剩余4页未读，立即下载
点击了解资源详情
点击了解资源详情
点击了解资源详情
2020-10-28 上传
2012-09-18 上传
2008-02-29 上传
点击了解资源详情
点击了解资源详情
点击了解资源详情
weixin_38729022
- 粉丝: 4
- 资源: 959
我的内容管理
展开
最新资源
- 俄罗斯RTSD数据集实现交通标志实时检测
- 易语言开发的文件批量改名工具使用Ex_Dui美化界面
- 爱心援助动态网页教程：前端开发实战指南
- 复旦微电子数字电路课件4章同步时序电路详解
- Dylan Manley的编程投资组合登录页面设计介绍
- Python实现H3K4me3与H3K27ac表观遗传标记域长度分析
- 易语言开源播放器项目：简易界面与强大的音频支持
- 介绍rxtx2.2全系统环境下的Java版本使用
- ZStack-CC2530 半开源协议栈使用与安装指南
- 易语言实现的八斗平台与淘宝评论采集软件开发
- Christiano响应式网站项目设计与技术特点
- QT图形框架中QGraphicRectItem的插入与缩放技术
- 组合逻辑电路深入解析与习题教程
- Vue+ECharts实现中国地图3D展示与交互功能
- MiSTer_MAME_SCRIPTS:自动下载MAME与HBMAME脚本指南
- 前端技术精髓：构建响应式盆栽展示网站
