[JavaScript知识库] JS ＜2＞

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

重要的数据类型

选择和修改元素

1 .querySelector()方法允许我们指定一个 CSS 选择器，然后返回与该选择器匹配的第一个元素。

修改元素样式

创建和插入元素

.createElement(tagName)可基于作为参数传递给它的指定标签名称创建一个新元素。

为了创建一个元素并将其添加到网页中，您必须将其指定为 DOM 上已存在的元素的子元素。。使用appendChild()将添加一个子元素作为最后一个子节点。

移除一个元素

除了从头修改或创建元素之外，DOM 还允许删除元素。.removeChild()方法从父级中删除指定的子级。.

querySelector()只删除嵌套在该父元素中的元素，也可以使用该方法指定不同的父元素。querySelector()返回第一段，以下代码将删除第一段：

let paragraph =?document.querySelector('p');
document.body.removeChild(paragraph);

隐藏一个元素，使它最初不加载，.hidden属性可通过将其指定为 true 或 false 来隐藏它：

document.getElementById('sign').hidden =?true;

事件对象

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一些信息。比如：鼠标的坐标……

注意：在IE8中浏览器被触发时，浏览器不会传递事件对象，在IE8及以下浏览器中，是将事件对象作为window对象的属性保存的。

onmousemove：该事件将会在鼠标在元素中移动时被触发
clientX：可以获取鼠标指针的水平坐标
clientY：可以获取鼠标指针的垂直坐标

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#div1{
				width: 300px;
				height: 50px;
				margin-bottom: 10px;
				border: 1px solid black;
			}
			#div2{
				width: 300px;
				height: 20px;
				border: 1px solid black;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/*
				 * 当鼠标在div1中移动时，在div2中来显示鼠标的坐标
				 */
				//获取两个div
				var div1 = document.getElementById("div1");
				var div2 = document.getElementById("div2");
				
				div1.onmousemove = function(event){
					//兼容IE8及以下浏览器
//					if(!event){
//						event = window.event;
//					}
					
					event = event ||window.event;
					
					var x = event.clientX;
					var y = event.clientY;
	
					//在div2中显示鼠标的坐标
					div2.innerHTML = "x="+x+"，y="+y;
				};
			};
			
		</script>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
	</body>
</html>

事件绑定

使用?对象.事件 = 函数?的形式绑定响应函数

? ? ? ? ? 注意：它只能同时为一个元素的一个事件绑定一个响应函数

let element = document.querySelector("button");

function turnButtonRed (){
	element.style.backgroundColor = "red";
  element.style.color = "white";
  element.innerHTML = "Red Button"; 
}

element.onclick = turnButtonRed;

addEventListener()? 绑定响应函数

参数：
①事件的字符串，不要on
②回调函数，当事件触发时该函数会被调用
③是否在捕获阶段触发事件，需要一个布尔值，一般都传false

注意：使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。这个方法不支持IE8及以下的浏览器。

示例：弹出框会依次弹出1 2 3

<script type="text/javascript">
			
			window.onload = function(){		
				/*
				 * 点击按钮以后弹出一个内容
				 */
				//获取按钮对象
				var btn01 = document.getElementById("btn01");
				btn01.addEventListener("click",function(){
					alert(1);
				},false);
				
				btn01.addEventListener("click",function(){
					alert(2);
				},false);
				
				btn01.addEventListener("click",function(){
					alert(3);
				},false);
				
			};
		</script>

let readMore = document.getElementById('read-more');
let moreInfo = document.getElementById('more-info');

// Write your code here:
function showInfo(){
  moreInfo.style.display = 'block';
}

readMore.addEventListener('click', showInfo);

取消

eventTarget.removeEventListener('click', eventHandlerFunction);

?attachEvent()：在IE8中可以使用attachEvent()来绑定事件

参数：
①事件的字符串，要on
②回调函数

注意：这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反。

attachEvent()中的this，是window

示例：弹出框会依次弹出 3 2 1

<script type="text/javascript">
			
			window.onload = function(){		
				/*
				 * 点击按钮以后弹出一个内容
				 */
				//获取按钮对象
				var btn01 = document.getElementById("btn01");
				btn01.attachEvent("onclick",function(){
					alert(1);
				});
				
				btn01.attachEvent("onclick",function(){
					alert(2);
				});
				
				btn01.attachEvent("onclick",function(){
					alert(3);
				});
			};
		</script>

定义一个函数，用来为指定元素绑定响应函数

? ? ? ?参数：obj要绑定事件的对象??eventStr?事件的字符串(不要on)??callback回调函数

function bind(obj , eventStr , callback){
	if(obj.addEventListener){
		//大部分浏览器兼容的方式
		obj.addEventListener(eventStr , callback , false);
	}else{ 
		/*
		 * this是谁 由调用方式决定
		 * callback.call(obj)
		 */
		 //IE8及以下
		obj.attachEvent("on"+eventStr , function(){
		//在匿名函数中调用回调函数
		callback.call(obj);
	 	});	
	}
}

事件参考

发送DOM事件是为了将发生的相关事情通知代码。每个事件都是继承自Event?接口的对象，可以包括自定义的成员属性及函数用于获取事件发生时相关的更多信息。事件可以表示任何从基本的用户交互、到发生在渲染模型自动通知的任何事情。

鼠标事件

Event Name Fired When auxclick A pointing device button (ANY non-primary button) has been pressed and released on an element. click (en-US) 在元素上按下并释放任意鼠标按键。 contextmenu (en-US) 右键点击（在右键菜单显示前触发）。 dblclick (en-US) 在元素上双击鼠标按钮。 mousedown (en-US) 在元素上按下任意鼠标按钮。 mouseenter (en-US) 指针移到有事件监听的元素内。 mouseleave (en-US) 指针移出元素范围外（不冒泡）。 mousemove (en-US) 指针在元素内移动时持续触发。 mouseover (en-US) 指针移到有事件监听的元素或者它的子元素内。 mouseout (en-US) 指针移出元素，或者移到它的子元素上。 mouseup (en-US) 在元素上释放任意鼠标按键。 pointerlockchange (en-US) 鼠标被锁定或者解除锁定发生时。 pointerlockerror (en-US) 可能因为一些技术的原因鼠标锁定被禁止时。 select (en-US) 有文本被选中。 wheel (en-US) 滚轮向任意方向滚动。