JavaScript基础知识（二）

一.DOM节点操作
①动态创建DOM节点
var obj = document.createElement(tagName);

②动态的把1个DOM节点，插入到文档中。必须把这个节点作为儿子节点，插入到1个已有的DOM节点中
换言之，就是必须先拿到这个节点的父节点，然后把这个新节点当成儿子节点插入进去
fatherObj.appendChild(obj);

③在任意位置插入新节点
fatherObj.insertBefore(新节点,参照节点);
其中，参照节点可以给null，如果给null,那么代表把新节点插入到父节点内部的末尾

④删除节点
fatherObj.removeChild(childNode);
在DOM操作里，所有的创建，插入，删除操作。都必须通过父节点来插入子节点和删除子节点

⑤节点的文本操作
innerText会原封不动的显示字符串文本。
innertHTML会解析这个字符串，如果该字符串中有HTML标记的成分，他就会按照HMTL的规范，把这些部分翻译成标签来显示。
由于兼容性问题，我们一般都只用innerHTML，有的浏览器不认识innerText

⑥动态设置DOM元素的属性
写属性：obj.setAttribute(name,value);
读属性的值：obj.getAttribute(name);
二.获取盒子在页面上的实际大小
(1)offsetWith & offsetHeight 用来获取盒子在页面上的实际占有的大小
obj.style.width只能读取或者写入行内样式，对于非行内样式，它无法设置和读取
1.obj.offsetWith 宽
obj.offsetHeight 高
2.obj.style.width 与 obj.offsetWidth的区别
①obj.style.width属性是字符串，读取出来的数据是带有"px"的（不能直接做加减乘除的运算）
而obj.offsetWidth是数值类型，读出的数据没有"px"（可以直接做加减乘除）
②obj.style.width是可读可写的
offsetWidth是只读属性，不能修改。
③obj.style.width只能读取或者写入行内样式，对于非行内样式，它无法设置和读取
offsetWidth可以随时读取当前盒子的宽度，无论是行内样式还是非行内样式

注意：offsetWidth = width + padding + border

(2)offsetLeft & offsetTop 盒子与上级盒子的距离
注意，一定不能使用obj.style.left来计算距离
①obj.style.left，只能读写行内样式
offsetLeft能读取任何地方设置的样式
②obj.style.left是个字符串，带有“px”后缀
offsetLeft是数值类型，能直接做算数运算
③offsetLeft是只读的，obj.style.left是可读可写的
④offsetLeft读取的是距离上一级声明了定位方式的盒子的距离，如果没有任何1级父盒子声明了定位方式
那么offsetLeft读取的就是距离body的距离。如果多个父级盒子都声明了定位方式，那么以最近的那个盒子为准
⑤offsetLeft读取到的是边框到边框的距离（含有padding）

注意：只有offsetLeft和offsetTop，没有offsetRight和offsetBottom

(3)offsetParent
offsetParent获取当前盒子的父级盒子的DOM对象
跟父级盒子有没有声明定位方式有直接关系。
如果父级盒子声明了定位方式，那么offsetParent读取到的就是离他最近的那个声明了定位的上级盒子。
如果所有的上级盒子都没晟敏定位，那么offsetParent读出来的就是body标签对象
parentNode得到的永远是直接父节点
三.事件对象
事件对象就是用来帮我们获取，在js事件被触发时的一些列有用信息。
事件对象的名字，一般使用event，但这不是必须的，可以用任何合法的变量名。
IE浏览器的事件对象模型跟其他浏览器是不一样的。它需要使用window.event,而且，不需要在事件处理函数中声明event参数

document.onclick = function(event){
var evt = event || window.event;//兼容写法

（1）鼠标触发的事件：比如onclick，onmouseover
event.target : 获取事件源对象
event.srcElement : 获取事件源对象
event.type : 获取事件类型
event.clientX : 获取当前鼠标在网页上的横坐标,只跟网页的可视区域有关系
event.clientY : 获取当前鼠标在网页上的横坐标,只跟网页的可视区域有关系
event.screenX : 获取当前鼠标在当前显示器上的横坐标,
event.screenY : 获取当前鼠标在当前显示器上的横坐标,
evt.button : 获取鼠标点击的哪个键
（2）键盘触发的事件：比如onkeydown,onkeyup
event.keyCode : 获取点击的键盘键码，它不是ASCII码
evt.altKey : 获取是否点下了功能键（alt）,返回值是true or false
evt.shiftKey: 获取是否点下了功能键（shift）
evt.ctrlKey: 获取是否点下了功能键（ctrl）