JavaScript基础（六）

1、DOM简介
节点：构成HTML文档最基本的单元。
常用节点分为四类：
文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本结点：HTML标签中的文本内容
2、事件：用户和浏览器之间的交互行为。
3、文档的加载
onload事件会在整个页面加载完成之后才触发。
为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样就可以确保我们的代码执行时所有的DOM对象已经加载完毕了。

window.onload = function(){
	js语句；
};

4、dom查询
获取元素节点

• 通过document对象调用：
  getElementById() :通过id属性获取一个元素节点对象
  getElementsByITagName() :通过标签名属性获取一组元素节点对象
  getElementsByName() :通过name属性获取一组元素节点对象
• innerHTML用于获取元素内部的HTML代码，对于自结束标签，该属性没有意义。
• 如果需要读取元素节点属性：
  直接使用：元素.属性名。 如：元素.name
  注意：class属性不能采用这种方式， 方法：元素.className
  5、
  获取元素节点的子节点
• 通过具体的元素节点调用
  getElementsByITagName() :方法，返回当前节点的指定标签名后代节点
  chileNodes：属性，表示当前节点的所有子节点
  该属性会获取包括文本结点在内的所有节点
  firstChild：属性，表示当前节点的第一个子节点
  lastChild：属性，表示当前节点的最后一个子节点
  获取父节点和兄弟节点
• 通过具体的节点调用
  parentNode:属性，表示当前节点的父节点
  previousSibling：属性，表示当前节点的前一个兄弟节点
  nextSibling：属性，表示当前节点的后一个兄弟节点
• 定义一个函数。专门用来为指定元素绑定单击响应函数

参数：
	idStr：要绑定单击响应函数的对象的id属性值
	fun：事件的回调函数，当单击元素时，该函数将会被触发
function myClick(idStr , fun){
	var btn = document.getElementById(idStr);
	btn.onlick = fun;
}

innerText
该属性可以获取到元素内部的文本内容
他和innerHTML类似，不同的是它会自动将html去除。
6、
获取body标签：var body = document.body;
获取html根标签：var html = document.documentElement;
获取页面中所有元素：var all = document.all;
需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点的对象：

document.querySelector()

该方法总会返回唯一的一个元素，若满足条件的有多个，仍只返回第一个元素。
虽然IE8中没有getElementsByClassName()，但是可以使用上述方法代替。
document.querySelectorAll()：和上述方法类似，但不同的是他会将符合条件的元素封装到一个数组中。就算只有一个元素，也会返回数组。
7、
document.createElement()：可以用于创建一个元素节点对象。
他需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回。
document.createTextNode()：可以用来创建文本节点对象。
需要一个文本内容作为参数，将会根据该内容创建文本结点，并将新的节点返回
appendChild()：向一个父节点中添加一个新的子节点。
用法：父节点.appendChild(子节点)；
insertBefore()：可以在指定的子节点前插入新的子节点。
用法：父节点.insertBefore(新节点,旧节点);
replaceChild()：可以使用指定的子节点替换已有的子节点。
用法：父节点.replaceChild(新节点,旧节点);
removeChild()：删除一个子节点。
用法：父节点.removeChild(子节点);
子节点.parentNode.removeChild(子节点)：对于父节点不明确的子节点
8、
confirm()：用于弹出一个带有确认和取消按钮的提示框。
需要一个字符串作为参数，该字符串将会作为提示文字显示出来。
如果用户点击确认，将返回true；点击取消，返回false。

• 删除tr的响应函数。 -----T104尚硅谷

9、使用DOM操作

• 通过JS修改元素的样式
  语法： 元素.style.样式名=样式值
  注意：如果样式名含有-，在JS中使不合法的。需要将这种样式名改为驼峰命名。
  我们通过style属性设置的样式都是内联样式，而内联样式具有较高的优先级，所以修改后往往会立即显示。
  但如果是在样式中写了！important，此时样式会有最高的优先级。
• 读取样式
  语法：元素.style.样式名
  通过style属性设置和读取到的都是内联样式，无法读取样式表的中的样式。
  10、读取样式拓展
  获取元素的当前显示的样式：
  语法：元素.currentStyle.样式名
  他可以用来读取当前元素正在显示的样式。
  但只有IE浏览器支持。
  在其他浏览器中可以使用getComputedStyle()这个方法来获取元素当前样式。
  这个方法时window方法，可以直接使用。
  需要两个参数：
  1、要获取样式的元素
  2、可以传递一个伪元素，一般都传递null
  该方法会返回一个对象，对象中封装了当前元素对应的样式。
  可以通过对象.样式名来读取样式，如果获取的样式没有设置，则会获取到真实的值，而不是默认值。
  但是该方法不支持IE8及以下的浏览器。
  正常浏览器的方式：

alert(getComputedStyle(box1,null).backgroundColor);

IE8的方式：

alert(box1.curremtStyle.backgroundColor);

• 定义一个函数，用来获取指定元素的当前样式：

参数：
	obj	要获取样式的元素
	name	要获取的样式名
function getStyle(obj,name){
	if(window.getComputedStyle) {
			//正常浏览器的方式，具有getComputedStyle()方法
		return getComputedStyle(obj, null)[name];
	} 
	else {
			//IE8的方式，没有getComputedStyle()方法
		return obj.currentStyle[name];
	}
		//return window.getComputedStyle?getComputedStyle(obj, null)[name]:obj.currentStyle[name];

11、其他样式操作的属性

• clientWidth
  clientHeight
  这两个属性可以获取元素的可见宽度和高度。
  这些属性都是不带px的，返回都是一个数字，可以直接进行计算。
  会获取元素宽度和高度，包括内容区和内边距。
  这些属性都是只读的，不能修改。

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

• offsetParent：用来获取当前元素的定位父元素。
  他会获取到离当前元素最近的开启了定位的祖先元素。
  如果所有的祖先元素都没有开启定位，将会返回body。

• offsetLeft：当前元素相对于其定位父元素的水平偏移量。
  offsetTop：当前元素相对于其定位父元素的垂直偏移量。

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

• scrollLeft：获取水平滚动条滚动的距离
  scrollTop：获取垂直滚动条滚动的距离
  当满足 scrollHeight- scrollTop == clientHeight时，说明垂直滚动条滚动到底了。
  当满足 scrollWidth- scrollLeft == clientWidth时，说明水平滚动条滚动到底了。
  onscroll：该事件会在元素的滚动条滚动时触发。
  为表单项添加disabled="disabled",则表单项将变成不可用状态。
  disabled属性可以设置一个元素是否禁用，若为true，则禁用；为false，则可用。
  12、事件对象：当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数。
  在事件对象中，封装了当前事件相关的一切信息，如鼠标的坐标，鼠标滚轮滚动的方向，键盘哪个键被按下。

• onmousemove：该事件将会在鼠标在元素移动时被触发。

• clientX：可以获取鼠标指针的水平坐标
  clientY：可以获取鼠标指针的垂直坐标
  （用于获取鼠标在当前的可见窗口的坐标，div的偏移量是相对于当前页面的坐标）
  在IE8中，响应函数被触发时，浏览器是不会传递事件对象的。
  在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的。
  pageX，pageY可以获取鼠标相当于当前页面的坐标，但在IE8中不支持。