DHTML概述
什么是DHTML
- DHTMK:Dynamic HTML 动态的 html
- DHTML不是一门新的技术,而是将已有的HTML、css、JS整合在了一起,实现了通过JS访问元素和css属性
- 在DHTML中,是通过JS访问html元素或者css属性,使得页面具有动态的变化,从而和用户具有了交互的行为
- 实例:通过点击按钮改变属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function changeDiv(){ // 1.获取div元素 var div = document.getElementById("div1") // 2.改变div的宽、高、边框 div.style.width="100px"; div.style.height="100px"; div.style.border="5px solid red"; div.style.fontSize="26px"; } </script> </head> <body> <input type="button" value="别点我" onclick="changeDiv()"> <hr/> <div id="div1" style="width:50px;height:50px;background-color:blue">123</div> </body> </html>
DHTML工作原理
- 在DHTML中,将所有的html元素都是用一个一个的JS对象来表示
- 通过对象来表示html元素,通过对象之间的包含关系,来表示元素之间的层级关系
- 可以通过调用对象的属性或方法,来间接改变元素的属性和行为
- 通过这种方式使得JS可以访问html元素和css属性,让页面具有动态的变化,和用户具有了交互的行为
可以将DHTML分为两部分内容- BOM:Browser Object Model 浏览器对象模型 提供了一套操作浏览器的API。
- DOM:Document Object Model 文档对象模型 提供了一套操作html元素和css属性的API。
BOM
window对象
代表浏览器中一个打开的窗口
-
window对象的常用方法
- alert(string); - - 定义一个消息对话框
- confirm(string); - - 定义一个确认对话框
- setInterval(object,间隔的毫秒值); - - 定义一个循环定时器
清除该定时器:clearInterval(清除对象);需要放在object对象的方法体中执行 - setTimeout(object,毫秒值); - - 定义一个一次性定时器
清除该定时器:clearTimeout(清除对象);
-
window对象的常用事件
- onload:浏览器完成对象的加载后触发
在JS中获取元素时,如果获取元素的代码比元素被浏览器加载的时机还要早,此时是获取不到元素的
这里我们可以等浏览器加载完整个 html 文档之后,再执行元素的代码,就一定能获取到window.onload = function(){ var div=document.getElementById("div1") console.log(div.innerHTML); }
- onmove:当对象移动时触发
- onmoveend:当对象停止移动时触发
- onmovestart:当对象开始移动时触发
- onresize:当对象的大小将要改变时触发
- onresizeend:当用户更改完控件选中区中对象的大小时触发
- onresizestart:当用户开始更改控件选中区中对象大小时触发
- onscroll:当用户滚动对象的滚条时触发
- onunload:当对象卸载前立即触发
- onhelp:当用户在浏览器为当前窗口时按F1键时触发
- onfocus:当对象获得焦点时触发
- onerror:当对象加载过程中发生错误时触发
- onload:浏览器完成对象的加载后触发
DOM
获取html元素
document对象:
- 通过ID属性获取元素对象:getElementById(id)
var x = document.getElementById("id值");
- 通过 name 属性获取元素对象数组:getElementsByName(name)
var x = document.getElementsByName("name值"); var x0 = x[0];
- 通过标签名获取元素对象数组:getElementsByTagName(tagname)
var arrInps = document.getElementsByTagName("标签名"); for(var i=0;i<arrInps.length;i++){ console.log(arrInps[i]); }
- 通过 class 属性:getElementsByClassName(class)
- 获取元素内容
innerHTML:获取元素所有内容
innerText:获取元素文本内容
可以设置元素的内容(会替换原本的内容)var x = document.getElementById("id"); alert(x.innerHTML); alert(x.innerText);
x.innerHTML="<a>可替换标签和文本</a>"; x.innerText="只替换文本";
- 当前元素的父元素:parentNode
thisobj.parentNode;
- 当前元素的子元素
thisobj.getElementByTagName(tagname); //还有id,name.class等
增删改html元素
-
创建元素
document.createElement(tagname):创建指定名称标签元素var child = document.createElement("div"); child.innerHTML = "我是新来的...";
-
添加元素
parent.appendChild(child):通过父元素调用方法添加子元素var child = document.createElement("div"); chil.innerHTML = "我是新来的..."; var parent = document.getElementsByTagName("body")[0]; parent.appendChild(child);
-
删除元素
parent.removeChild(child):通过父元素调用方法删除已有的子元素var child = document.getElementById("div3"); var parent = document.getElementsByTagName("body")[0]; parent.removeChild(child);
-
替换元素
parent.replaceChild(new, child):通过父元素调用方法使用新元素替换已有的子元素var parent = document.body; var news = document.createElement("div"); news.innerHTML = "替换的"; var child = document.getElementById("div2"); parent.replaceChild(news, child);
-
克隆元素
obj.cloneNode():克隆出来的元素只能使用一次var child = document.getElementById("div4"); var new = child.cloneNode();
-
插入元素
parent.insertBefore(new, child)