DHTML概述
1.DHTML:Dynamic HTML
DHTML不是一门新的技术,而是将已有的HTML、css、JS整合在了一起，实现了通过JS访问元素和css属性。通过JS访问html元素或css属性,使得页面具有动态的变化，从而和用户具有交互的行为。
2.工作原理
(1).在DHTML中,将所有的html元素都使用一个一个的JS对象来表示
(2).通过对象来表示html元素, 通过对象之间的包含关系, 来表示元素之间的层级关系
(3).可以通过调用对象的属性或方法, 来间接改变元素的属性和行为
1.BOM
-
Window对象
代表浏览器中一个打开的窗口
(1).window对象的常用方法
//(1) alert(); -- 定义一个消息对话框
window.alert("哈哈哈");
//(2) confirm(); -- 定义一个确定对话框
var res = window.confirm("您确定要删除该订单吗？");
if(res){
alert("订单删除成功!");
}else{
alert("操作已取消！");
}
//(3) setInterval(); -- 定义一个循环定时器,
//chearInter(); -- 清除定时器
var i = 0;
var timer = setInterval(function(){
console.log(new Date().getTime());
i++;
if(){
clearInterval(timer);
}
},3000);
//setTimeout(); -- 定义一个一次性定时器
setTimeout(function(){
console.log("Hello...");
},2000);
(2).window对象的常用事件
在JS中获取元素时, 如果获取元素的代码比元素被浏览器加载的时机还要早, 此时是获取不到元素的.
这里我们可以等浏览器加载完整个html文档之后, 再执行获取元素的代码, 就一定能够获取到.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
/* 在浏览器加载完整个html文档后执行*/
window.onload = function(){
//1.获取div元素
var div = document.getElementById("div1");
//2.通过div元素获取div中所有内容
console.log(div.innerHTML);
}
</script>
</head>
<body>
<div id="div1">
获取div中的所有内容...
</div>
</body>
</html>
DOM
-
获取html元素
(1).通过元素的ID获取元素
- document.getElementById(id值) – 通过元素的ID值获取指定ID的元素 </br>
- value属性 – 获取或设置元素的value值
/* --通过ID获取并弹出用户名输入框的值
input value值就是输入框中的内容
select value值就是选中的option的value值option的内容
textarea value值输入框中的内容
-- */
function demo1(){
//1.获取用户名输入框元素(input元素)
var inp = document.getElementById("username");
//2.获取用户名输入框的value值.
alert( inp.value );
}
(2).通过元素的name属性获取元素
- document.getElementsByName(name属性值): 通过元素的name属性值获取指定name的所有元素组成的集合数组
/* --通过name属性获取并弹出密码输入框的值-- */
function demo2(){
//1.获取密码输入框元素
var arrInps = document.getElementsByName("password");//集合数组
var inp = arrInps[0];//密码输入框元素
//2.通过密码输入框获取其中的值
alert( inp.value );
}
(3).通过元素名称/标签名称获取元素
- document.getElementsByTagName(tagName): 通过元素的名称获取指定名称的元素组成的集合数组
/* --通过标签名获取并返回所有input元素的value值-- */
function demo3(){
//1.获取所有的input元素组成的集合数组
var arrInps = document.getElementsByTagName("input");
//2.遍历所有的input元素,并获取其value值
for(var i=0;i<arrInps.length;i++){
console.log( arrInps[i].value );
}
}
(4).innerHTML,innerText
- innerHTML:获取或设置元素的所有内容（既包含html元素也包含文本内容）
- innerText:获取或设置元素的文本内容(仅仅是文本)
function dom(){
//1.获取p元素
var p = documnet.getElementById("pid");
//2.通过p元素获取p元素中的所有内容
//alert( p.innerHTML );
//alert( p.innerText );
//p.innerHTML = "<a href='#'>我是来替换的..</a>";
p.innerText = "<a href='#'>我是来替换的..</a>";
}
-
增删改html元素
(1).创建元素、添加元素
- ==document.createElement(tagName)==:创建一个指定名称元素
- ==parent.appendChild(child)==:通过父元素调用方法添加子元素
function addNode(){
//1.创建一个div元素
var div = document.createElement("div");
var color = ["red","green","blue","cyan"];
var index = parseInt(Math.random()*4);
div.style.backgroundColor = color[index];
div.innerHTML = "我是新来的";
//2.获取父元素(body)
var body = document.body;
//3.通过父元素添加子元素
body.appendChild(div);
}
(2).删除元素
- ==parent.removeChild(child)==:通过父元素调用方法删除已有的子元素
/* --删除节点: 删除body中id值为 div_3 的div元素-- */
//parentNode
function deleteNode(){
//1.获取将要被删除的元素
var div_3 = document.getElementById("div_3");
//2.获取body元素
//var body = document.body;
var body = div_3.parentNode;
//3.通过父元素删除子元素
body.removeChild( div_3 );
}
(3).替换元素
- ==parent.replaceChild(new, child):== 通过父元素调用方法使用新元素替换已有的子元素
/* --更新节点: 用新节点替换id值为 div_2 的div元素 -- */
function updateNode(){
//1.创建一个新的div元素
var newDiv = document.createElement("div");
newDiv.innerHTML = "我是替换的div...";
//2.获取要被替换的元素
var div2 = document.getElementById("div_2");
//3.获取body元素
var body = document.body;
//4.通过父元素调用替换方法
body.replaceChild(newDiv, div2);
}
(4).克隆/复制元素，插入元素
- obj.cloneNode();
- parent.insertBefore(new,chlid);
/* --克隆节点、插入节点到指定元素的前面--*/
function copyNode(){
//1.获取div_4元素
var div = document.getElementById("div_4");
//2.克隆div_4
//true/1表示克隆元素全部内容，不写/0表示仅克隆元素
var div_copy = div.cloneNode(true);
//3.获取body元素
var body = document.body;
//4.获取div_2元素
var div_2 = document.getElementById("div_2");
//5.插入到div_2元素前面
body.insertBefore(div_copy,div_2);
}
