我的DOM学习（三）

web API 编程

一、节点操作

1.删除节点

• 父亲.removeChild(节点) 删除节点，并返回删除的节点

<button>删除</button>
 <ul>
 	<li>1</li>
 	<li>3</li>
 	<li>2</li>
 </ul>
 <script>
 var btn=document.querySelector('button');
 var ul = document.querySelector('ul');
btn.onclick=function () {
	 if (ul.children.length==0) {
	 	//按钮禁用
	 	this.disabled;
	 }else{
	 	ul.removeChild(ul.children[0]);
	 }
}
 </script>

2…删除留言案例

<textarea name="" id="" cols="30" rows="10">123</textarea>
<button>添加</button>
<ul></ul>
<script>
var text=document.querySelector('textarea');
var ul =document.querySelector('ul');
var btn = document.querySelector('button');
	btn.onclick=function () {
	if (text.value=='') {
		alert('请输入内容');
	}else{
		//创建元素节点
	var li =document.createElement('li');
		//赋值   javascript:;阻止跳转链接
	li.innerHTML=text.value+"<a href='javascript:;'>删除</a>";
		//添加节点
	ul.insertBefore(li,ul.children[0]);
	//删除元素  删除的是当前链接的li  即a的父亲
	var as=document.querySelectorAll('a');
	for (var i =0; i <as.length; i++) {
		as[i].onclick=function(){
		ul.removeChild(this.parentNode);
			}
	}
	
    }
}

</script>

 

3.复制节点（克隆节点）

node.cloneNode（）返回调用该方法的副本

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
<script>
var ul=document.querySelector('ul');
//括号为空或者为false
//都是浅拷贝，只复制节点本身，不复制子节点或者内容
//若括号里面为true，则为深拷贝，复制标签加内容
var lii=ul.children[0].cloneNode();
ul.appendChild(lii);
</script>

4.动态生成表格

<table border='1'>
		<thead>
			<tr>
				<td>姓名</td>
				<td>学号</td>
				<td>班级</td>
				<td>操作</td>
			</tr>

		</thead>
		<tbody>
		
		</tbody>	


	</table>

<script>
var  arr=[{
	name:'张三',
	id:'20170305666',
	class:01
},{
	name:'李四',
	id:'20170305089',
	class:02
},{
	name:'王五',
	id:'20180628390',
	class:03
}

];
//向tbody里面创建行
var tbody=document.querySelector('tbody');
for (var i = 0; i <arr.length; i++) {
	//创建tr
	var tr=document.createElement('tr');
	//放入tbody里
	tbody.appendChild(tr);
	//循环第i的各个属性
	for (var k in arr[i]) {
		var td=document.createElement('td');
		//arr[i][k]代表属性值
		td.innerHTML=arr[i][k];
		tr.appendChild(td);
	}
	var td=document.createElement('td');
	td.innerHTML="<a href='javascript:;'>删除</a>";
	tr.appendChild(td);
	

var aS=document.querySelectorAll('a');

		for (var i = 0; i <aS.length; i++) {
				aS[i].onclick=function () {
					tbody.removeChild(this.parentNode.parentNode);
		}
		
	}

</script>

5.三种动态创建元素的区别

• document.write()
• element.innerHTML()
• document.createElement()

<script>
//（1）document.write() 如果页面文档流加载完毕，再去调用
//这句话，会导致页面重新绘制
document.write('<div>12</div>');
//（2）element.innerHTML(). 创建多个元素效率更高，结构复杂

//（3）document.createElement()，创建多个元素的效率低一点，但是结构清晰

</script>

二、事件高级

1.注册事件

（1）注册事件概述
方式：
（1）传统方式
btn.onclick = function(){}；
特点：注册事件唯一性，同一元素同一事件只能设置一个处理函数。最后注册的函数会覆盖前一个。
（2） 方法监听注册事件（推荐使用可以添加多个监听器，不带on）i9以上使用
btn.addEventListener('click',函数)；
（3）btn.attachEvent('onclick',函数);(带on，非标准，不推荐)i9以前使用

2.删除事件

（1）传统解绑事件

<div>1</div>
<div>2</div>
<div>3</div>
<script>
//第一次点击显示123.以后点击不显示
var div=document.querySelectorAll('div');
div[0].onclick=function(){
		alert('123');
		//解绑事件
		div[0].onclick='null';

}
</script>  

（2）监听事件解绑

<div>1</div>
<div>2</div>
<div>3</div>
<script>
//第一次点击显示123.以后点击不显示
var div=document.querySelectorAll('div');
div[0].addEventListener('click',fn1)
function fn1(){
		alert('123');
		//解绑事件
		div[0].removeEventListener('click',fn1)
}
</script>

(3)第三种方法的解绑的方法

<div>1</div>
<div>2</div>
<div>3</div>
<script>
//第一次点击显示123.以后点击不显示
var div=document.querySelectorAll('div');
div[0].attachEvent('click',fn1)
function fn1(){
		alert('123');
		//解绑事件
		div[0].detachEvent('click',fn1);
}
</script>

三、DOM的事件流

1.事件流定义

事件发生时会在元素节点之间按照特定的顺序传播，传播的过程称为事件流。

四、事件对象

1.事件对象 event

//1.event 也可以写e ev 就是一个事件对象 
//写到监听函数的括号里，当形参看
//2. 事件对象只有有事件（click）才存在，系统自动创建的，无须传递参数
//3.事件对象是事件（onclick ）的一系列数据的集合
div.onclick=function (e) {
	console.log(e);
}
</script>

注：事件对象也有兼容性问题(一般不考虑)
兼容性写法e=e||window.event;

div.onclick=function (e) {
	e=e||window.event;
	console.log(e);
	
}

2.事件对象常见的属性和方法

• 返回div标签（一般不用，用this）
• 返回click点击，mouseover鼠标经过，mouseout鼠标离开
  
• 阻止默认行为
  
• 阻止冒泡

//阻止冒泡 stopPropagation()
var div=document.querySelectorAll('div');
//false 代表冒泡，true代表捕获
div[0].attachEvent('click',fn1,false);
function fn1(e){
  	alert('123');
  	e.stopPropagation();//停止传播
  	//低版本浏览器 e.canaleBubble=true;
}

五、事件委托（代理、委派）

1.事件委托的原理

不是每个子节点都需要单独设置监听器，而是将他设置在父节点上，利用冒泡原理影响设置每个子节点，主要是找Target。
作用：提高了程序的性能，只操作了一次DOM。

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>
<script>
var ul=document.querySelector('ul');
ul.addEventListener('click',function (e) {
   //点击那个li，那个li背景颜色变红
   e.target.style.backgroundColor='pink';
})

</script>

六、常用的鼠标事件

1.鼠标事件

• 阻止右键，禁用右键复制
  
• 阻止选中文字，防止用复制快捷键复制
  

2. 鼠标事件mouseEvent 对象

案例：跟随鼠标的天使
思路：鼠标移动事件：mousemove

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		img{
			position: absolute;
			top:2px；
		}
	</style>	
</head>
<body>
<img src="5.png" alt="" style="height:30px">
<script>
var pic =document.querySelector('img');
document.addEventListener('mousemove',function(e){
	//获得x坐标y坐标 
	var x=e.pageX;
	var y =e.pageY;
	//千万不要忘了加单位
	pic.style.left=x+'px';
	pic.style.top=y+'px';
})

</script> 









 

七、常用键盘事件

1.常用键盘事件

2.键盘事件对象

• 可以用keycode来判断按键的ASCII

3. 模拟京东按键

举例：按下s键便可以将光标定位到搜索框里
思路：判断用户是否按下了s键，获得焦点。 js里面的focus（）

<input type="text">
<script>
var search=document.querySelector('input');
document.addEventListener('keyup',function (e) {
	if (e.keyCode==83) {
		search.focus();
	}
})

</script>