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属性获取一组元素节点对象

获取元素节点的子节点：

• getElementsByTagName()  ---注意是元素对象。
• 返回当前节点的指定标签名后代节点
• childNodes
• 表示当前节点的所有子节点
• firstChild
• 表示当前节点的第一个子节点
• lastChild
• 表示当前节点的最后一个子节点

获取父节点和兄弟节点

• parentNode
• 属性，表示当前节点的父节点
• previousSibling
• 属性，表示当前节点的前一个兄弟节点
• nextSibling
• 属性，表示当前节点的后一个兄弟节点

元素节点的属性

  获取： 元素对象.属性名

例：element.value

element.id

element.className

设置 ： 元素对象.属性名=新的值

例：element.value = “hello”

element.id = “id01”

element.className = “newClass”

注意class属性例外

在document中有一个属性body，它保存的是body的引用:

• var body = document.body;  它保存的是body的引用

• var html = document.documentElement; 保存的是html根标签

• var all = document.all;    代表页面中所有的元素
  等价于: all = document.getElementsByTagName("*");

getElementsByClassName()

可以根据class属性值获取一组元素节点对象，但是该方法不支持IE8及以下的浏览器

其他属性

nodeValue ： 文本节点可以通过nodeValue属性获取和设置文本节点的内容

innerHTML： 元素节点通过该属性获取和设置标签内部的html代码

使用CSS选择器进行查询

querySelector()

querySelectorAll()

这两个方法都是用document对象来调用，两个方法使用相同， 都是传递一个选择器字符串作为参数，方法会自动根据选择器 字符串去网页中查找元素。 不同的地方是querySelector()只会返回找到的第一个元素，而 querySelectorAll()会返回所有符合条件的元素。
 

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

节点的修改

这里的修改我们主要指对元素节点的操作。

创建节点  ：document.createElement(标签名)

					//创建广州节点 <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);

删除节点 ：父节点.removeChild(子节点)

替换节点 ：父节点.replaceChild(新节点 , 旧节点)

插入节点 ：

父节点.appendChild(子节点)

父节点.insertBefore(新节点 , 旧节点)

通过DOM操作CSS

通过style属性设置和读取的都是内联样式,无法读取样式表中的样式.

D

					//修改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);

 

 clientWidth：

 clientHeight：

 这两个属性可以获取元素的可见宽度和高度

 这些属性都是不带px的，返回都是一个数字，可以直接进行计算

会获取元素宽度和高度，包括内容区和内边距

 这些属性都是只读的，不能修改

offsetWidth

offsetHeight

获取元素的整个的宽度和高度，包括内容区、内边距和边框

 offsetParent

可以用来获取当前元素的定位父元素

会获取到离当前元素最近的开启了定位的祖先元素

如果所有的祖先元素都没有开启定位，则返回body

offsetLeft

 当前元素相对于其定位父元素的水平偏移量

offsetTop

当前元素相对于其定位父元素的垂直偏移量

scrollWidth

scrollHeight

可以获取元素整个滚动区域的宽度和高度

当满足scrollHeight - scrollTop == clientHeight

        说明垂直滚动条滚动到底了

   当满足scrollWidth - scrollLeft == clientWidth

        说明水平滚动条滚动到底

        alert(box4.scrollHeight - box4.scrollTop); // 600