JavaScript之DOM初識
阿新 • • 發佈：2019-01-23
顯示 javascrip block lac gre btn inner XML val
JavaScript分三個部分:
ECMAScript標準:JS的基本的語法
DOM:Document Object Model --->文檔對象模型----操作頁面的元素
BOM:Browser Object Model----->瀏覽器對象模型---操作的是瀏覽器DOM: 文檔對象模型
文檔:把一個html文件看成是一個文檔,由於萬物皆對象,所以把這個文檔看成是一個對象 XML文件也可以看成是一個文檔 HTML:展示信息,展示數據的 XML:側重於存儲數據 html文件看成是一個文檔,那麽這個文檔看成是一個對象,文檔中的所有的標簽都可以看成是一個對象 頁面中的每個標簽,都是一個元素(element),每個元素都可以看成是一個對象 標簽可以嵌套,標簽中有標簽,元素中有元素 html頁面中都有一個根標簽--html--也叫根元素 頁面中的有一個根元素(標簽--html),裏面有很多的元素(有很多的標簽,有很多的對象) 文檔:一個頁面就是一個文檔 元素(element):頁面中的所有的標簽都是元素,元素可以看成是對象 節點(node):頁面中所有的內容都是節點:標簽,屬性,文本 root:根 頁面就是文檔--document,文檔中有根元素:html 由文檔及文檔中的所有的元素(標簽)組成的一個樹形結構圖,叫樹狀圖(DOM樹)
幾個案例：
點擊按鈕彈窗：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" id="btn" value="按鈕" /> <script> document.getElementById("btn").onclick=function () { alert("彈窗了！"); }; //點擊操作:------>事件:就是一件事,有觸發和響應,事件源 //按鈕被點擊,彈出對話框 //按鈕---->事件源 //點擊---->事件名字 //被點了--->觸發了 //彈框了--->響應 </script> </body> </html>
先寫函數再調用也可以:
<script>
function f1() {
alert("Hello");
}
var btnObj=document.getElementById("btn").onclick=f1;//不加括號
</script>註意：先有按鈕,才能獲取,獲取之後才能註冊事件
點擊按鈕顯示圖片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" id="btn" value="按鈕" /> <img src="" id="image" /> <script> var btn1=document.getElementById("btn"); btn1.onclick=function () { var img1=document.getElementById("image"); img1.src="images/xxx.jpg";//這是圖片的路徑 img1.width="300"; img1.height="400";//不用加px };//記得加分號 </script> </body> </html>
點擊按鈕修改內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" id="btn" value="點擊修改內容" />
<p id="p1">
還沒修改的文本
</p>
<script>
//凡是成對的標簽,中間的文本內容,設置的時候,都使用innerText這個屬性的方式
document.getElementById("btn").onclick = function () {
document.getElementById("p1").innerText = "點擊按鈕後就修改了內容了";
};
</script>
</body>
</html>點擊按鈕修改多個p標簽的內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" id="btn" value="點擊修改內容"/>
<div id="div1">
<p>還沒修改的文本</p>
<p>還沒修改的文本</p>
<p>還沒修改的文本</p>
<p>還沒修改的文本</p>
<p>還沒修改的文本</p>
</div>
<div id="div2">
<p>還沒修改的文本2</p>
<p>還沒修改的文本2</p>
<p>還沒修改的文本2</p>
<p>還沒修改的文本2</p>
<p>還沒修改的文本2</p>
</div>
<script>
//只修改div1的內容
// document.getElementById("btn").onclick = function () {
// var pObjs = document.getElementById("div1").getElementsByTagName("p");
// for (var i = 0; i < pObjs.length; i++) {
// pObjs[i].innerText = "修改了";
// }
// };
//修改全部p標簽的內容
document.getElementById("btn").onclick = function () {
var pArr = document.getElementsByTagName("p");
for (var i = 0; i < pArr.length; i++) {
pArr[i].innerText = "全部修改了";
}
};
</script>
</body>
</html>點擊按鈕修改文本框的內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="修改內容" id="btn"/></br>
<input type="text" value=""></br>
<input type="text" value=""></br>
<input type="text" value=""></br>
<input type="text" value=""></br>
<input type="text" value=""></br>
<script>
document.getElementById("btn").onclick = function () {
var inputS = document.getElementsByTagName("input");
for (var i = 0; i < inputS.length; i++) {
if (inputS[i].type != "button") {
inputS[i].value = "哈哈，修改了";
}//end if
}//end for
};
</script>
</body>
</html>點擊按鈕變成文本框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="修改內容" id="btn"/></br>
<script>
//在某個元素的事件中,自己的事件中的this就是當前的這個元素對象
var btnObj=document.getElementById("btn");
btnObj.onclick=function () {
this.value="按鈕變成了文本框了";
this.type="text";
};
</script>
</body>
</html>點擊圖片，修改自身的寬和高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<img src="images/xxx.jpg" id="im"/>
<script>
//點擊圖片,修改自身的寬和高
var imgObj = document.getElementById("im");
imgObj.onclick = function () {
this.width = "200";
this.height = "300";
};
</script>
</body>
</html>排他功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="沒變化"/></br>
<input type="button" value="沒變化"/></br>
<input type="button" value="沒變化"/></br>
<input type="button" value="沒變化"/></br>
<input type="button" value="沒變化"/></br>
<script>
//獲取所有的按鈕,分別註冊點擊事件
var btnObjs = document.getElementsByTagName("input");
for (var i = 0; i < btnObjs.length; i++) {
btnObjs[i].onclick = function () {
for (var j = 0; j < btnObjs.length; j++) {
btnObjs[j].value = "沒變化";
}
this.value = "變化了";
};
}
</script>
</body>
</html>點擊超鏈接切換大圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<a id="ak" href="images/1.jpg"><img src="images/1-small.jpg" id="im"></a>
<script>
//點擊圖片標簽,設置圖片標簽的src路徑為超鏈接中大圖的路徑
document.getElementById("im").onclick=function () {
this.src=document.getElementById("ak").href;
return false;
};
</script>
</body>
</html>點擊按鈕修改圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="顯示大圖" id="btn"/>
<img src="images/1-small.jpg" id="im">
<script>
function my$(id) {
return document.getElementById(id);
}
my$("btn").onclick=function () {
my$("im").src="images/1.jpg";
};
</script>
</body>
</html>點擊按鈕改變div的背景顏色、寬和高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="修改div" id="btn" />
<div id="dv"></div>
<script>
document.getElementById("btn").onclick=function () {
var dvobj=document.getElementById("dv");
dvobj.style.height="300px";
dvobj.style.width="200px";
dvobj.style.backgroundColor="yellowgreen";
};
</script>
</body>
</html>點擊按鈕設置div隱藏和顯示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#dv{
width: 300px;
height: 200px;
background-color: #cccccc;
}
</style>
</head>
<body>
<input type="button" value="隱藏" id="btn" />
<input type="button" value="顯示" id="btn2" />
<div id="dv"></div>
<script>
document.getElementById("btn").onclick=function () {
document.getElementById("dv").style.display="none";
};
document.getElementById("btn2").onclick=function () {
document.getElementById("dv").style.display="block";
};
</script>
</body>
</html>一個按鈕實現上面的需求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#dv {
width: 300px;
height: 200px;
background-color: #cccccc;
}
</style>
</head>
<body>
<input type="button" value="隱藏" id="btn"/>
<div id="dv"></div>
<script>
document.getElementById("btn").onclick = function () {
//判斷當前點擊的按鈕的value屬性值
if (this.value == "隱藏") {
document.getElementById("dv").style.display = "none";
this.value = "顯示";
} else if (this.value == "顯示") {
document.getElementById("dv").style.display = "block";
this.value = "隱藏";
}
};
</script>
</body>
</html>點擊按鈕,通過類樣式的方式設置div的顯示和隱藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#dv {
width: 300px;
height: 200px;
background-color: #cccccc;
}
.none {
display: none;
}
</style>
</head>
<body>
<input type="button" value="隱藏" id="btn"/>
<div id="dv"></div>
<script>
document.getElementById("btn").onclick = function () {
var dvobj = document.getElementById("dv");
//判斷的是div是否應用了類樣式
if (dvobj.className != "none") {
dvobj.className = "none";
this.value = "顯示";
} else {
dvobj.className = "";
this.value = "隱藏";
}
};
</script>
</body>
</html>網頁開關燈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.black {
background-color: black;
}
</style>
</head>
<body>
<input type="button" value="開/關燈" id="btn"/>
<script>
document.getElementById("btn").onclick=function () {
document.body.className = document.body.className != "black" ? "black" : "";
}
</script>
</body>
</html>JavaScript之DOM初識