dom(document object model):文档对象模型,
提供了获取页面中元素的方法:
document.getElementById();
context.getElementsByTagName(TAGNAME) //把指定容器中子子孙孙辈份的所有标签名为TAGNAME的都获取到
context.getElementsByClassName(CLASSNAME) //在ie6-8下不兼容
document.getElementsByName() //在ie浏览器中只对表单元素起作用
document.body
document.documentElement
context.querySelector/context.querySelectorAll //在ie6-8下不兼容 ,通过这个获取到的节点集合不存在DOM映射
描述节点和节点之间关系的属性(在标准浏览器中，会把空格和换行当做文本节点处理)
childNodes 获取所有的子节点
children - > 在ie6-8下获取的结果和标准浏览器获取的结果不一致
parentNode
previousSibling/previousElementSibling
nextSibling/nextElementSibling
lastChild/lastElementChild
firstChild/firstElementChild
DOM的增删改
createElement
document.createDocumentFragment()
appendChild
insertBefore
cloneNode(true/false)
replaceChild
removeChild
get/set/removeAttribute
DOM的盒子模型
经过一段时间的开发，以及内部测试，同程网联盟景区新版程序正式发布推出，感谢广大联盟会员一直以来的支持与关注！ 同程网联盟景区新版程序新功能介绍：1.统一的页面风格。页面风格将与随后推出的度假线路、酒店、机票以及融合版联盟程序风格保持一直；2.新增后台管理系统。可更加方便快捷的对网站进行个性化设置；3.动态与伪静态切换。后台操作，简单便捷；4.缓存管理。新增缓存，提高网站访问速度，后台可定期清理；5
下面是封装的一个类似于jquery中的方法：
1、children 获取某一个容器中所有的元素子节点（还可以筛选出指定标签名的）
Document
在这里提一种编程思想：（惰性思想，JS高阶编程技巧之一）来封装我们的常用的方法库:第一次再给utils赋值的时候我们就已经把兼容处理好了，把最后的结果存放在flag变量中，以后再每一个方法中，只要是ie6-8不兼容的，我们不需要重新检测，只需要使用flag的值就可以。
例如下面的代码：
2、获取兄弟元素节点系列方法
1）、prev:获取上一个哥哥元素节点
首先获取当前元素的上一个哥哥节点，判断是否为元素节点，不是的话基于当前的继续找上面的哥哥节点...直到找到哥哥元素节点，如果没有返回null
function prev(curEle){if(flag){return curEle.previousElementSibling;
}var pre = curEle.previousSibling;while(pre && pre.nodeType!==1){
pre = pre.previousSibling;
}return pre;
}2）、next：获取下一个弟弟元素节点
function next(curEle){if(flag){return curEle.nextElementSibling;
}var next = curEle.nextSibling;while(next && next.nodeType!==1){
next = next.nextSibling
}return next
}3）、prevAll获取所有的哥哥元素节点
ary = pre = =
4）、nextAll：获取所有的弟弟元素节点
ary = nex = =
5）、sibling：获取相邻的两个元素节点
function sibling(curEle){var pre = this.prev(curEle);var nex = this.next(curEle);var ary = [];
pre?ary.push(pre):null;
nex?ary.push(nex):null;return ary;
}6）、siblings:获取所有的兄弟元素节点
function siblings(curEle){return this.prevAll(curEle).concat(this.nextAll(curEle))
}7）、index：获取当前的索引
function index(curEle){return this.prevAll(curEle).length
}8）、firstChild:获取第一个元素子节点
function firstChild(curEle){var chs = this.children(curEle)return chs.length>0?chs[0]:null}9）、lastChild：获取最后一个元素子节点
function lastChild(curEle){var chs = this.children(curEle)return chs.length>0?chs[chs.length-1]:null} 3、向容器中追加新元素的方法
1）、append:向指定容器的末尾追加元素
function append(newEle,container){
container.appendChild(newEle);
}2）、prepend：向指定容器的开头追加元素，把新的元素添加到容器中第一个子元素节点的前面，如果一个节点都没有就放在末尾
function prepend(newEle,container){var fir = this.firstChild(container);if(fir){
container.insertBefore(newEle,fir)return;
}
container.appendChild(newEle)
}3）、insertBefore：把新元素追加到指定元素的前面
function insertBefore(newEle,oldEle){
oldEle.parentNode.insertBefore(newEle,oldEle);
}4）、insertAfter:把新元素追加到指定元素的后面,相当于追加到oldEle弟弟元素的前面，如果弟弟不存在，也就是当前元素已经是最后一个了，我们把新的元素放在最末尾即可
function insertAfter(newEle,oldEle){var nex = this.next(oldEle);if(nex){
oldEle.parentNode.insertBefore(newEle,nex);
}
oldEle.parentNode.appendChild(newEle);
}
