收藏
批改状态：合格
老师批语：
Todolist的实战（微博，聊天框等的基本原理构造）
第一步——构建DOM结构
<h3>请留言</h3> <input type="text"> <ul></ul>
第二步——获取input与ul的结点（附带光标的聚焦）
var comment = document.querySelector('input'); //获取input的结点
var ul = document.getElementsByTagName('ul')[0]; //获取ul的结点
comment.focus();//光标的聚焦第三步——检测键盘输入的是否是回车（或自定义的提交按键）
comment.onkeydown = function (event) {
if (event.keyCode === 13) 第四步——创建一个新的li结点，并给其赋值
var li = document.createElement('li'); //生成新的li结点
li.innerHTML = comment.value; 第五步——判断是否是第一条聊天信息
if (ul.childElementCount === 0) { 第六步——
1.如果是第一条，直接将li作为子元素添加给ul
ul.appendChild(li);
2.如果不是，获取第一条的结点，将现在的li的结点插入到它的前面
var first = ul.firstElementChild; //ul下第一个子元素的结点 ul.insertBefore(li, first);
第七步——清空数组，重新进行光标聚焦
comment.value = ""; commemt.focus();// comment.value = "";//清空input中的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<h3>请留言</h3>
<input type="text">
<ul></ul>
</body>
</html>
<script>
var comment = document.querySelector('input'); //获取input的结点
var ul = document.getElementsByTagName('ul')[0]; //获取ul的结点
comment.focus();
comment.onkeydown = function (event) {
if (event.keyCode === 13) {
var li = document.createElement('li'); //生成新的li结点
li.innerHTML = comment.value+"<a href='javascript:;' onclick='del(this)'>删除</a>";
//执行一段空白的javascript语句，返回空或者false值，从而防止链接跳转。跟当前a标签无关，这段代码始终都会执行。
//如果按的是回车
//Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
if (ul.childElementCount === 0) {
ul.appendChild(li);
} else {
var first = ul.firstElementChild; //ul下第一个子元素的结点
ul.insertBefore(li, first);
}
comment.value = "";
commemt.focus();// comment.value = "";//清空input中的值
}
}
function del(eve) {
if(confirm('是否删除？'))
{
// 获取要删除的元素
var li = eve.parentNode;//获取父结点
//一定要在被删除元素的父结点上调用
li.parentNode.removeChild(li);
}
return false;
}
</script>点击 "运行实例" 按钮查看在线实例
总结：涉及到大量的函数，需要记忆.
所用函数：变量名.querySelector('标签名')//用css的方式获取该类标签的第一个元素的结点
变量名.getElementsByTagName('标签名')//获取一个数组，其中的所有元素是该类标签的结点
变量名.focus()//光标聚焦
变量名.onkeydown//设置键盘按下的事件
事件（event）//Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标 按 钮的状态。
事件.keyCode//字符数字键的键码值
变量名.creatElement('标签名')//生成一个新该类标签的结点
标签.childElementCount//获得该标签下的子结点
父标签.apendchild(标签名)//在父标签下生成子标签
父标签.firstElementChild//取父标签下的第一个子结点
父标签.insertBefore(插入的标签内容,选择的结点)//将所需内容插入结点位置
结点.parentNode//获取当前结点的父结点
结点.childNode//获取当前结点的子结点
父结点.removeChild(子结点)//移除当前父结点下的子结点
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
