EasyDemo*JavaScript常用内置对象part3
part3:常用内置对象
- window对象
1.1DHTML概述
1.2DHTML简介
*操作HTML以创造各种动态视觉效果
-一种浏览器的动态网页技术
*DHTML的功能
-动态改变页面元素
-与用户进行交互等
-DHTML对象模型包括浏览器对象模型和DOM对象模型
*DHTML对象模型
1.3BOM与DOM
1.4window对象
*window表示浏览器窗口
-所有js全局对象、函数以及变量均自动成为window对象的成员
*常用属性
-document:窗口中显示的HTML文档对象
-history:浏览过窗口的历史记录对象
-location:窗口文件地址对象
-name:窗口名称
-opener:打开当前窗口的window对象
-…
*常用方法
-alert(),confirm,prompt():对话框
-close(),open():关闭、打开窗口
-focus(),blur():窗口获得焦点或失去焦点
-moveBy(),moveTo():移动窗口
-resizeBy(),resizeTo():调整窗口大小
-scrollBy(),scrollTo():滚动窗口中网页的内容
1.5窗口和对话框
1.1.1对话框
*alert(str)
-提示对话框，显示str字符串的内容
*confirm(str)
-确认对话框，显示str字符串的内容
-按”确定”按钮返回true,其他操作返回false
*prompt(str,value)
-输入对话框，采用文本框输入信息
-str为提示信息，value为初始值
-按”确定”按钮返回输入值，其他返回undefined
1.1.2窗口的打开和关闭
*window.open([url],[name],[config])
-url:打开的超链接
-name:窗口的名称
-config:窗口的配置参数
-返回新窗口对象
*window.close()
1.6定时器
1.1.1定时器
*多用于网页动态时钟、制作倒计时、跑马灯效果等
*周期性时钟
-以一定的间隔执行代码，循环往复
*一次性时钟
-在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行
1.1.2周期性定时器
*setInterval(exp,time):周期性触发代码exp
-exp:执行语句
-time:时间周期，单位为毫秒
-返回已经启动的定时器对象
*clearInterval(tID):停止启动的定时器
-tID:启动的定时器对象
1.1.3一次性定时器
*setTimeout(exp,time):一次性触发代码exp
-exp:执行语句
-time:间隔时间，单位为毫秒
*clearTimeout(tID):停止启动的定时器
-tID:启动的定时器对象
2.document对象
1.1document对象概述
1.2document对象概述
*每个载入浏览器的HTML文档都会成为document对象
*通过使用document对象，可从脚本中对HTML页面中的所有元素进行访问
-document对象是Window对象的一部分，可通过window.document属性对其进行访问
1.3DOM概述
1.4DOM概述
*DOM(Document Object Model):文档对象模型
-当网页被加载时，浏览器会创建页面的文档对象模型
*通过DOM，可访问所有的HTML元素，连同它们所包含的文本和属性
-可对其中的内容进行修改和删除，同时也可创建新的元素
*HTML文档中的所有节点组成了一个文档树(或节点树)
-document对象是一棵文档树的根
1.5DOM节点树
*HTML文档中的所有节点组成了一个文档树(或节点树)
*HTML文档中的每个元素、属性、文本等都代表着树中的一个节点
-整个文档是一个文档节点
-每个HTML标签是一个元素节点
-包含在HTML元素中的文本是文本节点
-每一个HTML属性是一个属性节点
-注释属于注释节点
-一切皆节点
*树根为document对象
*通过document对象，来操作整个节点树
*一棵节点树中的所有节点彼此都有关系
-父节点
-子节点
-后代
-…
*节点树
1.6DOM操作
*通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML
-查找节点
-读取节点信息
-修改节点信息
-创建新节点
-删除节点
1.7DOM操作-读取、修改
1.1.1节点信息
*nodeName:节点名称
-元素节点和属性节点：标签或属性名称
-文本节点：永远是#text
-文档节点:永远是#document
*nodeType:节点类型
-返回数值
-元素节点：返回1
-属性节点：返回2
-文本节点：返回3
-注释节点：返回8
-文档节点：返回9
1.1.2元素节点的内容
*innerText
-设置或获取位于对象起始和结束标签内的文本
*innerHTML
-设置或获取位于对象起始和结束标签内的HTML
1.1.3节点属性
*getAttribute()方法:根据属性名称获取属性的值
*setAttribute()、removeAttribute()
*将HTML标记、属性和CSS样式都对象化(不太懂)
1.1.4元素节点的样式
*style属性
-code.style.color
-node.style.fontSize
*className属性