JavaScript 第三章 DOM编程基础 运用document对象

JavaScript 第三章 DOM编程基础 使用document对象

JavaScript 第二章 使用window对象
JavaScript 第四章 DOM编程提升

JavaScript 第三章 DOM编程基础 使用document对象

注意：各案例素材已提供下载

1、技术目标

使用getElementById()方法访问DOM元素使用getElementsByName()方法访问DOM元素使用getElementsByTagName()方法访问DOM元素使用display样式属性控制元素的隐藏和显示

2、document对象

document对象是window对象的一部分，代表了整个HTML文档，可
用于访问页面中的所有元素，在使用时要注意浏览器差异以及符合
W3C的标准

3、document对象的常用属性

属性：
referrer??? ??? 返回链接到当前文档的前一个页面的URL
URL??? ????????? 返回当前文档的URL

document.referrer属性可以判断当前页面是不是通过超链接访问的，
，如果不是则返回null，如果是则返回包含这个超链接的上一个页面
的URL，该属性可以限制进入页面的链接，如果不是由指定页面进入
的可以提醒或者跳转到其他页面

注意：使用document.referrer的时候，必须将页面发布到Web服务器
上运行才有效果

pageA.html通过超链接可打开pageB.html，示例代码：

?
pageB.html显示document.referrer属性值，示例代码：

?

4、document对象访问页面元素的三种方法
getElementById()按元素的ID名称来访问，返回对拥有指定id的第一个对象getElementsByName()按元素的name名称来访问，返回带有指定名称的对象的集合getElementsByTagName() 按标签来访问，返回带有指定标签名的对象的集合

5、访问页面元素

案例功能描述：
动态改变层、标签中的内容访问相同name的元素访问相同标签的元素

实现代码(试着运行以下代码，体会3种访问元素方法的使用)：

?

6、元素的显示和隐藏

实现元素的隐藏、显示可使用visibility属性与display属性，

使用visibility的语法如下：
??? 元素对象.style.visibility="值";
??? 值有两种：
??? ??? visible??? 表示元素是可见的
??? ??? hidden??? 表示元素是不可见的

使用display的语法如下：
??? 元素对象.style.display="值";
??? 值有两种：
??? ??? none??? 表示此元素不会被显示
??? ??? block??? 表示此元素将显示为块级元素，
??? ??? ??? 此元素前后会带有换行符

7、元素的隐藏于显示案例

请运行如下案例，体会visibility与display的区别

案例代码：

?
8、使用元素的隐藏、显示制作简单的树形菜单

案例代码：

?

9、实现复选框的全选效果

效果描述：
当你点击全选时，所有复选框被选中，再次点击全选，
所有复选框取消选中

效果分析：
通过对复选框的checked属性值进行设置，其值如下：
??? 选中：true??? 未选中：false

效果图：



示例代码：

?

JavaScript 第二章 使用window对象
JavaScript 第四章 DOM编程提升
?
?
?
 

 

查看更多 下一篇