实例
<!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 选择器的一个元素。
var ul = document.getElementsByTagName("ul")[0];//获取到的ul标签返回值是一个DOM数组，DOM数组的第一个元素才是要操作的UL标签
comment.focus();
comment.onkeydown = function (e) {
if (e.keyCode === 13) {
var li = document.createElement("li"); //createElement() 方法可创建元素节点。此方法可返回一个 Element 对象。
li.innerHTML = comment.value + '<a href="javascript:;" onclick="del(this)">删除</a>';
// 应该将新元素添加到列表中的第一个元素的位置上才符合常识
// 如果当前列表为空(子元素数量为0),则新元素应该是第一条留言
if (ul.children.length === 0) {
//childElementCount 返回给定元素的子元素数
ul.appendChild(li);
//appendChild() 方法向节点添加最后一个子节点。
} else {
// 如果列表已有留言,则插入到新一条之前
var first = ul.firstElementChild; //获取第一个元素节点
ul.insertBefore(li, first); //将新的留言插到旧留言前面
}
// 清空留言区,并设置焦点
comment.value = '';
comment.focus();
}
}
function del(ele) {
if (confirm('是否删除?')) {
var li = ele.parentNode; //选中父节点
li.parentNode.removeChild(li); //通过父节点来删除子节点
}
return false;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
DOM操作在于了解基本的DOM结构和各种标签在DOM结构中所表现的形式；
