目录
a、代表整个 html 文档,动态的操作页面元素,必须使用它
-----前言
上两篇文章对 JavaScript 常用内置对象、数组等知识点和案例做了一些介绍演示,详细可参考博文:
web快速入门之基础篇-js:2_1、JavaScript常用内置对象、数组
web快速入门之基础篇-js:2_2、JavaScript 常用内置对象、数组(案例效果演示)
这篇文章我们讲介绍:DHTML对象_window_document
-----知识点简介
四:DHTML 应用
分析:html, 触发事件, 脚本
1、DHTML 对象
window***
location:URL地址栏**
screen:屏幕*
history:历史访问记录*
navigator:浏览器*
event:事件***
document:文档***
2、window:表示整个窗口,窗口间的操作
对话框:
window.alert();
window.confirm();//确认
弹出窗口:
window.open(url,"name","width=200,heigh=300");
周期性定时器:周期性的执行某段代码
window.setInterval()
window.clearInterval()
一次性定时器
window.setTimeout(f,10)
window.clearTimeout
3、document对象
a、代表整个 html 文档,动态的操作页面元素,必须使用它
DOM 操作:节点树
b、找到元素节点
方式一:document.getElementById(id)---精确的查询单个元素对象,适用于元素已知
方式二:根据元素的层次位置查找
obj.parentNode---父节点
obj.childNodes---所有的子节点,包括标签,还包括空白
obj.lastChild/firstChild—
方式三:document.getElementsByTagName("input")---元素节点的数组,用于查询某种标签
obj.getElementsByTagName("input")---在obj的范围里进行查找
c、读取或者修改
规则一:将 HTML 标签对象化,html标记中的属性
<img src="a.jpg"/>---obj.src
<a href="a.html">click me</a>----obj.href
规则二:如果操作的是标记中间的文本
----obj.innerHTML
<p>aaa</p>
规则三:修改简单样式
obj.style.color
obj.style.backgroundColor
规则四:修改复杂样式
第一步:可以在 <style> 或者 CSS 文件中,定义样式类
第二步: js 代码中,
obj.className = "";
---------依然适用于节点类型已知
规则五:节点类型未知
obj.nodeName----得到节点的名称,全大写的形式
d、增加新元素节点
第一步:创建
var obj = document.createElement("a");---<a></a>
第二步:设置信息
obj.href = "";
obj.innerHTML = "";
第三步:加入某个位置
XXX.appendChild(obj);---追加子节点,最后一个
XXX.insertBefore(obj,XXX.firstChild);
XXX.insertBefore(obj,XXX.childNodes[2]);
e、删除节点
XXX.removeChild(obj);---obj必须是XXX的子节点