【免费】document对象资源-CSDN下载

需积分: 0 6 浏览量更新于2010-08-06 收藏 931KB PPT 举报

在JavaScript中，`document`对象是网页的全局对象，它提供了与HTML文档交互的方法和属性。这个对象允许我们访问和操作HTML元素，实现动态效果和交互功能。在本篇文章中，我们将深入探讨`document`对象的一些关键方法和属性，以及如何使用它们来实现特定的网页功能。 `getElementById()`方法是`document`对象中非常重要的一个方法，它通过指定的HTML元素ID来获取页面上的唯一元素。例如，如果你有一个ID为`advLayer`的`<div>`元素，你可以使用`document.getElementById("advLayer")`来获取该元素的引用，从而可以对它进行样式修改或添加事件监听器等操作。另一个常用的方法是`getElementsByName()`，它返回一组具有相同`name`属性的元素。这对于处理如表单元素（如复选框或选项按钮）非常有用，特别是当你需要一次性操作所有具有特定`name`的元素时，例如实现全选或全不选功能。在网页坐标系统中，有几个关键的属性用于定位元素的位置。`top`属性表示元素上边缘距离其包含块上边缘的距离，而`pixelTop`属性则是设置或返回元素的上边界像素值。类似地，`left`属性定义了元素左边缘距离其包含块左边缘的距离。`scrollTop`属性则表示页面的垂直滚动位置，这在创建动态效果，比如固定广告图片时非常有用。下面的例子展示了如何使用`getElementById()`和`scrollTop`属性来创建一个浮动的广告图片。通过获取广告图片层的初始顶部位置并结合页面的滚动高度，可以保持图片始终在屏幕的某一位置显示。 ```html <SCRIPT> var advInitTop = 0; function init() { advInitTop = document.getElementById("advLayer").style.pixelTop; } function move() { document.getElementById("advLayer").style.pixelTop = advInitTop + document.body.scrollTop; } window.onscroll = move; </SCRIPT> <BODY onload="init()"> ... <DIV id="advLayer" style="position:absolute; left:16px; top:129px; width:144px; height:95px; z-index:1;"> <A href="http://www.taobao.com"> <IMG src="images/advpic.gif" width="180" height="230" border="0"> </A> </DIV> </BODY> ``` 在实现全选或全不选功能时，`document.getElementsByName()`方法用于获取所有具有指定`name`的元素。例如，如果你有一组同名的复选框，你可以通过此方法获取它们的数组，并通过循环遍历来改变每个复选框的`checked`属性。 ```javascript function checkAll(boolValue) { var allCheckBoxs = document.getElementsByName("isBuy"); for (var i = 0; i < allCheckBoxs.length; i++) { if (allCheckBoxs[i].type == "checkbox") { allCheckBoxs[i].checked = boolValue; } } } ``` 这个`checkAll()`函数接受一个布尔值作为参数，然后遍历所有名为"isBuy"的复选框，将其`checked`属性设置为该布尔值，从而实现全选或全不选的效果。 `document`对象是JavaScript在网页交互中的核心，通过其提供的属性和方法，我们可以方便地查找、操作和控制HTML元素，实现丰富的交互和动态效果。理解和熟练运用这些方法是成为优秀前端开发者的关键技能之一。