Demo总结(1)
DOM
1.定义:DOM = document object model
2.作用:用来动态的改变网页中的元素的状态。
3.元素和对象:
1)元素和对象之间的关系:元素和对象之间是一一对应的关系。元素和对象是同一事物的不同表现形式,元素和对象之间可以相互转换。
2)document对象:是一个文档对象,代表了整个文档,通过这个对象的某些方法可以使得网页中的元素和对象进行相互转换,从而得到对象就是元素的对象,通过操作这个对象来实现动态改变元素。
常用方法:
object = document.getElementById(string id)
把对应id的元素转换为对象。
object = docuemnt.createElement(string element);
根据标签来创建对象。
通过容器对象的appendChild方法来追加元素。
容器对象:只要有开始和结束标签的元素都是容器对象。
collObjects = document.getElementsByName(string name);
获得name值相同的元素集合,集合中是dom对象。每个对象对应着不同的元素。
3)div对象
常用的属性:
innerHTML:获取或设置标签中的内容
style:来操作div的样式
className:来设置或获取css类
常用的方法:
appendChild:追加元素
appendChild(object tag);
4)其他对象:a,select
4.事件:当什么时候发生什么事从而发生什么动作触发什么函数。
1)鼠标事件:
onmouseover:当鼠标滑过的时候
onmouseout:当鼠标滑出的时候
onmousemove:当鼠标移动的时候
2)行为事件:某个元素的事件
onclick:当点击的时候
onchange:当发生改变的时候
onfocus:当获得焦点的时候
onblur:当失去焦点的时候
3)键盘事件
5.window对象:代表的是一个打开的窗口。可以直接使用window的属性方法和事件。
1)常用方法:
alert(string):提示框
confirm(string):确认框,返回一个bool类型的变量,如果为true则点击的确定按钮。
prompt(string title,string msg):输入框
open(url,name,features):打开一个子窗口
2)window对象的特殊用法
window对象可以直接调用窗口内的所有javascript函数。
认为在本窗口中的所有的全局变量和函数都是window对象的属性和方法。
3)window对象中的子对象
location:指的就是地址栏,常用于页面跳转。
history:用来调用固定窗口为历史记录。