收藏
批改状态：合格
老师批语：
总结：
1、在js操作dom中首先要理解文档树和节点的概念，对dom的操作就是对节点的操作（增加、删除、修改），如何正确的选择到要操作的节点就很重要。
2、this作为实参代表的是当前元素，所以还要通过this查找父节点。
3、“键盘敲烂，月薪过万”还是要多练习，看视频和自己写真是一个天一个地。
问题：
parentNode和parentElement的区别？
childNodes和children的区别？
思考：
1、本次练习中模仿qq对话框设置了一个“用enter发送”和“用ctrl+enter”快捷键发送，那么可否设置一个自定义配置快捷键来发送呢（试了几次，除了在程序里面写死快捷键，不知道还有什么方法可以自定义）
2、这个练习如果用面相对象该如何写？
<!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>ToDoList</title>
<style>
*{padding: 0; margin: 0;}
ul,ol,li {list-style: none;}
.clearfix{zoom: 1;}
.clearfix:after{content:' '; display: block; clear: both; line-height: 1px; height: 0;}
.wrap {width: 500px; margin: 0 auto; }
.wrap h1{background-color: #ffffff;}
.list-ul {padding: 20px; border: 1px solid #ddd; clear: both; background: rgb(245,245,245); margin-bottom: 20px;height: 200px; overflow-y: scroll;}
.list-ul li {width: 100%; text-align: right;margin-bottom: 20px; position: relative;}
.list-ul li p{width: 50%; background: rgba(152,225,106,1); box-sizing: border-box; padding: 10px;color: #333; position: relative; display: inline-block; text-align: left; z-index: 100; border-radius: 4px;}
.list-ul li p::after{content: ' '; display: block; background: rgba(152,225,106,1); position: absolute; width: 20px; height: 20px; right: -5px; top: 10px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); z-index: -1;
}
.list-ul li a{ font-size: 12px; text-decoration: none; color: #333333; position: absolute; bottom:-20px; right: 0; width: 40px;}
.list-ul li a:hover{color: #ff0000;}
.input_box {height: 18px; line-height: 18px; padding: 5px; width:360px;}
.select_box {height: 32px; line-height: 32px; padding: 5px; vertical-align: top;}
</style>
</head>
<body>
<div class="wrap">
<h1>toDoList</h1>
<ul class="list-ul clearfix">
<li>
<p>来说点什么吧</p>
<a href="javascript:;" onclick="del(this);">删除</a>
</li>
</ul>
<input type="text" name="input_box" class="input_box" id="input_box" value="">
<select class="select_box">
<option value="1" selected>Enter发送</option>
<option value="2">Ctrl+Enter发送</option>
</select>
</div>
<script>
var input = document.getElementById('input_box');
var ul = document.querySelector('.list-ul');
var select = document.querySelector('select');
input.focus();
input.onkeydown = function(event){
if(select.value == 1)
{
if( !event.ctrlKey && event.keyCode === 13 )
{
send ();
}
}
else if (select.value == 2)
{
if(event.ctrlKey && event.keyCode === 13)
{
send ();
}
}
function send (){
let li = document.createElement('li');
let p = document.createElement('p');
p.innerHTML = input.value;
li.appendChild(p);
li.innerHTML += '<a href="javascript:;" onclick="del(this)">删除</a>';
if (ul.childElementCount === 0){
ul.appendChild(li);
} else {
let first = ul.firstElementChild;
ul.insertBefore(li,first);
}
input.value = ''; // 清空输入框
}
}
function del (ele)
{
if (confirm('确定删除吗？'))
{
let li = ele.parentElement;
li.parentElement.removeChild(li);
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
