DOM基礎詳細 包含多個案例
關于DOM的進階事件請檢視DOM的進階事件
DOM基礎 詳細
- DOM基礎詳細 包含多個案例
-
- DOM樹
- 擷取元素
-
- 如何擷取元素
-
- 根據ID擷取
- 根據标簽名擷取
- 通過HTML5新增的方法擷取
- 擷取特殊元素
- 事件基礎
-
- 事件的組成
- 操作元素
-
- 改變元素的内容
- 修改src(其他的類似)
- 根據時間，顯示不同的問候語和圖檔
- 表單元素的修改
- 顯示和隐藏密碼
- 操作元素的大小、顔色及樣式
- 行内樣式操作
-
- 循環精靈圖
- 顯示隐藏文本框内容
- 使用className修改樣式屬性
-
- 密碼框驗證資訊
- 排它思想
-
- 點選圖檔修改背景
- 全選和單選
- 自定義屬性
- 擷取自定義屬性
- 設定自定義屬性
- 移除屬性
- tab欄切換
- 節點操作
-
- 節點概述
- 節點層級
-
- 父級節點
- 子級節點
- 兄弟節點
- 節點操作
-
- 建立節點
- 添加節點
- 删除節點
- 複制節點
- 簡單版發表留言
- 動态表格
文檔對象模型，是W3C組織推薦的處理可擴充标記語言(HTML或者XML)的标準程式設計接口
W3C已經定義了一些系列的DOM接口，通過這些接口可以改變網頁的内容、結構和樣式
DOM樹
- 文檔：一個網頁就是一個文檔，DOM中使用document表示
- 元素：頁面中的所有标簽都是元素，DOM中使用element表示
- 節點：網頁中的所有内容都是節點（标簽、屬性、文本、注釋等），使用node表示
DOM把以上内容都看作對象
擷取元素
因為我們文檔頁面從上往下加載，是以先有标簽，我們将js解除安裝标簽下main
如何擷取元素
DOM在我們實際開發中主要用來操作元素
擷取頁面元素可以使用以下幾種方法
- 根據ID擷取
- 根據标簽名擷取
- 通過HTML5新增的方法擷取
- 特殊元素擷取
根據ID擷取
使用
getElementById()
方法可以擷取帶有ID的元素對象
id是大小寫名敏感的字元串，代表了所要查找的元素的唯一ID
傳回值：傳回一個比對到ID的DOM Element對象。若在文檔中沒有找到對象，則傳回null
<div id="time">2021-7-21</div>
<script>
var timer = document.getElementById('time');//document（文檔），指在文檔中選出該元素
console.log(timer);//<div id="time">2021-7-21</div>
//console.dir()列印我們傳回的元素對象，更好的檢視裡面的屬性和方法
console.dir(timer)
</script>
根據标簽名擷取
傳回的是 擷取過來元素對象的集合，以僞數組的形式存儲
使用
getElementsByTagName()
方法可以傳回帶有指定标簽名的對象的集合
<ul>
<li>知否知否，應是綠肥紅瘦1</li>
<li>知否知否，應是綠肥紅瘦2</li>
<li>知否知否，應是綠肥紅瘦3</li>
<li>知否知否，應是綠肥紅瘦4</li>
</ul>
<script>
var list = document.getElementsByTagName('li');
console.log(list);
console.log(list[0]);
</script>
注意：
- 因為得到的是一個對象的集合，是以我們向要操作裡面的元素就需要周遊
- 得到的元素對象是動态的
- 如果取到的元素隻有一個，傳回的還是位數組
- 如果頁面中沒有這個元素，傳回的是空的位數組
從父類中擷取元素
element.getElementsByTagName('标簽名')
僞數組不能作為父元素
父元素必須是單個對象（必須指明是哪個元素對象），擷取的時候不包括父元素自己
<ul>
<li>知否知否，應是綠肥紅瘦1</li>
<li>知否知否，應是綠肥紅瘦2</li>
<li>知否知否，應是綠肥紅瘦3</li>
<li>知否知否，應是綠肥紅瘦4</li>
</ul>
<ol>
<li>你</li>
<li>我</li>
</ol>
要求：選取ol中的li
代碼：
<script>
var ol = document.getElementsByTagName('ol');
for(var i = 0; i < ol.length; i++)
console.log(ol[i].getElementsByTagName('li'));
</script>
通過HTML5新增的方法擷取
類名擷取
document.getElementsByClassName('類名')
找到的依舊是一個僞數組
選擇器單個擷取
document.querySelector('選擇器')
根據指定的選擇器傳回第一個元素，不是一個僞類數組
選擇器多個擷取
document.querySelectorAll('選擇器')
根據指定選擇器傳回全部的元素的集合，是一個僞數組
擷取特殊元素
- 擷取body元素
document.body
- 擷取html元素
document.documentElement
事件基礎
JavaScript使我們有能力建立動态頁面，而事件是可以被JavaScript偵測到的行為
簡單了解：觸發–響應機制
網頁中的每一個元素都可以産生某些可以觸發JavaScript的事件，例如，我們可以在使用者點選某按鈕時産生一個事件，然後去執行某些操作
事件的組成
事件源：事件被觸發的對象，比如：按鈕
事件類型：如何觸發，什麼事件，比如滑鼠點選(onclick)
事件處理程式：通過一個函數指派的形式完成
<button id="btn">唐伯虎</button>
<script>
var btn = getElementById('btn');
btn.onclick = function(){
alert('點秋香');
}
</script>
事件源.事件類型 = function(){
事件處理程式
}
滑鼠事件類型：
| 滑鼠事件 | 觸發條件 |
|---|---|
| onclick | 滑鼠點選左鍵觸發 |
| onmouseover | 滑鼠經過觸發 |
| onmouseout | 滑鼠離開觸發 |
| onfocus | 擷取滑鼠焦點觸發（焦點就是光标的位置） |
| onblur | 失去滑鼠焦點觸發 |
| onmousemove | 滑鼠移動觸發 |
| onmouseup | 滑鼠彈起觸發 |
| onmousedown | 滑鼠按下觸動 |
操作元素
JavaScript的DOM操作可以改變頁面内容、結構和樣式，我們可以利用DOM操作元素來改變元素裡面的内容、屬性等
改變元素的内容
element.innerText
從起始位置到終止位置的内容，但它去除html标簽，同時空格和換行也會去掉
innerText不能識别html标簽，是以在修改的時候不能加入html标簽
<p>1589</p>
<script>
function getDate(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']；
var day = date.getDay();
return '今天是' + 'year' + '年' + 'month' + '月' + 'dates' + '日' + arr[day];
}
var p = document.querySelector('p')
p.innerText =getDate();
</script>
那麼打開網頁就顯示目前的時間
element.innerHTML
可以識别html标簽
起始位置到終止位置的全部内容，包括html标簽，同時保留白格和換行
修改src(其他的類似)
<botton id='ldh'>劉德華</botton>
<botton id='zxy'>張學友</botton>
<img src="imges/ldh.jpg">
<script>
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
zxy.onclic = function(){
img.src = 'imges/zxy.jpg';
}
ldy.onclick = function(){
img.src = 'imges/zxy.jpg';
}
</script>
根據時間，顯示不同的問候語和圖檔
<img src="imges/s.gip">
<div>上午好</div>
<script>
var img = querySelector('img');
var div = querySelector('div');
var date = new Date();
var hour = date.getHours();
if(hour < 12){
img.src = 'imges/s.gip';
div.innerText = '上午好'；
}else if (hour <18){
img.src = 'imges/z.jpg';
div.innerText = '下午好'；
}else if{
img.src = 'imges/w.jpg';
div.innerText = '晚上好'；
}
</script>
表單元素的修改
<button>按鈕</button>
<input type="text" value="輸入内容">
<script>
var btn = document.querySelector('botton');
var input = document.querySelector('input');
btn.onclick = function(){
//input.innerText = '點選了';這個是普通标簽使用的，但是表單标簽不适用
input.value = '點選了';
//如果想要某個表單被禁用，不能再次點選，我們可以修改disable
btn.disable = true;//或者為this.disable = true;
}
</script>
表單屬性不在使用，可以将disable改為true
函數代碼中的this指向函數的調用對象
顯示和隐藏密碼
- 核心思路：點選眼睛按鈕，把密碼框類型改為文本框就可以看到裡面的密碼
- 一個按鈕兩個狀态，點選一次，切換為文本，繼續點選一次切換為密碼框
- 算法：利用一個flag變量，來判斷flag的值，如果為1就切換為文本框，flag設定為0，如果是0就切換為密碼框，flag設定為1
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
.box{
width: 400px;
border-bottom: 5px solid #E7E3E3;
margin: 100px auto;
position: relative;
}
.box>input{
height: 30px;
width: 370px;
border: 0px;
outline: none;
}
img{
height: 10px;
width: 24px;
position: absolute;
top: 10px;
right: 10px;
}
</style>
</head>
<body>
<div class="box">
<input type="password" name="">
<img src="./img/01.jpg">
<script type="text/javascript">
var img = document.querySelector('img');
var input = document.querySelector('input');
var flag = 1;
img.onclick = function(){
if(flag == 1){
input.type = 'text';
flag = 0;
}else{
input.type = 'password';
flag = 1;
}
}
</script>
</div>
</body>
</html>
操作元素的大小、顔色及樣式
我們可以通過js修改元素的大小、顔色、位置等樣式
1.element.style 行内樣式操作
2.element.className 類名樣式操作
行内樣式操作
注意：
- js中樣式采用駝峰命名法，比如fontSize、backgroundColor
- js修改style樣式操作，産生的是行内樣式，css權重比較高
<style>
div{
background-color:black;
}
</style>
<html>
<div></div>
</html>
<script>
var div = document.querySelector('div');
div.onclick = function(){
this.style.backgroundColor = 'purple';
}
</script>
循環精靈圖
精靈圖：就是一張圖有一列的圖示
在循環精靈圖的時候，在css中要先有精靈圖的url
在周遊的時候，圖檔的位置就是相當于在ps中的x，y軸中的位置，一般每個圖示的大小都是一緻的，是以友善周遊
<style>
li{
background:url(images/sprite.png) no-repeat;
}
</style>
<script>
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++){
var index = i * 44;
lis[i].style.backgroundPosition = '0'+ '-' + index + 'px'
}
</script>
顯示隐藏文本框内容
案例分析：
- 首先表單需要2個新事件，擷取焦點onfocus，失去焦點onblur
- 如果獲得焦點，判斷表單裡面的内容是否為預設文字，如果為預設文字，就清空表單内容
- 如果失去焦點，判斷表單内容是否為空，如果為空，則表單内容改為預設文字
<!DOCTYPE html> <html> <head> <title>test</title> <style type="text/css"> input{ color: #999; } </style> </head> <body> <div class="box"> <input type="text" name="" value="收集"> <script type="text/javascript"> var input = document.querySelector('input'); //擷取焦點時 input.onfocus = function(){ if (input.value === '收集'){ input.value = ''; //将文字加深 this.style.color = '#333'; } } //失去焦點時 input.onblur = function(){ if (this.value === ''){ this.value = '收集'; //将文字變淺 this.style.color = '#999' } } </script> </div> </body> </html>
使用className修改樣式屬性
注意：
- 如果樣式修改較多，可以采取操作類名方式更改元素樣式
- class因為是個保留字，是以使用className來操作元素類名屬性
- className會直接更改元素的類名，會覆寫原先的類名
<!DOCTYPE html>
<html>
<head>
<title>none</title>
<style>
.change1{
background-color:red;
height:70px;
margin-top:90px;
}
.change2{
background-color:pink;
height:10px;
}
</style>
</head>
<body>
<div class="change1"></div>
<script>
var div = document.querySelector('div');
div.onclick = function(){
this.className = 'change2';
}
</script>
</body>
</html>
密碼框驗證資訊
- 首先判斷的事件是表單失去焦點onblur
- 如果輸入正确則提示正确的資訊顔色為綠色小圖示變化
- 如果輸入不是6位到16位，則提示錯誤資訊顔色為紅色小圖示變化
- 因為裡賣弄變化的樣式較多，我們采用className修改樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 600px;
margin: 100px auto;
}
.message{
display: inline-block;
font-size: 12px;
color: #999;
background: url(taobao.PNG) no-repeat;
padding-left: 25px;
}
.wrong{
color: red;
}
.right{
color: green;
}
</style>
</head>
<body>
<div class="register">
<input type="password" class="ipt">
<p class="message">請輸入6~16位密碼</p>
</div>
<script>
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
ipt.onblur = function(){
if(this.value.length <6 || this.value.length > 16)
{
message.className = 'message wrong';//增加class值 而不是粗暴的修改
message.innerHTML = '你輸入的位數不對';
}else{
message.className = 'message right';
message.innerHTML = '你輸入的位數正确';
}
}
</script>
</body>
</html>
在修改class名的時候，在原來類名的基礎上加一個，使一個元素擁有兩個相同的屬性和新加入類名的覆寫屬性
排它思想
如果有同一組元素，我們想要某一個元素實作某種樣式，需要用到循環的排他思想算法：
- 所有元素全部清除樣式
- 給目前元素設定樣式
- 注意順序不能颠倒，首先幹掉其他人，再設定自己
點選圖檔修改背景
<!DOCTYPE html>
<html>
<head>
<title>換皮膚</title>
<style type="text/css">
.imgLine{
margin: 500px auto;
padding-left:500px;
}
.imgLine>img{
width: 100px;
height: 100px;
}
body{
background-image: url('./img/01.jpg');
}
</style>
</head>
<body>
<div class="imgLine">
<img src="./img/01.jpg" class="firstImg">
<img src="./img/02.jpg" class="secondImg">
</div>
<script type="text/javascript">
var img = document.querySelectorAll('img');
console.log(img);
for (let i = 0; i < img.length; i++){
img[i].onclick = function(){
console.log(this.src);
document.body.style.backgroundImage = 'url(' + this.src+ ')';
}
}
</script>
</body>
</html>
全選和單選
案例分析
- 全選和取消全選做法：讓下面所有的複選框的checked屬性(選中狀态)跟随全選按鈕即可
- 當單選全部勾選的時候，全選的選框自動勾選，當失去個别單選選框的時候，全選選框失去勾選
<!DOCTYPE html>
<html>
<head>
<title>全選和單選</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th><input type="checkbox" name="choseAll" id="choseAll"></th>
<th>商品</th>
<th>價格</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="goodList"></td>
<td>商品1</td>
<td class="price">1000</td>
</tr>
<tr>
<td><input type="checkbox" name="goodList"></td>
<td>商品2</td>
<td class="price">20000</td>
</tr>
<tr>
<td><input type="checkbox" name="goodList"></td>
<td>商品3</td>
<td class="price">100</td>
</tr>
</tbody>
</table>
<button>确定</button>
<a>最後總共消費0元</a>
<script type="text/javascript">
var chose_all = document.getElementById('choseAll');
var inputList = document.getElementsByName('goodList');
var price = document.querySelectorAll('.price');
var submit = document.querySelector('button');
var result = document.querySelector('a');
//全選或者取消全選
chose_all.onclick = function(){
for (let i = 0; i < inputList.length; i++) {
inputList[i].checked = this.checked;
}
}
//單選對全選的影響
flag = false;
for (let i = 0; i < inputList.length; i++) {
inputList[i].onclick = function(){
for (let i = 0; i < inputList.length; i++) {
if(inputList[i].checked == true){
flag = true;
}else{
flag = false;
break;
}
}
chose_all.checked = flag;
}
}
submit.onclick = function(){
let sum = 0;
for (let i = 0; i < inputList.length; i++) {
if(inputList[i].checked == true){
sum += parseInt(price[i].innerText);
}
}
result.innerText = '最後總共消費' + sum + '元';
}
</script>
</body>
</html>
自定義屬性
自定義屬性目的：為了儲存并使用資料，有些資料可以儲存到頁面中而不用儲存到資料庫中
在H5規定中自定義屬性
data-
開頭為屬性名并且指派
例如：
<div data-index = "1"></div>
擷取自定義屬性
- element.屬性
<html> <div id="demo"> 哈哈哈哈 </div> </html> <script> var div = querySelector('div'); console.log(div.id); </script> -
element.getAttribute(‘屬性’)
get得到擷取attribute屬性的意思
<html> <div id="demo"> 哈哈哈哈 </div> </html> <script> var div = querySelector('div'); console.log(div.getAttribute('id')); </script>
差別：
- element.屬性 擷取内置屬性值（元素自帶的屬性）
- element.getAttribute(‘屬性’) 主要擷取自定義的屬性，我們程式員自定義的屬性
擷取所有自定義屬性：
element.dataset
,傳回的是一個集合
**如果自定義屬性裡面有多個
-
連接配接的單詞，此時我們使用駝峰命名法 **
<div data-index = "2" data-list-name = "andy">1</div>
<script>
console.log(div.dataset);//傳回的是一個集合
console.log(div.dataset['index']);//傳回data-index的屬性值
console.log(div.dataset.index);
console.log(div.dataset.listName);
</script>
設定自定義屬性
element.setAttribute('屬性')
<html>
<div id="demo" index="1">
哈哈哈哈
</div>
</html>
<script>
var div = querySelector('div');
div.setAttribute('屬性','值');
</script>
移除屬性
element.removeAttribute('屬性')
tab欄切換
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="./CSS/reset.css">
<style type="text/css">
.tabBox{
margin: 100px;
position: relative;
}
ul li {
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #fff;
border: 1px #bbb solid;
border-bottom: none;
cursor: pointer;
}
#tab_con{
position: absolute;
top: 31px;
}
.onclickStyle{
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<div class="tabBox">
<ul id="tab">
<li class="onclickStyle">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="tab_con">
<div >aaaa</div>
<div style="display:none">bbbb</div>
<div style="display:none">cccc</div>
</div>
</div>
<script type="text/javascript">
var liList = document.querySelectorAll('ul>li');
var divList = document.querySelectorAll('#tab_con>div');
for (let i = 0; i < liList.length; i++) {//注意此處不能使用var定義，var定義之後，i是全局變量，使tab欄内容無法出現
liList[i].onclick = function(){
for (let i = 0; i < liList.length; i++) {
liList[i].className = '';
divList[i].style.display = 'none';
}
this.className = 'onclickStyle';
divList[i].style.display = 'block';
}
}
</script>
</body>
</html>
節點操作
利用結點層級關系擷取元素
- 利用父子兄關系擷取元素
- 邏輯性強，但是相容性稍差
節點概述
一般地，節點至少擁有節點類型、節點名稱、節點值這三個基本屬性
- 元素節點 nodeType 為1
- 屬性節點 nodeType 為2
- 文本節點 nodeType 為3（文本節點包含文字、空格、換行）
我們實際開發中，節點操作主要操作的是元素節點
節點層級
父級節點
element.parentNode
<html>
<div class="box">
<span class="erweima">x</span>
</div>
</html>
在此代碼中，
div
和
span
是父子關系
//選擇器選擇元素
var erweima = document.querySelector('.erweima');
var box = document.querySelector('.box');
//使用節點選擇元素
var erweima = document.querySelector('.erweima');
var box = erweima.parentNode;
- parentNode屬性可傳回某個節點的父節點，注意是最近的一個父節點
- 如果指定的節點沒有父節點則傳回null
子級節點
element.childNodes
element.children
注意：childNodes獲得的是所有子節點，包含元素節點、文本結點等等；children是擷取所有的子元素節點
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
console.log(ul.childNodes);//NodeList(9)
console.log(ul.children)//HTMLCollection(4)
</script>
ul下li的個數隻有4個，但是集合中卻出現了9個，這是因為 使用childNode選取的節點包括換行（文本節點），是以加起來總共有9個
如果需要使用childNodes選取所有元素節點，這就需要for循環
var ul = document.querySelector('ul');
for(let i = 0; i < ul.childNodes.length; i++){
if (ul.childNodes[i].nodeType == 1){
//ul.childNodes[i]是元素節點
console.log(ul.childNodes[i]);
}
}
子節點補充：
- firstChild 傳回第一個子節點（不管是文本節點還是元素節點）
- lastChild 傳回最後一個子節點（不管是文本節點還是元素節點）
- firstElementChild 傳回第一個子元素節點
- lastElementChild 傳回最後一個子元素節點
最後兩個方法有相容性問題，IE9以上才支援
兄弟節點
element.nextSibling
傳回目前元素的下一個兄弟節點（包括文本節點和元素節點）
element.previousSibling
傳回目前元素的上一個兄弟節點（包括文本節點和元素節點）
element.nextElementSibling
傳回目前元素下一個兄弟元素節點
element.previousElementSibling
傳回目前元素上一個兄弟元素節點
節點操作
建立節點
document.createElement('tagName')
該方法建立由tagName指定的HTML元素。因為這些元素原先不存在，是根據我們的需求動态生成的，是以我們稱為動态建立元素節點
添加節點
-
node.appendChild(child)
node 父級 child子級
node.appendChild()方法将一個節點添加到指定父節點的節點清單末尾，類似于css中的after僞元素
var ul = document.querySelector('ul'); var li = document.createElement('li');//建立li元素 ul.appendChild(li);//将li元素放在ul下的清單末尾 -
node.insertBefore(child,指定元素)
删除節點
node.removeChild(child)
從DOM中删除一個子節點，傳回删除的節點
複制節點
node.cloneNode()
node.cloneNode()方法傳回調用該方法的節點的一個副本，也稱為克隆節點/拷貝節點
注意：（）括号為空或者為false,那麼為淺拷貝，隻複制标簽，不複制裡面的内容，括号中為true,複制标簽及裡面的内容
簡單版發表留言
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>簡單版發表留言</title>
<style type="text/css">
textarea {
resize: none;
height: 65px;
display:block;
margin: 70px auto;
font-size: 15px;
color: #B8B8B8;
border: 5px black solid;
background-color: #E1E1E1;
}
button {
width: 50px;
height: 50px;
position: relative;
top: -140px;
left: 1100px;
background-color: #99DEE0;
color: #ffffff;
}
.box{
width: 520px;
margin: 30px auto;
border: 3px black solid;
}
li{
width: 300px;
background-color: #4FD6DD;
margin-bottom: 5px;
}
</style>
</head>
<body>
<textarea rows="10" cols="70">請發表一條善意的言論</textarea>
<button>發表</button>
<div class="box">
<ul>
評論區:
</ul>
</div>
<script type="text/javascript">
var text = document.querySelector('textarea');
var button = document.querySelector('button');
var ul = document.querySelector('ul');
text.onfocus = function(){
if (this.value === '請發表一條善意的言論'){
this.value = '';
this.style.backgroundColor = '#fff';
}
}
text.onblur = function(){
if (this.value == ''){
this.value = '請發表一條善意的言論';
}
}
button.onclick = function(){
if(text.value !== ''){
var li = document.createElement('li');
li.innerText = text.value;
ul.insertBefore(li,ul.children[0]);
}
}
</script>
</body>
</html>
動态表格
案例分析
- 因為資料是動态的，我們需要js動态生成，這裡我們模拟資料，自己定義好資料。資料我們采用對象形式存儲
- 所有的資料都是放在tbody裡面的行裡面
- 因為行很多，我們需要循環建立多個行(對應多少人)
- 每個行裡面又有很多單元格（對應裡面的資料），我們還繼續使用循環建立多個單元格
- 最後一列單元格式删除，需要單獨建立單元格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> thead tr{ background-color:#CAC8C8; font-size:20px; } th{ width: 70px; } </style> </head> <body> <table border="1"> <thead> <tr> <th>姓名</th> <th>班級</th> <th>成績</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <script type="text/javascript"> // 1.建立資料 var datas = [{ name : '小明', class : 1, score : 98 }, { name : '小紅', class : 2, score : 88 }, { name : '小剛', class : 3, score : 100 }]; // 2.往tbody中建立行，有幾個人建立幾行（由數組的長度決定） var tbody = document.querySelector('tbody'); for (let i = 0; i < datas.length; i++) { let tr = document.createElement('tr'); tbody.appendChild(tr); // 3.建立單元格，單元格的數量取決于每個對象中屬性個數 for (let j in datas[i]) {//擷取到的是對象的鍵，而不是值 let td = document.createElement('td'); td.innerText = datas[i][j]; tr.appendChild(td); } let td = document.createElement('td'); td.innerHTML = '<a href="javascript:;" target="_blank" rel="external nofollow" >删除</a>'; tr.appendChild(td); } // 4.删除操作 var all_remove = document.querySelectorAll('a'); for (let i = 0; i < all_remove.length; i++) { all_remove[i].onclick = function() { tbody.removeChild(this.parentNode.parentNode); } } </script> </body> </html>