节点中最常用的是以下三类节点
1. 文档节点: Document (编号是：9)
2. 元素节点: Element （编号是：1）
3. 文本节点: Text （编号是：3）
4.属性节点：（编号是：2）
涉及属性:
children, childNodes, childElementCount, keyCode, firstElementChild
涉及方法:
querySelector(),getElementsByTagName(),appendChild(),insertBefore(), focus()
实例
<!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>ToList留言及删除留言功能</title>
</head>
<body>
<h3>请留言</h3>
<input type="text">
<ul></ul>
<script>
var comment = document.querySelector('input');
var ul = document.getElementsByTagName('ul').item(0);
comment.focus();
comment.onkeydown = function (event) {
if (event.keyCode === 13) {
var li = document.createElement('li');
// 修改这条语句
// li.innerText = comment.value;
// innerText不能解析文本中的html代码,要换成innerHTML
// 将删除按钮添加到留言内容的后面
li.innerHTML = comment.value + '<a href="javascript:;" onclick="del(this)">删除</a>';
if (ul.childElementCount === 0) {
ul.appendChild(li);
} 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>运行实例 »
点击 "运行实例" 按钮查看在线实例
