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(子结点)//移除当前父结点下的子结点