JS基础dom增删改,div随鼠标移动

JS基础sgg_day1415_04dom增删改,div随鼠标移动

1，在创建一个"广州"节点,添加到#city下，有着多种方式

myClick("btn07",function(){
	
	//向city中添加广州
	var city = document.getElementById("city");
	
	/*
	 * 使用innerHTML也可以完成DOM的增删改的相关操作
	 * 一般我们会两种方式结合使用
	 *这种方式虽然快，但相当于会对整个city里面的元素修改，不太好，所以使用第一种和这种方式的折中办法 
	 */
	//city.innerHTML += "<li>广州</li>";
	
	//创建一个li
	var li = document.createElement("li");
	//向li中设置文本
	li.innerHTML = "广州";
	//将li添加到city中
	city.appendChild(li);
	
});
};

看其中关键的笔记
一般我们会两种方式结合使用 *这种方式虽然快，但相当于会对整个city里面的元素修改，不太好，所以使用第一种和这种方式的折中办法

2，dom增删改

2,1 删除

2.1.1 超链接防止跳转的两种方式

（1）

//如果用户点击确认
			if(flag) {
				//删除tr
				tr.parentNode.removeChild(tr);
			}

			/*
			 * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
			 * 	但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
			 */
			return false;

（2）在超链接写上"Delete";
也是为了防止点击超链接就 默认跳转

3，总结方法

1.DOM查询

- 通过具体的元素节点来查询

- 元素.getElementsByTagName()
		- 通过标签名查询当前元素的指定后代元素
		
	- 元素.childNodes
		- 获取当前元素的所有子节点
		- 会获取到空白的文本子节点
	
	- 元素.children
		- 获取当前元素的所有子元素
	
	- 元素.firstChild
		- 获取当前元素的第一个子节点
	
	- 元素.lastChild
		- 获取当前元素的最后一个子节点
	
	- 元素.parentNode
		- 获取当前元素的父元素
	
	- 元素.previousSibling
		- 获取当前元素的前一个兄弟节点
	
	- 元素.nextSibling
		- 获取当前元素的后一个兄弟节点
		
innerHTML和innerText
	- 这两个属性并没有在DOM标准定义，但是大部分浏览器都支持这两个属性
	- 两个属性作用类似，都可以获取到标签内部的内容，
		不同是innerHTML会获取到html标签，而innerText会自动去除标签
	- 如果使用这两个属性来设置标签内部的内容时，没有任何区别的	
	
读取标签内部的文本内容
	<h1>h1中的文本内容</h1>
	元素.firstChild.nodeValue
	
- document对象的其他的属性和方法
	document.all
		- 获取页面中的所有元素，相当于document.getElementsByTagName("*");
		
	document.documentElement
		- 获取页面中html根元素
		
	document.body
		- 获取页面中的body元素
		
	document.getElementsByClassName()
		- 根据元素的class属性值查询一组元素节点对象
		- 这个方法不支持IE8及以下的浏览器
		
	document.querySelector()
		- 根据CSS选择器去页面中查询一个元素
		- 如果匹配到的元素有多个，则它会返回查询到的第一个元素	
		
	document.querySelectorAll()	
		- 根据CSS选择器去页面中查询一组元素
		- 会将匹配到所有元素封装到一个数组中返回，即使只匹配到一个
		

2.DOM修改

document.createElement()
		- 可以根据标签名创建一个元素节点对象
		
	document.createTextNode()
		- 可以根据文本内容创建一个文本节点对象
		
	父节点.appendChild(子节点)
		- 向父节点中添加指定的子节点
		
	父节点.insertBefore(新节点,旧节点)
		- 将一个新的节点插入到旧节点的前边
		
	父节点.replaceChild(新节点,旧节点)
		- 使用一个新的节点去替换旧节点
		
	父节点.removeChild(子节点)
		- 删除指定的子节点
		- 推荐方式：子节点.parentNode.removeChild(子节点)
		

4)day15- 09div跟随鼠标移动

   //获取box1
	var box1 = document.getElementById("box1");
	//绑定鼠标移动事件
	document.onmousemove = function(event){
		
		//解决兼容问题
		event = event || window.event;
		
		//获取滚动条滚动的距离
		/*
		 * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
		 * 火狐等浏览器认为浏览器的滚动条是html(documentElement)的，
		 */
		var st = document.body.scrollTop || document.documentElement.scrollTop;
		var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
		
		var left = event.clientX;
		var　top = event.clientY;
		
		//设置div的偏移量
		box1.style.left = left + sl + "px";
		box1.style.top = top + st + "px";

		考虑兼容性问题，开始一般都是box1.onmouse事件，现在改成document，

只搞box1绑定，只能往下，不能网上走回去，所以为整个document绑定

5)拖拽

window.onload = function(){
			/*
			 * 拖拽box1元素
			 *  - 拖拽的流程
			 * 		1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
			 * 		2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
			 * 		3.当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
			 */
			
			//获取box1
			var box1 = document.getElementById("box1");
			//为box1绑定一个鼠标按下事件
			//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
			box1.onmousedown = function(event){
				event = event || window.event;
				//div的偏移量 鼠标.clentX - 元素.offsetLeft
				//div的偏移量 鼠标.clentY - 元素.offsetTop
				var ol = event.clientX - box1.offsetLeft;
				var ot = event.clientY - box1.offsetTop;
				
				
				//为document绑定一个onmousemove事件
				document.onmousemove = function(event){
					event = event || window.event;
					//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
					//获取鼠标的坐标
					var left = event.clientX - ol;
					var top = event.clientY - ot;
					
					//修改box1的位置
					box1.style.left = left+"px";
					box1.style.top = top+"px";
					
				};
				
				//为document绑定一个鼠标松开事件
				document.onmouseup = function(){
					//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
					//取消document的onmousemove事件
					document.onmousemove = null;
					//取消document的onmouseup事件
					document.onmouseup = null;
				};

1）38行 的document.onmouseup = function() 这里为什么也是document绑定，因为如果存在box2元素，你的鼠标将box1和2重合了，它这个事件绑定不知道是1还是2的，但是你只绑定了1，所以要绑定document

2） 18 28行的这里，为了让鼠标所在的位置和本应该的div的位置相同，用当前位置 - 偏移量，偏移量等于 clientX - offsetleft