JavaScript 基础（5）DOM（DocumentObjectModel文档对象模型）——DOM基础、DOM事件

JavaScript分为三个部分：ECMAScript(JS语言本身基础语法)，DOM(文档对象模型，应用程序编程接口)，BOM(浏览器对象模型)。

一、DOM基础

在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

（一）DOM查找方法

    dom有2种查找方法：document.getElementById()、document.getElementsByTagName()

    1.document.getElementById() 按id属性查找

        语法：document.getElementById("id");

        功能：返回拥有指定id的 第一个对象的引用

        返回值：dom对象

        说明：id为DOM元素上id属性的值

<div id="div1"><p>测试</p></div>
<script>
	var div = document.getElementById("div1");
	console.log(div);    //返回值为：<div id="div1"><p>测试</p></div>
</script>

    2.document.getElementsByTagName() 按标签名查找

        语法：document.getElementsByTagName("tag");

        功能：返回一个对所有tag标签引用的集合

        返回值：数组  

        说明：tag为要获取的标签名称

<div><p>测试1</p></div>
<div><p>测试2</p></div>
<div><p>测试3</p></div>
<div><p>测试4</p></div>
<script>
	var divs = document.getElementsByTagName("div");    //会得到一个数组集合，就算只有一个元素也是数组的形式
	console.log(divs[0]);    //访问单独元素数组下标的形式 <div><p>测试1</p></div>
</script>

（二）设置元素的相关属性

1.style属性    元素样式属性

    语法：ele.style.styleName = styleValue；

    功能：设置元素的CSS样式。

    说明：  （1）ele为要设置样式的dom对象

                （2）styleName为要设置的样式名称（CSS中的样式为font-size,这里就要写成fontSize）

                （3）styleValue为要设置的样式值

<div><p>测试1</p></div>
<div><p>测试2</p></div>
<div><p>测试3</p></div>
<div><p>测试4</p></div>
<script>
	var divs = document.getElementsByTagName("div");
	divs[0].style.backgroundColor = "red";    
</script>

结果为:

2.innerHTML属性    返回（设置）ele开始和结束标签之间的HTML

（1）获取

    语法：ele.innerHTML；

    功能：返回ele元素开始和结束标签之间的HTML。 

<div id="div1"><p>测试1</p></div>
<div><p>测试2</p></div>
<div><p>测试3</p></div>
<div><p>测试4</p></div>
<script>
	var div1=document.getElementById("div1");
	console.log(div1.innerHTML);    //返回值 <p>测试1</p>
</script>

（2）设置

    语法：ele.innerHTML = "html"；

    功能：设置ele元素开始和结束标签之间的HTML内容为html。

<div id="div1"><p>测试1</p></div>
<div><p>测试2</p></div>
<div><p>测试3</p></div>
<div><p>测试4</p></div>
<script>
	var div1=document.getElementById("div1");
	div1.innerHTML = "<span>替换之前的内容</span>";
	console.log(div1.innerHTML);    //返回值 <span>替换之前的内容</span>
</script>

3.className属性    设置（返回）元素的class属性

（1）获取

    语法：ele.className

    功能：返回ele元素的class属性

<div id="div1" class="red"><p>测试1</p></div>
<div><p>测试2</p></div>
<script>
	var div1=document.getElementById("div1");
	console.log(div1.className);    //返回值 red
</script>

（2）设置

    语法：ele.className = "cls";

    功能：设置ele元素的class属性为cls

<div id="div1" class="red"><p>测试1</p></div>
<div><p>测试2</p></div>
<script>
	var div1=document.getElementById("div1");
	div1.className = "greem";
	console.log(div1.className);    //返回值为green 
</script>

并且

4.getAttribute()    获取ele元素的属性（包括自定义属性）的值

    语法：ele.getAttribute("attribute");

    功能：获取ele元素的attribute属性的值（包括自定义属性）

    说明：

             （1）ele是要操作的dom对象

            （2）attribute是要获取的html属性

<div id="div1" class="red" data-name="poorpenguin"><p>测试1</p></div>    <!--自定义的html属性最好是以data-XXX这种写法-->
<div><p>测试2</p></div>
<script>
	var div1=document.getElementById("div1");

	console.log(div1.getAttribute("class"));	//返回值 red	
	console.log(div1.getAttribute("data-name"));    //返回值 poorpenguin
</script>

5.setAttribute()    设置ele元素的属性（包括自定义属性）

    语法：ele.setAttribute("attribute",value);

    功能：在ele元素上设置属性

    说明：

            （1）ele是要操作的dom对象

            （2）attribute为要设置的属性名称

            （3）value为设置的attribute属性的值

<div id="div1" class="red" data-name="poorpenguin"><p>测试1</p></div>
<div><p>测试2</p></div>
<script>
	var div1=document.getElementById("div1");
	div1.setAttribute("data-type","test")
	console.log(div1.getAttribute("data-type"));    //返回值test		
</script>

6.removeAttribute("attribute")    删除ele上的attribute属性

    语法：ele.removeAttribute("attribute");

    功能：删除ele上的attribute属性

    说明：    

                （1）attribute是要删除的属性名称（可以是id、class或自定义）可用于消除样式

                （2）ele是要操作的dom对象

二、DOM事件    

（一）HTML事件

直接在HTML元素标签内添加事件，执行脚本。

基本语法：<tag 事件=“执行脚本”></tag>

功能：在HTML元素上绑定事件

说明：执行脚本可以是一个函数调用。

（二）DOM0级事件

和HTML事件不同的是DOM0事件是在js中获取dom元素，并为该dom元素绑定事件

语法：ele.事件=执行脚本

功能：在DOM对象上绑定事件

说明：执行脚本可以是一个匿名函数，也可以是一个函数调用。

举个例子:

<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<script type="text/javascript">
	var btnEle1 = document.getElementById("btn1");
	var btnEle2 = document.getElementById("btn2");
	var btnEle3 = document.getElementById("btn3");


	btnEle1.onclick=fn1;	//绑定一个函数调用
	function fn1(){
		alert("测试");
	};


	var fn2 = function(){
		alert("测试");
	}
	btnEle2.onclick=fn2;


	btnEle3.onclick=function(){
		alert("测试");
	}
</script>

ps:注意，绑定函数名后面不要加()

（三）鼠标事件

事件名称	定义和用法	语法	注释
onclick	在对象被点击时发生	ele.onclick="JS代码"
onmouseover	在鼠标移动到对象上面时发生	ele.onmouseover="JS代码"
onmouseout	在鼠标移出对象时发生	ele.onmouseout="JS代码"
onmouseup	在鼠标按键松开时发生	ele.onmouseup="JS代码"
onmousemove	在鼠标在对象上移动时发生	ele.onmouemove="JS代码"
onmousedown	在鼠标按键按下是发生	ele.onmousedown="JS代码"
onload	在页面元素加载完成后立即执行	window.onload=function(){"JS代码"}
onblur	在对象失去焦点时发生	ele.onblur="JS代码"
onfocus	在对象获取焦点时发生	ele.onfocus="JS代码"
onchange	在域的内容改变时发生	..	主要用在<select>标签
onsubmit	在表单中的确认按钮被点击时触发	ele(表单dom元素).onsubmit="JS代码"	主要用在<form>标签
onresize	在浏览器窗口大小被调整时发生	window.onresize="JS代码"	主要用在window上
onscroll	在滚动条被拖动时触发(可以是浏览器，也可以是dom元素)	onscroll="JS代码"

    

（四）键盘事件

事件名称	定义和用法	语法	注释
onkeydown	事件会在用户按下一个键盘按键时发生	document.onkeydown="JS代码"
onkeypress	事件会在键盘按键按下并释放一个键时发生	document.onkeypress="JS代码"
onkeyup	事件会在键盘按键被松开时发生	document.onkeyup="JS代码"
keyCode	获取按下的键盘按键的字符代码	event.keyCode	返回键盘事件触发的键的字符代码，配合键盘事件使用

例子：最多输入文字个数判断

<html>
    <head lang="en">
	    <meta charset="UTF-8">
	    <title>输入文本</title>
	</head>
	<body>
		<p>字数限制在30字内，<span>您还可以输入<b>30</b>字</span></p>
		<textarea cols="50"  rows="7"  id="text"></textarea>
		<script type="text/javascript">
			var span = document.getElementsByTagName('span')[0];
			var text = document.getElementById('text');

			document.onkeyup = function(){
				var count = 30 - text.value.length;
				if(count>=0){
					span.innerHTML = "您还可以输入<b>"+count+"</b>字";
				}
				else{
					count = Math.abs(count);
					span.innerHTML = "您已超出<b>"+count+"</b>字";
				}
			}
		</script>
	</body>
</html>

（五）鼠标事件的相关例子

1.onchange事件在<select>中的应用以及<option>元素的获取方法

<!DOCTYPE html>
<html>
    <head lang="en">
	    <meta charset="UTF-8">
	    <title>onchange()</title>
	    <style type="text/css">
	    	#div{
	    		width:300px;
	    		height:300px;
	    		border:2px solid gray;
	    		margin:100px  0  0 200px;
	    	}
	    </style>
	    <script type="text/javascript">
	       	window.onload=function(){	//dom文档加载完成后再执行
	       		var selectEle = document.getElementById("color");
	       		var divEle = document.getElementById("div");
	       		selectEle.onchange=changeBackgroundColor;

	       		// 改变div背景颜色
	       		function changeBackgroundColor(){
	       			var optionEle = this.options[this.selectedIndex];	//只有这种方式才能取到option中的文本,this.value只能获取当前选取的值而不是option元素
					if(optionEle.value == 0){
						divEle.style.background = "#FFF";
						divEle.innerHTML = "我没有任何变化";
					}else{
						divEle.style.background = optionEle.value;
						divEle.innerHTML = "我的背景颜色变成了"+optionEle.value+optionEle.innerHTML;
					}	       			
	       		}
	       	}
	    </script>
	</head>
	<body>
        <div>
        	<span>请选择您喜欢的颜色:</span>
        	<select id="color">
        		<option value="0">请选择</option>
        		<option value="yellow">黄色</option>
        		<option value="orange">橘色</option>
        		<option value="pink">粉色</option>
        		<option value="purple">紫色</option>
        	</select>
        </div>
		<div id="div">我是div</div>
 </body>
</html>