收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h3>留言板</h3>
<input type="text" name="" id="">
<ul></ul>
<script>
var comment = document.querySelector("input"); //querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個(gè)元素。
var ul = document.getElementsByTagName("ul")[0];//獲取到的ul標(biāo)簽返回值是一個(gè)DOM數(shù)組，DOM數(shù)組的第一個(gè)元素才是要操作的UL標(biāo)簽
comment.focus();
comment.onkeydown = function (e) {
if (e.keyCode === 13) {
var li = document.createElement("li"); //createElement() 方法可創(chuàng)建元素節(jié)點(diǎn)。此方法可返回一個(gè) Element 對(duì)象。
li.innerHTML = comment.value + '<a href="javascript:;" onclick="del(this)">刪除</a>';
// 應(yīng)該將新元素添加到列表中的第一個(gè)元素的位置上才符合常識(shí)
// 如果當(dāng)前列表為空(子元素?cái)?shù)量為0),則新元素應(yīng)該是第一條留言
if (ul.children.length === 0) {
//childElementCount 返回給定元素的子元素?cái)?shù)
ul.appendChild(li);
//appendChild() 方法向節(jié)點(diǎn)添加最后一個(gè)子節(jié)點(diǎn)。
} else {
// 如果列表已有留言,則插入到新一條之前
var first = ul.firstElementChild; //獲取第一個(gè)元素節(jié)點(diǎn)
ul.insertBefore(li, first); //將新的留言插到舊留言前面
}
// 清空留言區(qū),并設(shè)置焦點(diǎn)
comment.value = '';
comment.focus();
}
}
function del(ele) {
if (confirm('是否刪除?')) {
var li = ele.parentNode; //選中父節(jié)點(diǎn)
li.parentNode.removeChild(li); //通過(guò)父節(jié)點(diǎn)來(lái)刪除子節(jié)點(diǎn)
}
return false;
}
</script>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
總結(jié)：
DOM操作在于了解基本的DOM結(jié)構(gòu)和各種標(biāo)簽在DOM結(jié)構(gòu)中所表現(xiàn)的形式；
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)