本案例未使用任何框架，均使用 js 原生以及 DOM 操作實作，代碼完整，復制即用，
目錄
一、案例效果
二、涉及要點
1. 事件監聽
2. DOM 節點操作
（1）常用節點獲取方法
（2）常用節點資訊獲取方法
（3）常用節點屬性獲取方式
（4）DOM 修改
（5）DOM 添加
（6）DOM 洗掉
3. DOM 控制 CSS 樣式
（1）通過 style 屬性控制樣式
（2）通過classList控制樣式：
三、完整代碼+詳細注釋
一、案例效果
如下圖，備忘錄可添加新事件，對事件進行編輯，洗掉已有事件，對完成的事件進行標注，
二、涉及要點
1. 事件監聽
事件源要與事件系結后，才能觸發對應事件，事件系結有三種方式：行內事件屬性賦值、事件屬性賦值、事件監聽，
本案例使用了事件監聽的方式進行事件系結，與其他兩種方式的區別在于事件屬性多次賦值則只會執行最后一次事件處理程式；而事件監聽可以添加多個監聽器，執行多個事件處理程式，
事件監聽格式為：
addEventListener(type, listener, useCapture)
//type: 事件型別
//listener: 監聽器（處理程式）
//useCapture: 默認為false，設定為true時，不會因冒泡觸發監聽器
//eg：
const btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('事件監聽')
})2. DOM 節點操作
（1）常用節點獲取方法
| 名稱 | 描述 |
|---|---|
getElementById() | 獲取帶有指定id的節點 |
getElementsByTagName() | 獲取帶有指定標簽名的節點集合 |
querySelector() | 獲取指定選擇器或選擇器組匹配的第一個節點 |
querySelectorAll() | 獲取指定選擇器或選擇器組匹配的所有節點集合 |
（2）常用節點資訊獲取方法
| 名稱 | 描述 |
|---|---|
| innerHTML | 回傳元素內包含的所有HTML內容（文本和標簽），型別為字串 |
| parentNode | 回傳指定節點的父節點 |
| children | 回傳指定元素的子元素節點集合 |
| firstElementChild | 回傳指定元素的第一個子元素節點 |
| lastElementChild | 回傳指定元素的最后一個子元素節點 |
（3）常用節點屬性獲取方式
| 名稱 | 描述 |
|---|---|
getAttribute() | 回傳元素一個指定的屬性值 |
| 直接使用屬性名稱獲取 | 適用于部分屬性（如：title，value，href） |
（4）DOM 修改
| 名稱 | 描述 |
|---|---|
innerHTML | innerHTML除了獲取元素內容，也可通過賦值用于修改元素中內容，如果修改內容中包含html字串會被決議成html元素 |
setAttribute(name,value) | 設定指定元素上的某個屬性值，如果屬性已經存在，則更新該值；否則，使用指定的名稱和值添加一個新的屬性 |
| 通過屬性名更改屬性 | 對元素屬性重新賦值可更改對應屬性值 |
（5）DOM 添加
| 名稱 | 描述 |
|---|---|
createElement(tagName) | 創建一個由標簽名稱tagName指定的HTML元素 |
appendChild(node) | 將一個節點插入到指定父節點的子節點串列的末尾處 |
insertAdjacentHTML(position, text) | 將指定文本決議為HTML字串，插入到指定位置（IE不友好） position（內容相對當前元素位置）：
|
（6）DOM 洗掉
| 名稱 | 描述 |
|---|---|
removeChild(child) | 洗掉選定的子節點，需要指定其父元素 |
remove() | 洗掉選定節點（IE不友好） |
3. DOM 控制 CSS 樣式
（1）通過 style 屬性控制樣式
box.style.color = "#fff"; //將元素中文字設定為白色
box.style.marginLeft = "100px"; //將元素左外邊距設定為100px （2）通過classList控制樣式：
| 名稱 | 描述 |
|---|---|
add(class1, class2, …) | 添加一個或多個類名 |
remove(class1, class2, …) | 移除一個或多個類名 |
replace(oldClass, newClass) | 替換類名 |
contains(class) | 判定類名是否存在，回傳布林值 |
|
| 如果類名存在，則移除它，否則添加它，第二個引數代表無論類名是否存在，強制添加（true）或洗掉（false） |
三、完整代碼+詳細注釋
<!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>我的備忘錄</title>
<style>
button {
cursor: pointer;
}
input {
outline: none;
background-color: antiquewhite;
border: none;
border-radius: 3px;
width: 250px;
height: 30px;
margin: 15px;
}
input::-webkit-input-placeholder {
color: #999;
}
/* 解決li前面的點洗掉后還占空間的問題 */
ul {
padding: 0;
margin: 0;
}
ul>li {
list-style: none;
}
.border {
width: 500px;
background-color: #999;
border-radius: 20px;
margin: auto;
padding-bottom: 20px;
}
.border .title {
font-size: 24px;
color: aliceblue;
line-height: 50px;
text-align: center;
}
.form {
width: 80%;
margin: 15px auto;
}
.form #add {
width: 100px;
height: 30px;
border-radius: 5px;
border: 0;
font-weight: 600;
font-size: 16px;
color: #999;
letter-spacing: 6px;
}
/* 每一條li，代表每一條事件 */
.item {
display: flex;
justify-content: space-between;
line-height: 30px;
font-size: 14px;
color: rgb(75, 73, 73);
padding: 5px 0;
border-bottom: 1px solid white;
}
.item .info {
margin-left: 10px;
}
.list .item .edit,
.fin,
.del {
width: 50px;
height: 30px;
border: 0;
border-radius: 5px;
color: white;
}
.edit {
background-color: #337ab7;
}
.fin {
background-color: #20c248;
}
.del {
background-color: #d9534f;
}
.btn {
display: inline-block;
width: 180px;
margin-right: 0;
}
/* 點擊完成按鈕后所添加的新類名finished */
.finished {
color: rgb(112, 110, 110);
background-color: rgb(197, 190, 190);
border-radius: 3px
}
.finished>.info {
/* 為文字添加洗掉線 */
text-decoration: line-through;
}
</style>
</head>
<body>
<!-- 備忘錄外層邊框 -->
<div class="border">
<!-- 標題 -->
<div class="title">我的備忘錄</div>
<hr>
<!-- 輸入框和按鈕 -->
<div class="form">
<input type="text" name="text" placeholder="請填寫您的事件">
<button id="add">添加</button>
</div>
<!-- 備忘錄事件串列 -->
<div
style="width: 94%;margin: auto;border-radius: 3px;box-shadow: 2px 2px rgb(119, 115, 115);background-color: rgb(214, 219, 219);">
<ul class="list">
<li class="item">
<!-- 事件區域 -->
<span class="info">事件1</span>
<!-- 按鈕區域 -->
<div class="btn">
<button class="edit">編輯</button>
<button class="fin">完成</button>
<button class="del">洗掉</button>
</div>
</li>
<li class="item">
<!-- 事件區域 -->
<span class="info">事件2</span>
<!-- 按鈕區域 -->
<div class="btn">
<button class="edit">編輯</button>
<button class="fin">完成</button>
<button class="del">洗掉</button>
</div>
</li>
</ul>
</div>
</div>
</body>
<script>
var input = document.querySelector('.form input'); //獲取事件輸入框
var addBtn = document.querySelector('#add'); //獲取添加按鈕
var list = document.querySelector('.list'); //獲取事件串列ul
//點擊添加按鈕
addBtn.addEventListener('click', function () { //使用監聽器addEventListener
//使用DOM添加insertAdjacentHTML，第一個引數:添加的位置；第二個引數:添加的內容
//每次添加的li均添加到ul內的第一個li之前（afterbegin）
list.insertAdjacentHTML('afterbegin', `
<li class="item">
<!-- 事件區域 -->
<span class="info">${input.value}</span>
<!-- 按鈕區域 -->
<div class="btn">
<button class="edit">編輯</button>
<button class="fin">完成</button>
<button class="del">洗掉</button>
</div>
</li>
`);
//由于之前設定點擊添加按鈕后新元素item會被添加到插入元素內部的第一個子節點之前
//所以我們應該對list的第一個子元素節點進行操作，否則新增事件無法被洗掉、修改和完成
//洗掉
list.firstElementChild.querySelector('.del').addEventListener('click', function () {
var item = this.parentNode.parentNode
item.remove()
})
//完成
list.firstElementChild.querySelector('.fin').addEventListener('click', function () {
var item = this.parentNode.parentNode
item.classList.add('finished')
})
//修改
list.firstElementChild.querySelector('.edit').addEventListener('click', function () {
var item = this.parentNode.parentNode
item.querySelector('.info').innerText = prompt('請修改你的事件：')
})
})
var delBtns = document.querySelectorAll('.del'); //獲取洗掉按鈕
var finBtns = document.querySelectorAll('.fin'); //獲取完成按鈕
var editBtns = document.querySelectorAll('.edit'); //獲取編輯按鈕
//遍歷，有幾個洗掉按鈕則相當于有幾個事件（li）
for (var idx = 0; idx < delBtns.length; idx++) {
//點擊洗掉按鈕
delBtns[idx].addEventListener('click', function () {
var item = this.parentNode.parentNode //洗掉按鈕父級的父級，即類名為item的li(該按鈕所在的行)，一個li即一個事件行
item.remove(); //點擊洗掉按鈕后洗掉該條li
})
//點擊完成按鈕
finBtns[idx].addEventListener('click', function () {
var item = this.parentNode.parentNode; //獲取該條事件行
//classList屬性可以回傳一個元素類屬性集合
item.classList.add('finished'); //點擊完成按鈕后為該行添加新類名finished，以實作新樣式
})
//點擊編輯按鈕
editBtns[idx].addEventListener('click', function () {
var item = this.parentNode.parentNode; //獲取該條事件行
item.querySelector('.info').innerText = prompt('請修改你的事件：'); //點擊編輯后將內容插入類名為info的span并彈出系統提示框
})
}
</script>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/413927.html
標籤：其他