DHTML
DHTML:Dynamtic HTML 動(dòng)態(tài)的html (這個(gè)動(dòng)態(tài)指的是動(dòng)態(tài)變化)
DHTML不是一門(mén)新的技術(shù)盈蛮，而是將已有的HTML,CSS,JS整合在一起云稚，實(shí)現(xiàn)了通過(guò)JS訪問(wèn)元素和css屬性嘉竟。
在DHTML中腌乡，是通過(guò)JS訪問(wèn)html元素或者css屬性挺智，使得頁(yè)面具有動(dòng)態(tài)的變化扎筒，從而和用戶具有了交互的行為综慎。
function changeDiv()
{
/*獲取div元素*/
var div=document.getElementById("div1");//div對(duì)象表示這個(gè)元素
/*改變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元素都使用一個(gè)一個(gè)的js對(duì)象表示
通過(guò)對(duì)象來(lái)表示html元素示惊，通過(guò)對(duì)象之間的包含關(guān)系好港，來(lái)表示元素之間的層級(jí)關(guān)系、
通過(guò)調(diào)用對(duì)象的屬性和方法米罚，來(lái)間接改變?cè)氐膶傩院托袨椤?br>
通過(guò)這種方式使得JS可以訪問(wèn)html元素和css屬性钧汹，讓頁(yè)面具有動(dòng)態(tài)的變化和用戶具有了交互行為。
可以將DHTML分為兩部分內(nèi)容:
1BOM瀏覽器對(duì)象模型:和window瀏覽器窗口相關(guān)對(duì)象
2DOM文檔對(duì)象模型:和html文檔相關(guān)的對(duì)象
藍(lán)色為文檔樹(shù)录择，用樹(shù)表示文檔拔莱，文檔樹(shù)里全是對(duì)象碗降，用對(duì)象表示元素，用對(duì)象之間的關(guān)系表示元素的上下級(jí)關(guān)系或者層級(jí)關(guān)系辨宠。
紅色為BOM對(duì)象
BOM
browser object model 瀏覽器對(duì)象模型
提供了一套操作瀏覽器的api
window
代表瀏覽器中一個(gè)打開(kāi)的窗口
1window對(duì)象的常用方法
(1)alert();--定義一個(gè)消息對(duì)話框
/*window對(duì)象*/
window.alert("alert");
(2)confirm();--定義一個(gè)確認(rèn)對(duì)話框
/*window對(duì)象*/
var res=window.confirm("Confirm please!");
if(res)
{
alert("confirm success!");
}
else{
alert("be canceled!");
}
(3)setInterval();--定義一個(gè)循環(huán)定時(shí)器遗锣，清除定時(shí)器clearInterval()
/*循環(huán)定時(shí)器*/
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();--定義一個(gè)一次性定時(shí)器,清除定時(shí)器clearTimeout()
setTimeout(function(){
document.write("TimeOut"+"<br/>")
},1000);
2window對(duì)象的常用事件
winow.onload()
在js獲取元素時(shí)，如果獲取元素的代碼比元素被瀏覽器加載的時(shí)機(jī)還要早嗤形，此時(shí)是獲取不到元素的精偿。
這里我們可以等待整個(gè)html文檔加載之后再執(zhí)行獲取元素的代碼，就一定能夠獲取得到赋兵。
<script>
/*在瀏覽器加載完整個(gè)html文檔之后立即執(zhí)行*/
window.onload= function () {
//1.獲取div元素
var div=document.getElementById("div1");
//2.通過(guò)div元素獲取div中的所有內(nèi)容
alert(div.innerHTML);
};
</script>
<body>
<div id="div1">獲取div中的所有內(nèi)容笔咽。。霹期。</div>
</body>
DOM
document object model 文檔對(duì)象模型
提供了一套操作html元素和css屬性的api
表單項(xiàng)元素才有value
獲取html元素
1.通過(guò)元素的id獲取元素
(1)document.getElementById(id值);-通過(guò)元素的id值獲取指定的id元素
(2)元素.value:獲取或設(shè)置元素的value值
function demo1(){
//1.獲取用戶名輸入框元素(input元素)
/*
* input value值就是輸入框中的內(nèi)容
* select value值就是選中的option的value值或option的值
* textarea value值就是輸入框中的內(nèi)容
*/
var inp=document.getElementById("username");
//2.獲取用戶名輸入框的value值
alert(inp.value);
inp.value="李四";
}
2.通過(guò)元素的name獲取元素
(1)document.getElementsByName(name屬性值);-通過(guò)元素的name屬性值獲取指定name的所有元素,返回的是一個(gè)集合數(shù)組(可以按照數(shù)組的方式來(lái)訪問(wèn))
/* --通過(guò)name屬性獲取并彈出密碼輸入框的值-- */
function demo2(){
//1.獲取密碼輸入框元素
var arrInps=document.getElementsByName("password");
var inp=arrInps[0];
//2.通過(guò)密碼輸入框獲取其中的值
alert(inp.value);
}
3.通過(guò)標(biāo)簽名稱或元素名稱獲取元素
(1)document.getElementsByTagName(tagName);通過(guò)元素名稱獲取指定名稱的集合數(shù)組
function demo3(){
//1.獲取所有input元素組成的集合數(shù)組
var arrInps=document.getElementsByTagName("input");
//2.遍歷所有的input元素叶组，并獲取其value值
for(var i=0;i<arrInps.length;i++){
alert(arrInps[i].value);
}
}
4.獲取元素或設(shè)置元素
innerHTML：獲取或設(shè)置元素的所有內(nèi)容（既包含html元素也包含文本內(nèi)容）
innerText:獲取或設(shè)置元素的文本內(nèi)容（僅僅是文本）
function demo4(){
/*表單元素的value 元素的內(nèi)容*/
//1.先獲取p元素
var p=document.getElementById("pid");
//2.通過(guò)p元素獲取p元素中的所有內(nèi)容 innerHTML(所有內(nèi)容) innerText(所有文本內(nèi)容)
alert(p.innerHTML);
alert(p.innerText);
p.innerHTML="<a href='#'>替換內(nèi)容</a>";
p.innerText="<a href='#'>替換內(nèi)容</a>";
}
增刪改html元素
1創(chuàng)建元素
創(chuàng)建一個(gè)指定名稱的元素
document.createElement(tagName)
2添加元素
通過(guò)父元素調(diào)用方法添加子元素
父元素.appendChild()
3刪除元素
通過(guò)父元素添加方法刪除已有的子元素
父元素.removeChild(子元素)
4替換元素
通過(guò)父元素調(diào)用方法使用新元素替換已有的子元素
父元素.replaceChild(新元素,舊子元素)
5克隆或復(fù)制元素
obj.cloneNode();
6插入元素
父元素.insertBefore()
js動(dòng)態(tài)綁定事件
document.getElementById("b1").onclick=function(){};
