javascript基礎DOM物件6.0
阿新 • • 發佈：2021-02-14
9、DOM物件
HTML程式碼：
<div id="dd">
演示
</div>
<ul>
<li>空調</li>
<li class = "sp">空空</li>
<li>冰鎮西瓜</li>
</ul>
<span class = "sp">
根據class來獲取物件
</span>
<p name="pp">name=dd</p>
<a name="pp">name</a>
<ol>
<li>吃飯</li>
<li>睡覺</li>
<li>打豆豆</li>
<ol>
javascript程式碼：
(1)、通過id來獲取元物件
//根據id值獲取 物件 var obj = document.getElementById("dd"); //為物件設定css樣式 屬性值要雙引號 obj.style.color = "red";
(2)、根據標籤名來獲取物件
//document.getElementsByTagName("標籤名");返回一個集合【陣列】
//這裡取到的是所有li 所以lis裡面元素有多個
var lis = document.getElementsByTagName("li");
//設定背景顏色為綠色
lis[2].style.backgroundColor = "green";
//設定字型顏色為紅色
lis[2].style.color = "red";
(3)、通過class屬性值來獲取物件
//根據class的屬性值 var temps = document.getElementsByClassName("sp"); //對獲取的很多個sp 進行遍歷 for (var i<0; i<temps.length; i++) { temps[i].style.color = "orange"; temps[i].style.backgroundColor = "grey"; temps[i].style.fontSize = "40px"; }
(4)、通過name屬性值來獲取物件
//返回一個集合
var pps = document.getElementsByName("pp");
for (var i=0; i<pps.length; i++) {
pps[i].style.color = "green";
pps[i].style.display = "block";
pps[i].style.border = "1px solid blue";
}
(5)、HTML5中新提供的方式
只返回匹配到的第一個元素，返回的是一個物件。
//document.querySelector("選擇器");
var fli = document.querySelector("ol>li");
//只為一個元素設定
fli.style.color = "blue";
返回所有匹配的元素，返回值都是集合【陣列】
//document.querySelectorAll("選擇器");
var olis = document.querySelectorAll("span");
for (var i=0; i<olis.length; i++) {
olis[i].style.color = "red";
olis[i].style.fontSize = "50px";
}
(6)、練習
HTML程式碼：
<ul>
<li>吃飯</li>
<li>睡覺</li>
<li>打豆豆</li>
</ul>
<ul id="u1">
<li class="orange">抽菸</li>
<li>喝酒</li>
<li>燙頭</li>
</ul>
練習6-1：點選變為字型變為紅色，再次點選變回顏色
javascript程式碼：
//通過js程式碼繫結事件
//當使用迴圈繫結事件時，this指代當前觸發事件的元素物件
var lis = document.getElementsByTagName("li");
for (var i=0; i<lis.length; i++) {
//為單個元素新增點選事件
lis[i].onclick = function() {
//這裡進行判斷 如果當前字型顏色為紅色 則更改字型顏色
if(this.style.color = "red") {
this.style.color = "black";
}
else {
this.style.color = "red";
}
};
}
練習6-2：滑鼠懸停事件，滑鼠移動導致顏色變化
javascript程式碼：
var lis = document.querySelectorAll("#ul>li");
for(var i=0; i<lis.length; i++) {
//:hover 也可以達到效果
//滑鼠懸停
lis[i].onmouseover = function() {
this.className = "orange";
};
//滑鼠移出
lis[i].onmouseout = function() {
this.className = "";
};
//另一種方式實現
/*lis[i].onmouseover = function() {
var temp = document.querySelector("#ul>.orange");
temp.className = "";
//滑鼠在上時 此時顏色為橙色
this.className = "orange";
}*/
練習6-3：點選塊更改背景顏色
HTML程式碼：
<div id="div1" class="redtooarange" index="jds">
又是美好的一天
</div>
<input type="button" id="btn1" value="移出div中的index屬性/>
CSS程式碼：
#div1 {
font-family: "微軟雅黑";
font-size: 40px;
width: 300px;
height: 100px;
text-align: center;
line-height: 100px;
}
.redtooarange{
color: red;
background-color: yellow;
}
.orange_red {
color: yellow;
background-color: red;
}
javascript程式碼：
方法a
var obj = document.getElementById("div1");
obj.onclick = function() {
//如果點選字型樣式為紅色 則改變字型為黃 背景為紅
if(this.style.color = "red") {
this.style.color = "yellow";
this.style.backgroundColor = "red";
}
else {
//反之 字型變為紅色 背景變為黃色
this.style.color = "red";
this.style.backgroundColor = "yellow";
}
}
方法b
var obj=document.getElementById("div1");
obj.onclick=function(){
if(this.className == "redtooarange") {
this.className = "orange_red";
}
else {
this.className = "redtooarange";
}
}
移除屬性
//獲取按鈕物件
var btn = document.getElementById("btn1");
//按鈕點選事件
btn.onclick = function() {
//獲取div塊元素
var dd = document.getElementById("div1");
//刪除div的屬性
dd.removeAttribute("index");
};
練習6-4：對網頁中的文字進行操作
HTML程式碼：
<div id="div1">
操作內容
</div>
<input type="button" id="btn1" value="修改內容" />
<ul>
<li>西瓜</li>
<li>葡萄</li>
</ul>
<input type="button" id="btn2" value="新增到 西瓜前" />
<input type="button" id="btn3" value="新增到 葡萄後" />
CSS程式碼：
#div1{
width: 400px;
height: 400px;
border: 1px solid black;
}
div塊中內容的修改：
var btn = document.getElementById("btn1");
btn.onclick = function() {
//獲取div塊的物件
var dd = document.getElementById("div1");
//標籤內部的內容
dd.innerHTML = "修改了內容";
//追加內容
dd.innerHTML += ”追加的內容";
//追加含有HTML標籤的內容
dd.innerHTML += "<br><span>這是追加的span標籤</span>";
};
在ul塊前面新增li元素：
//用來計數的
var no = 0;
var btn2 = document.getElementById("btn2");
btn2.onclick = function() {
//獲取ul列表物件
var li = document.createElement("li");
li.innerHTML = "新增的li" + no;
no++;
li.style.color = "green";
var ul = document.querySelector("ul");
//找到要插入的位置的標籤物件
var oli = document.querySelector("ul>li");
//將元素插入到指定位置
ul.insertBefore(li, oli);
在ul列表後新增li塊元素：
var btn3 = document.getElementById("btn3")'
btn3.onclick = function() {
var ul = document.querySelector("ul");
ul.innerHTML += "<li>香蕉</li>";
//建立標籤物件
var t = document.createElement("li");
//對物件的操作
t.innerHTML = "水蜜桃";
t.style.color = "red";
t.style.backgroundColor = "green";
var ul = document.querySelector("ul");
//把建立的物件，新增到父級元素的末尾
ul.appendChild(t);
};
練習6-5：點選列表中的圖片，顯示到指定區域
HTML程式碼：
<div id="container">
<div><img src="img/Desert.jpg" width="500" height="400" id="img1"/></div>
<ul>
<li><img src="img/Desert.jpg"/></li>
<li><img src="img/Hydrangeas.jpg"/></li>
<li><img src="img/Jellyfish.jpg"/></li>
<li><img src="img/Koala.jpg"/></li>
<li><img src="img/Lighthouse.jpg"/></li>
</ul>
</div>
CSS程式碼：
*{
padding: 0;
margin: 0;
}
#container{
width: 700px;
height: 600px;
text-align: center;
margin: 0 auto;
}
ul{
list-style: none;
}
ul>li{
float: left;
width: 100px;
height:80px ;
margin-left: 40px;
}
ul img{
width: 100px;
height:80px;
}
javascript程式碼：
//獲取所有圖片 並返回集合
var imgs= document.querySelectorAll("ul img");
//遍歷集合中每個圖片元素
for(var i=0;i<imgs.length;i++){
//對每個圖片物件進行事件繫結
imgs[i].onclick=function(){
//存放當前被點選圖片的路徑
var src=this.src;
//獲取顯示區域的物件
var obj=document.getElementById("img1");
//進行路徑賦值
obj.src=src;
};
}