学习总结——DOM
DOM（Document Object Model），即文档对象模型。DOM是针对HTML和XML文档的一个API，它描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。在定义方面，我理解得尚不是非常透彻。但DOM树是前端工程师在学习javascript过程中非常重要的一部分，所以今天且把一些我最近常用到的内容总结一下吧。
1、元素节点方法
通过ID获取元素节点：document.getElementById();
通过标签名获取元素节点：document.getElementByTagName();
通过名字获取获取元素节点：document.getElementByName();
获取节点属性：getAttribute(属性名);
设置节点属性：setAttribute(属性名,属性值);
删除节点属性：removeAttribute(属性名);
2、节点属性
注意：
1、在使用childnodes获取子节点时，换行符（不可见）也会当作一个子节点，且nodeType等于3；
2、当获取body的childnodes时，若</body>闭标签后面插入了<script></script>标签，浏览器(包括FF、IE和chrome等)在渲染DOM树的时候，会把<script>节点渲染成<body>的子节点。
注意，当在<head></head>标签内插入<script></script>时则不会导致这种情况。为了搞清楚这个问题，我找来了DOM树的结构图。我的理解是，因为DOM树的根部结构都是固定为DOCUMENT->HTML->HEAD和BODY的，而浏览器在渲染时为了遵循这种规则，就统一把body后面的script解析到body内部。也就是说浏览器将script渲染成body的子节点，不然若把script直接渲染成html的子节点的话，就会破坏DOM树的标准结构。也就是说，浏览器之所以这样做是为了规范以及标准，因为script标签原则上是放在head或body内部的。所以不推荐大家把javascript代码置在body之后，这是一种不规范的做法。
3、节点关系
childNodes：所有子节点（包含换行符和空格）
children：所有是标签类型的子节点（直接子节点，不包括孙子等）
parentNode：父节点
nextSibling：下一个兄弟节点（记得去换行符和空格）
previousSibling：上一个兄弟节点
firstChild : 第一个子节点
lastChild：最后一个子节点
注意：使用后四个关系（即next、previous、first和last）获取节点时，在IE下会存在写法上的差异，所以我们在使用时常常要写兼容性方法。
//兼容IE的方法
1 function fnNext(obj){ //下一个兄弟节点 2 return obj.nextElementSibling ? obj.nextElementSibling : obj.nextSibling; 3 } 4 5 function fnpre( obj ){ //上一个兄弟节点 6 return obj.previousElementSibling ? obj.previousElementSibling : obj.previousSibling; 7 } 8 9 function fnFirst(obj){ //第一个子节点 10 return obj.firstElementChild ? obj.firstElementChild : obj.firstChild; 11 } 12 13 function fnLast(obj){ //最后一个子节点 14 return obj.lastElementChild ? obj.lastElementChild : obj.lastChild; 15 }
4、获取元素尺寸和位置
获取内联样式的宽高：Element.style.width/height (只能获取写在标签style内的样式)
获取可视区域大小：clientWidth/clientHeight (包括padding，但不包括margin和border)
获取元素实际大小：offsetWidth/offsetHeight (包括border、内填充和滚动条，但不包括margin)
获取定位父节点：offsetParent （相对定位的父容器，定位不一定根据父节点）
获取相对位置：offsetLeft/Top/Right/Bottom（相对于父定位容器的位置）
注意：在offsetParent 中，如果本身父元素是<body>，非IE 返回body 对象，IE 返回html 对象。（IE总是那么我行我素，￣□￣｜｜）
5、获取应用样式
比较少用，以下两个我都没有用过，这里仅作为拓展认识。
currentStyle：ie所支持的获取非行间样式的方法
用法：对象.currentStyle.样式名
例：oDiv.currentStyle.width
getComputedStyle：非ie所支持的获取非行间样式的方法
用法：getComputedStyle(对象，伪类).样式名
例：getComputedStyle(oDiv,null).color
6、操作节点方法
createElement("标签名") : 创建新元素；
createTextNode("") : 创建文本节点；
创建方法：document.createElement('div');
appendChild(node) : 向childNodes末尾插入一个节点node
insertBefore(node,targetNode) : 向targetNode之前插入节点node
replaceChild(newNode,oldNode) : newNode替换节点oldNode
removeChild(node) : 移除父节点的某个子节点
PS：下一篇会写到DOM应用的实例，灵活使用DOM的节点操作方法，是一个很强大的功能。
