JavaScript 對圖像進行（追加，插入，替換，刪除）
阿新 • • 發佈：2017-11-12
刪除 簽名 添加節點 child bject 寬度 har random 全部
JavaScript 對圖像進行（追加，插入，替換，刪除）
本次所學內容：
document.querySelector(‘.container‘)
這個是可以查找單個【id標簽和class標簽】
document.querySelectorAll(‘.container‘)
這個是可以查找全部【li標簽和class標簽】
container.appendChild(img)
這個是對container標簽進行追加子標簽
container.firstElementChild
這個是在（谷歌瀏覽器兼容），功能是查找container標簽下的第一個子標簽
container.firstChild;
這個是在（IE8兼容），功能是查找container標簽下的第一個子標簽
container.lastElementChild
這個是在（谷歌瀏覽器兼容），功能是查找container標簽下的最後一個子標簽
container.lastChild;
這個是在（IE8兼容），功能是查找container標簽下的最後 一個子標簽
container.insertBefore(img,firstImg);
這個是對container標簽的子標簽進行插入功能，參數一個是要插入的標簽，後邊的參數是要在那個節點進行插入
container.replaceChild(img,lastImg);
這個是對container標簽然後替換這個標簽下的標簽，共有倆個參數，一個是要替換的標簽，一個是被替換的標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.節點方法:添加、替換、刪除</title>
<style>
/*對class標簽進行css樣式*/
.container{
width:600px;
/*設置寬度為600px*/
height:600px;
/*設置高度為600px*/
border:1px solid #ddd;
/*設置邊框 厚度為1px 使用實線，顏色為灰色*/
}
img{
/*通過img標簽名進行查找*/
width:100px;
/*設置寬度為100px*/
height:100px;
/*設置高度為100px*/
border-radius:50%;
/*設置圖像顯示的範圍，50%為園型圖*/
float:left;
/*使用向左懸浮，去掉間隙*/
}
</style>
</head>
<body>
<div class="container">
<!-- 定義一個div標簽 -->
<img src="images/1.jpg" />
<!-- 在div標簽中定義一個img標簽 -->
</div>
<button>點擊追加一張圖片</button>
<!-- 定義一個按鈕標簽 -->
<button>點擊前面添加一張圖片</button>
<!-- 定義一個按鈕標簽 -->
<button>點擊替換最後一張圖片</button>
<!-- 定義一個按鈕標簽 -->
<button>點擊刪除第三張圖片（索引值為2）</button>
<!-- 定義一個按鈕標簽 -->
</body>
<script>
/*
方法
// append:追加 child:子節點
ul.appendChild(節點對象):
// insert:添加 before:在...之前
insertBefore(添加的節點,指定的節點)
// replace:替換
replaceChild(新節點,被替換的節點)
// remove:刪除
removeChild(刪除的節點)
*/
//1.獲取對象
var container = document.querySelector(‘.container‘);
// 獲取標簽並賦值到一個變量中
var btn = document.querySelectorAll(‘button‘);
// 獲取所有的標簽並賦值到一個變量中，獲取的是一個數組，每個數組中都是object對象
//2.點擊事件,追加一張圖片images/2.jpg
btn[0].onclick = function(){
// 通過下標索引獲取第一個button標簽，然後綁定一個點擊事件
//(1)創建圖片節點
var img = document.createElement(‘img‘);
//創建一個新的img標簽，然後賦值給變量
//(3)隨機數
var index = rand(1,60);
// 調用函數將函數的執行效果賦值給變量
img.src = ‘images/‘ + index + ‘.jpg‘;
// 使用拼接字符，然後設置標簽的src屬性
img.alt = ‘美女圖‘;
// 如果圖片沒有加載成功就就會返回美女圖字符串
//
//console.log(img);
//(2)追加圖片
container.appendChild(img);
// 這個是找到container 標簽然後在這個標簽的中添加字標簽
}
//在節點之前添加節點
btn[1].onclick = function(){
//創建圖片節點（添加一張新圖片，瀏覽器上沒有的圖片，就只能創建）
var img = document.createElement(‘img‘);
img.src = ‘images/‘ + rand(1,60) +‘.jpg‘;
img.alt = ‘美女頭像圖‘;
//firstElementChild（谷歌兼容）
//firstChild（IE8兼容）
var firstImg = container.firstElementChild || container.firstChild;
//獲取第一張圖片
//頭部添加圖片（在節點之前添加）
container.insertBefore(img,firstImg);
// 使用插入的方法共有倆個參數，一個是要插入的內容是什麽，一個參數是要在什麽節點之前，
}
//替換節點
btn[2].onclick = function(){
//1.新節點
var img = document.createElement(‘img‘);
// 創建一個新的標簽
img.src = ‘images/‘+rand(1,60)+‘.jpg‘;
// 使用字符串拼接，然後賦值給一個變量
img.alt = ‘加班中‘;
// 如果圖片加載錯誤，就提示支付串加班中
//2.最後一個節點
var lastImg = container.lastElementChild || container.lastChild;
// 查找container標簽下的最後一個標簽，然後賦值到一個新的變量中
//3.替換節點
container.replaceChild(img,lastImg);
// 找到container標簽然後替換這個標簽下的標簽，共有倆個參數，一個是要替換的標簽，一個是被替換的標簽
}
//點擊刪除第三張圖片
btn[3].onclick = function(){
//獲取第三張圖片
var threeChild = container.children[2];//獲取了所有的標簽子節點
//console.log(threeChild);
//刪除該圖片
container.removeChild(threeChild);
}
//點擊一次隨機出現一張(1-60張圖片)
//隨機數函數
function rand(m,n){
// 定義一個函數，需要有倆個參數
//隨機數
return Math.floor(Math.random()*(n-m+1)+m);
// 返回向下取整的方式然後執行隨機數的函數
}
</script>
</html>JavaScript 對圖像進行（追加，插入，替換，刪除）