Dom节点操作

最新推荐文章于 2020-02-04 12:39:52 发布

紫書

最新推荐文章于 2020-02-04 12:39:52 发布

阅读量177

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/mc17677175934/article/details/102140820

版权

H5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

(document object model)

旧源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM节点操作</title>
		<script>
			//Tools Package
			function pw(value){
				console.log(value);
			}
			function id(id){
				return document.getElementById(id);
			}
			function Class(id){
				return document.getElementsByClassName(id)[0];
			}
			function tag(id){
				return document.getElementsByTagName(id);
			}
		</script>
		<style>
			#list li{
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<input id="msg" type="text" />
		<ul id="list">
			<li>1</li>
			<li>2</li>
		</ul>
		<script>
			//1.先获取要操作的标签（Label,Tag）
			var inp=id('msg');
			var list=id('list');
			var lis=list.children;
			//2.Binding to input of 键盘事件:onkeydown按下  onkeyup抬起
			inp.onkeydown=function(e){
				if(e.keyCode==13){
					//回车（Enter）
					//在ul中添加一个<li> 方法1: list.innerHTML+='<li>'+inp.value+'</li><br>';
					pw('this.knock=回车键，它的ascii='+e.keyCode+'!');
					//在ul中添加一个<li> 方法2:
					var li=document.createElement("li");
					li.innerHTML=inp.value;
					list.appendChild(li);
					//绑定新元素
					//for(var i=0;i<lis.length;i++){
						lis[lis.length-1].onclick=function(){
							pw(this);
							pw('元素被删除');
							list.removeChild(this);
						}
					//}
					//输入框回车后将被清空
					inp.value='';
				}
			}
			//事件流
			for(var i=0;i<lis.length;i++){
				lis[i].onclick=function(){
					pw(this+'元素被删除');
					list.removeChild(this);
				}
			}
		</script>
	</body>
</html>

新源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM节点操作</title>
		<script>
			//Tools Package
			function pw(value){
				console.log(value);
			}
			function id(id){
				return document.getElementById(id);
			}
			function Class(id){
				return document.getElementsByClassName(id)[0];
			}
			function tag(id){
				return document.getElementsByTagName(id);
			}
		</script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#list li{
				list-style: none;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<input id="msg" type="text" />
		<ul id="list">
			<li>1<button>delete 1</button></li>
			<li>2<button>delete 2</button></li>
		</ul>
		<script>
			//1.先获取要操作的标签（Label,Tag）
			var inp=id('msg');
			var list=id('list');
			var lis=list.children;
			//2.Binding to input of 键盘事件:onkeydown按下  onkeyup抬起
			inp.onkeydown=function(e){
				if(e.keyCode==13){
					//回车（Enter）
					//在ul中添加一个<li> 方法1: list.innerHTML+='<li>'+inp.value+'</li><br>';
					pw('this.knock=回车键，它的ascii='+e.keyCode+'!');
					//在ul中添加一个<li> 方法2:
					var li=document.createElement("li");
					var btn=document.createElement('button');
					btn.innerHTML='delete '+(lis.length+1);
					li.innerHTML=inp.value;//将键入的值赋给新的<li>元素
					li.appendChild(btn);
					li.style.background='red';//css样式设置
					list.appendChild(li);
					//输入框回车后将被清空
					inp.value='';
				}
			}
			//针对li元素多的情况，减少循环次数，提高性能
			list.onclick=function(e){
				pw('li被点击(e.target)');
				//子事件具有冒泡特性，冒泡给父事件
				e.stopPropagation;
				//区别子事件
				if(e.target.nodeName=='BUTTON'){
					list.removeChild(e.target.parentNode);
				}else{
					list.removeChild(e.target);
				}
			}
		</script>
	</body>
</html>

（新旧代码之间区别在于性能优化，不用每添加一个子事件就循环绑定所有事件）

紫書

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom节点操作

(document object model)旧源码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>DOM节点操作</title> <script> //Tools Package function pw...
复制链接

扫一扫