DHTML
DHTML:Dynamtic HTML 动态的html (这个动态指的是动态变化)
DHTML不是一门新的技术，而是将已有的HTML,CSS,JS整合在一起，实现了通过JS访问元素和css属性。
在DHTML中，是通过JS访问html元素或者css属性，使得页面具有动态的变化，从而和用户具有了交互的行为。
function changeDiv()
{
/*获取div元素*/
var div=document.getElementById("div1");//div对象表示这个元素
/*改变div的宽度,高度,边框,背景色 字体大小、颜色*/
div.style.width="100px";
div.style.height="100px";
div.style.border="5px solid red";
div.style.background="pink";
div.style.fontSize="2em";
div.style.color="white";
}
工作原理
在DHTML中，将所有html元素都使用一个一个的js对象表示
通过对象来表示html元素，通过对象之间的包含关系，来表示元素之间的层级关系、
通过调用对象的属性和方法，来间接改变元素的属性和行为。
通过这种方式使得JS可以访问html元素和css属性，让页面具有动态的变化和用户具有了交互行为。
可以将DHTML分为两部分内容:
1BOM浏览器对象模型:和window浏览器窗口相关对象
2DOM文档对象模型:和html文档相关的对象
蓝色为文档树，用树表示文档，文档树里全是对象，用对象表示元素，用对象之间的关系表示元素的上下级关系或者层级关系。
红色为BOM对象
BOM
browser object model 浏览器对象模型
提供了一套操作浏览器的api
window
代表浏览器中一个打开的窗口
1window对象的常用方法
(1)alert();--定义一个消息对话框
/*window对象*/
window.alert("alert");
(2)confirm();--定义一个确认对话框
/*window对象*/
var res=window.confirm("Confirm please!");
if(res)
{
alert("confirm success!");
}
else{
alert("be canceled!");
}
(3)setInterval();--定义一个循环定时器，清除定时器clearInterval()
/*循环定时器*/
setInterval(function(){
document.write(new Date().getTime()+"<br/>");
},1000);
var i=0;
var timer=setInterval(function(){
document.write(new Date().getTime()+"<br/>");
i++;
if(i==3)clearInterval(timer);
},1000);
(4)setTimeout();--定义一个一次性定时器,清除定时器clearTimeout()
setTimeout(function(){
document.write("TimeOut"+"<br/>")
},1000);
2window对象的常用事件
winow.onload()
在js获取元素时，如果获取元素的代码比元素被浏览器加载的时机还要早，此时是获取不到元素的。
这里我们可以等待整个html文档加载之后再执行获取元素的代码，就一定能够获取得到。
<script>
/*在浏览器加载完整个html文档之后立即执行*/
window.onload= function () {
//1.获取div元素
var div=document.getElementById("div1");
//2.通过div元素获取div中的所有内容
alert(div.innerHTML);
};
</script>
<body>
<div id="div1">获取div中的所有内容。。。</div>
</body>
DOM
document object model 文档对象模型
提供了一套操作html元素和css属性的api
表单项元素才有value
获取html元素
1.通过元素的id获取元素
(1)document.getElementById(id值);-通过元素的id值获取指定的id元素
(2)元素.value:获取或设置元素的value值
function demo1(){
//1.获取用户名输入框元素(input元素)
/*
* input value值就是输入框中的内容
* select value值就是选中的option的value值或option的值
* textarea value值就是输入框中的内容
*/
var inp=document.getElementById("username");
//2.获取用户名输入框的value值
alert(inp.value);
inp.value="李四";
}
2.通过元素的name获取元素
(1)document.getElementsByName(name属性值);-通过元素的name属性值获取指定name的所有元素,返回的是一个集合数组(可以按照数组的方式来访问)
/* --通过name属性获取并弹出密码输入框的值-- */
function demo2(){
//1.获取密码输入框元素
var arrInps=document.getElementsByName("password");
var inp=arrInps[0];
//2.通过密码输入框获取其中的值
alert(inp.value);
}
3.通过标签名称或元素名称获取元素
(1)document.getElementsByTagName(tagName);通过元素名称获取指定名称的集合数组
function demo3(){
//1.获取所有input元素组成的集合数组
var arrInps=document.getElementsByTagName("input");
//2.遍历所有的input元素，并获取其value值
for(var i=0;i<arrInps.length;i++){
alert(arrInps[i].value);
}
}
4.获取元素或设置元素
innerHTML：获取或设置元素的所有内容（既包含html元素也包含文本内容）
innerText:获取或设置元素的文本内容（仅仅是文本）
function demo4(){
/*表单元素的value 元素的内容*/
//1.先获取p元素
var p=document.getElementById("pid");
//2.通过p元素获取p元素中的所有内容 innerHTML(所有内容) innerText(所有文本内容)
alert(p.innerHTML);
alert(p.innerText);
p.innerHTML="<a href='#'>替换内容</a>";
p.innerText="<a href='#'>替换内容</a>";
}
增删改html元素
1创建元素
创建一个指定名称的元素
document.createElement(tagName)
2添加元素
通过父元素调用方法添加子元素
父元素.appendChild()
3删除元素
通过父元素添加方法删除已有的子元素
父元素.removeChild(子元素)
4替换元素
通过父元素调用方法使用新元素替换已有的子元素
父元素.replaceChild(新元素,旧子元素)
5克隆或复制元素
obj.cloneNode();
6插入元素
父元素.insertBefore()
js动态绑定事件
document.getElementById("b1").onclick=function(){};
