[JavaScript知识库]javascript基础（10)--DOM和事件

DOM:文档对象模型

• 文档：文档表示的就是整个的HTML网页文档
• 对象：对象表示将网页中的每一个部分都转换为了一个对象，将页面每个元素转换为对象
• 模型：倒树，体现节点对象之间的关系。
• 通过js操作html中的元素，如：h1, head等。

节点：

节点：Node——构成HTML文档最基本的单元 ，常用节点分为四类。

• 文档节点：整个HTML文档
• 元素节点：HTML文档中的HTML标签
• 属性节点：元素的属性
• 文本节点：HTML标签中的文本内容

浏览器已经为我们提供?文档节点?对象这个对象是window属性,可以在页面中直接使用，文档节点代表的是整个网页.
?

			//获取到button对象
			var btn = document.getElementById("btn");
			//修改按钮的文字
			btn.innerHTML = "I'm Button";

事件

事件，就是用户和浏览器之间的交互行为，比如：点击按钮，鼠标移动、关闭窗口等。

处理方式：

我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码将会执行，这种写法我们称为结构和行为耦合，不方便维护，不推荐使用。

<button id="btn" onmousemove="alert('你好');">我是一个按钮</button>

可以为按钮的对应事件绑定处理函数的形式来响应事件，这样当事件被触发时，其对应的函数将会被调用.像这种为单击事件绑定的函数，我们称为单击响应函数.

			btn.onclick = function(){
				alert("你好");
			};

3 文档的加载

加载顺序:??浏览器在加载一个页面时，是按照自上向下的顺序加载的,读取到一行就运行一行,如果将script标签写到页面的上边,在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载,会导致无法获取到DOM对象。如果写到前面,需要onload事件。

onload:?onload事件会在整个页面加载完成之后才触发,为window绑定一个onload事件,该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了.
?

			window.onload = function(){
				//获取id为btn的按钮
				var btn = document.getElementById("btn");
				

4. DOM查询（获取元素节点）

?通过document对象调用

• getElementById()：
• 通过id属性获取一个元素节点对象
• getElementsByTagName()
• 通过标签名获取一组元素节点对象
• getElementsByName()
• 通过name属性获取一组元素节点对象

                //获取class为box1中的所有的div
				//.box1 div
				/*
				 * document.querySelector()
				 * 	- 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
				 * 	- 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
				 * 	- 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
				 */
				var div = document.querySelector(".box1 div");
				
				var box1 = document.querySelector(".box1")

					//创建广州节点 <li>广州</li>
					//创建li元素节点
					/*
					 * document.createElement()
					 * 	可以用于创建一个元素节点对象，
					 * 	它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
					 * 	并将创建好的对象作为返回值返回
					 */
					var li = document.createElement("li");

                    // 创建文本节点
                    var gzText = document.createTextNode("广州");
                    //将gzText设置li的子节点
    					/*
					 * appendChild()
					 * 	 - 向一个父节点中添加一个新的子节点
					 * 	 - 用法：父节点.appendChild(子节点);
					 */
					li.appendChild(gzText);
					
					//获取id为city的节点
					var city = document.getElementById("city");
					
					//将广州添加到city下
					city.appendChild(li);

					//修改box1的宽度
					/*
					 * 通过JS修改元素的样式：
					 * 	语法：元素.style.样式名 = 样式值
					 * 
					 * 注意：如果CSS的样式名中含有-，
					 * 		这种名称在JS中是不合法的比如background-color
					 * 		需要将这种样式名修改为驼峰命名法，
					 * 		去掉-，然后将-后的字母大写
					 * 
					 * 我们通过style属性设置的样式都是内联样式，
					 * 	而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
					 * 
					 * 但是如果在样式中写了!important，则此时样式会有最高的优先级，
					 * 	即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效
					 * 	所以尽量不要为样式添加!important

/*
					 * 获取元素的当前显示的样式
					 * 	语法：元素.currentStyle.样式名
					 * 它可以用来读取当前元素正在显示的样式
					 * 	如果当前元素没有设置该样式，则获取它的默认值
					 * 
					 * currentStyle只有IE浏览器支持，其他的浏览器都不支持
					 */
					
					//alert(box1.currentStyle.width);
					//box1.currentStyle.width = "200px";
					//alert(box1.currentStyle.backgroundColor);