JavaScript03: Dom文档对象模型

​ 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

一、Dom Html

1、查找标签

document.getElementById(“idValue”); 由 id 查找
document…getElementsByTagName(“p”); 由标签名查找
document.getElementsByClassName(“className”); 由类名查找

<div class="box" id="box">DIV</div>
<ul id="list">
	<li>第一项</li>
	<li>第二项</li>
	<li>第三项</li>
</ul>
<ol>
	<li>java</li>
	<li>javaScript</li>
</ol>

<script>
	// 获取id为box的这个元素
	var box=document.getElementById("box");
	console.log(box); // <div class="box" id="box">DIV</div>

	// 获取页面中所有的li
	var lis=document.getElementsByTagName("li");
	console.log(lis.length);  // 5

    // 获取class=box的第一个元素
    var x = document.getElementsByClassName("box")[0];
    console.log(x); // <div class="box" id="box">DIV</div>
    
	// 获取id为list下的所有的li
	var lis2=document.getElementById("list").getElementsByTagName("li");
	console.log(lis2.length);  // 3
</script>

2、修改样式 CSS

​ 设置ele元素的CS样式

• 语法：

ele.style.styleName=styleValue

1. ele为要设置样式的DOM对象
2. styleName为要设置的样式名称（- 连字符形式改为驼峰形式）
3. styleValue为设置的样式值

<div class="box" id="box">元素BOX</div>
<ul id="list">
	<li>第一项</li>
	<li>第二项</li>
	<li>第三项</li>
</ul>

<script>
   var box=document.getElementById("box");
   box.style.color='#f00';    // 字体颜色
   box.style.fontWeight="bold";  // 加粗(驼峰)
   
   var lis=document.getElementById("list").getElementsByTagName("li");
   // 遍历每一个li
   for(var i=0,len=lis.length;i<len;i++){
	  lis[i].style.color='#00f';
	  if(i==0){
		 lis[i].style.backgroundColor="#ccc";
	  }else if(i==1){
		 lis[i].style.backgroundColor="#666";
	  }else{
		 lis[i].style.backgroundColor="#333";
	  }
   }
</script>

3、innerHTML、className

• ele.innerHTML

  返回ele元素开始和结束标签之间的文本和HTML内容。

• ele.innerHTML = "content"

  设置ele元素开始和结束标签之间的HTML内容为content（文本和HTML内容）。

• ele.className

  返回ele元素的class属性。

• ele.className = "myclass"

  设置ele元素的class属性为cls（替换而不是添加）。

<ul id="list">
	<li><i>第一项</i></li>
	<li class="on"><b>第二项</b></li>
	<li>第三项</li>
</ul>

<script>
   var lis=document.getElementById("list").getElementsByTagName("li");
   for(var i=0,len=lis.length; i<len; i++){
	   console.log(lis[i].innerHTML);
       // <i>第一项</i>
       // <b>第二项</b>
       // 第三项
	   lis[i].innerHTML+='内容';
	   lis[1].className="current";     
   }
   console.log(lis[1].innerHTML); // <b>第二项</b>内容
   console.log(lis[1].className);  // current
</script>

4、属性设置和获取

• 获取属性

ele.getAttribute(“attribute”)

1. ele 是要操作的 dom对象
2. attribute 是要获取的 html属性(如：id，type)

• 设置属性

ele. setAttribute(“attribute”, value)

1. ele 是要操作的 dom对象
2. attribute 为要设置的属性名称
3. value 为设置的 attribute属性的值

• 删除属性

ele.removeAttribute（“attribute”）

1. ele 是要操作的 dom对象
2. attribute 是要删除的属性名称

• 对于HTML标签自带的属性可以直接 标签变量.属性名 访问。

<p id="text" class="text" align="center" data-type="title">文本</p>
<input type="text" name="user" value="user" id="user" validate="true">

<script>
	var p=document.getElementById("text");
	var user=document.getElementById("user");
	
	console.log(p.getAttribute("class"));  // text
	console.log(p.className);   // text （className 比较特殊）
	console.log(p.align);       // center
	console.log(user.getAttribute("validate"));  // true
	
	// 给p设置一个data-color的属性
	p.setAttribute("data-color","red");
	
	// 给input设置一个isRead的属性
	user.setAttribute("isRead","false");
	
	// 删除p上的align属性
	p.removeAttribute("align");
</script>

二、Js 事件

​ 事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

​ 在事件触发的函数中，this 是对调用DOM对象的引用。

1、Html 事件

​ 在HTML元素上直接绑定事件。

<tag 事件 = “执行脚本” > </tag>

<input type="button" value="弹 出" onclick="alert('我是按钮')">
	
<!--鼠标划过按钮时调用mouseoverFn的函数-->
<div class="btn" onmouseover="mouseoverFn(this,'#f00')" onmouseout="mouseoutFn(this,'#ff0')">开始</div>


<div class="btn" onmouseover="mouseoverFn(this,'#0f0')" onmouseout="mouseoutFn(this,'#333')">结束</div>

<script>
	function mouseoverFn(btn,bgColor){
		btn.style.background=bgColor;
	}
	function mouseoutFn(btn,bgColor){
		btn.style.background=bgColor;
	}
</script>

2、Dom 0级 事件

​ 在DOM对象上绑定事件。

ele.事件 = 执行脚本

<div class="box" id="btn1">DIV</div>
<div class="lock" id="btn2">锁定</div>
<script>
	// 获取按钮
	var btn1=document.getElementById("btn1");
	var btn2=document.getElementById("btn2");
	
	function clickBtn(){
	   alert("我是按钮");
	}
	// 给按钮绑定事件,注意绑定时不能带括号
	btn1.onclick=clickBtn;
	
	// 给按钮绑定事件(匿名函数),this是对该DOM元素的引用
	btn2.onclick=function(){
	   if(this.innerHTML=="锁定"){
		   this.className="unlock";
		   this.innerHTML="解锁";
	   }else{
		   this.className="lock";
		   this.innerHTML="锁定";
	   }
	}
</script>

3、鼠标事件

事件名称	描述
onclick	在对象被点击时发生
onmouseover	在鼠标移动到对象时发生
onmouseout	在鼠标移出对象时发生
onmouseup	在鼠标按键被松开时发生
onmousemove	鼠标在对象上移动时发生
onmousedown	在鼠标按键被按下时发生
onsubmit	在表单中的确认按钮被点击时触发(主要用在 form标签)
onresize	在窗口大小被调整时发生(主要用于window上)
onscroll	在滚动条被拖动时触发

<head>
	<style>
	   body{height:2000px;}
       .box{width:200px;height:200px;background:#f00;overflow:auto;}
	</style>
</head>
<body>
	<div class="box" id="box">
		<p>拖动</p>
		<p>拖动</p>
	</div>
	<script>
		var box=document.getElementById("box");
		// 绑定按下的事件
		box.onmousedown=function(){
		  console.log("我被按下了");
		}
		// 绑定移动的事件
		box.onmousemove=function(){
		  console.log("我被移动了");
		}
		// 绑定松开的事件
		box.onmouseup=function(){
		  console.log("我被松开了");
		}
		// 绑定点击的事件
		box.onclick=function(){
		  console.log("我被点击了");
		}
		// 浏览器窗口尺寸发生改变时
		window.onresize=function(){
		  console.log("我的尺寸被改变了");
		}
		// 拖动滚动条
		window.onscroll=function(){
		  console.log("我被拖动了");
		}
		box.onscroll=function(){
		  console.log("我是DIV的滚动条");
		}
	</script>
</body>

4、键盘事件

onkeydown	事件会在用户按下一个键盘按键时发生
onkeypress	事件会在键盘按键被按下并释放一个键时发生
onkeyup	事件会在键盘按键被松开时发生
keyCode	获取按下的键盘按键的字符代码（配合键盘事件使用）

<div>
	<p class="text">
		<b id="showcount">您还可以输入</b>
		<span id="totalbox"><em id="count">30</em>/30</span>
	</p>
	<div class="input">
		<textarea name="" id="text" cols="70" rows="4"></textarea>
	</div>
</div>
<script>
	// 获取文本框及其他元素
	var text=document.getElementById("text");
	var total=30;
	var count=document.getElementById("count");
	var showcount=document.getElementById("showcount");
	var totalbox=document.getElementById("totalbox");
	// 绑定键盘事件
	document.onkeyup=function(){
		// 获取文本框值的长度
		var len=text.value.length;
		// 计算可输入的剩余字符
		var allow=total-len;
		var overflow=len-total;
		// 如果allow小于0
		if(allow<0){
			showcount.innerHTML="您已超出"+overflow;
			totalbox.innerHTML='';
		}else{
			showcount.innerHTML='您还可以输入';
			totalbox.innerHTML='<em id="count">'+allow+'</em>/30';
		}
	}
</script>

5、其他常用事件

事件名称	描述	备注
onload	在页面元素加载完成后立即发生	–
onblur	在对象失去焦点时发生	主要用于表单中
onfocus	在对象获得焦点时发生	主要用于表单中
onchange	在域的内容改变时发生	主要用在 select标签

• onload

  在页面或图像加载完成后立即发生。（注意html 文档的加载顺序）

<head>
	<script>
	   // 页面加载时执行，unload页面卸载
       window.onload=function(){
       	 var box=document.getElementById("box");
       	 var clicked=function(){
       	 	  alert('我被点击了');
       	 }
       	 box.onclick=clicked;
       }
	</script>
</head>
<body>
	<div id="box">这是一个DIV</div>
</body>

• onfocus、onblur

<head>
	<script>
       window.onload=function(){
       	  var phone=document.getElementById("phone"), // 获取文本框
              tip=document.getElementById("tip");     // 获取提示框
          phone.onfocus=function(){       // 文本框绑定激活事件
          	  tip.style.display='block';  // 让提示框显示
          }
          
          phone.onblur=function(){     // 文本框绑定失去焦点事件
             var phoneVal=this.value;  // 获取文本框的值
             // 判断手机号码是否是11位的数字
             if(phoneVal.length==11 && isNaN(phoneVal)==false){
                tip.innerHTML='<img src="img/right.png">';
             }else{
             	tip.innerHTML='<img src="img/error.png">';
             }
          }
       }
	</script>
</head>
<body>
	<div>
		<input type="text" id="phone" placeholder="请输入手机号码">
		<div class="tip" id="tip" display="none">请输入有效的手机号码</div>
	</div>
</body>

• onchange

<head>
	<script>
		window.onload=init;  // 绑定onload事件
		function init(){
			var menu=document.getElementById("menu");  // 获取下拉菜单

			// 给菜单绑定change事件,一般作用域select或checkbox或radio
			menu.onchange=function(){
				// 获取当前选中的值
				var bgcolor=menu.options[menu.selectedIndex].value;
				// var bgcolor=this.value;  // 和上句等价
				 
				if(bgcolor==""){
				   document.body.style.background="#fff";
				}else{
					document.body.style.background=bgcolor;
				}
			}
		}
	</script>
</head>
<body>
	<div class="box">
		请选择您喜欢的背景色：
		<select name="" id="menu">
			<option value="">请选择</option>
			<option value="#f00">红色</option>
			<option value="#0f0">绿色</option>
			<option value="#00f">蓝色</option>
			<option value="#ff0">黄色</option>
			<option value="#ccc">灰色</option>
		</select>
	</div>
</body>