JavaScript学习笔记之DOM编程（2）

摘自李刚《疯狂HTML 5/CSS 3/Javascript讲义》

1、访问HTML元素以动态地修改HTML元素

• 根据ID访问HTML元素&＃xff1a;利用document.getElementById(idVal)方法

HTML元素与表单控件在获取“内容”时的区别&＃xff1a;

DOM模型扩展了HTML元素&＃xff0c;为几乎所有的HTML元素都新增了innerHTML属性&＃xff0c;该属性代表该元素的“内容”——当某个元素的开始标签、结束标签之间都是字符串内容&＃xff0c;即不含其他子元素&＃xff0c;Javascript子元素可通过它的innerHTML属性返回这些字符串内容&＃xff1b;

若表单控件的开始标签和结束标签之间的内容是它的值&＃xff0c;需通过value属性获得其可视化文本&＃xff0c;如&＃xff0c;元素所生成的表单控件&＃xff0c;包括单行文本框、各种按钮等。除此之外其他HTML属性&＃xff0c;包括列表框、下拉菜单的列表项、表单域、按钮&＃xff0c;都应通过innerHTML来获取他们的内容。

• 利用节点关系访问HTML元素&＃xff1a;利用树节点之间的父子、兄弟关系

需要注意的是&＃xff0c;对于HTML页面而言&＃xff0c;浏览器会将页面中的“空白”也当成文本节点&＃xff0c;比如&＃xff1a;一个具有6个列表项的列表一共包含13个子节点&＃xff08;6个列表项&＃43;5个每两个列表项之间 的换行或空格&＃xff09;&＃xff0c;故如要访问当前列表项的上一条列表项&＃xff0c;需要两次调用previousSibling属性&＃xff0c;即 curTarget.previousSibling.previousSibling&＃xff1b;

2、使用window对象

window对象是整个Javascript脚本运行的顶层对象。定义一个全局变量a和window.a是完全相等的。

但是&＃xff01;在定义一个全局变量后&＃xff0c;它仅仅在当前的window对象中具有全局性。如果同一个页面里有多个Frame&＃xff0c;则意味着多个window对象&＃xff0c;且每个window中的全局对象不会互相影响。

附&＃xff1a;window提供的可以直接在JS脚本中使用的方法&＃xff1a;

window提供的可以访问window对象包含的一系列对象的属性&＃xff1a;

3、使用定时器

如下两段代码利用定时器实现了同样的动态效果——在页面上动态显示当前时间&＃xff08;持续1min&＃xff0c;每隔1s刷新一次&＃xff09;









setTimeout()和setIntercal()定时器的区别&＃xff1a;