提供了获取页面中元素的方法:
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的盒子模型
下面是封装的一个类似于jquery中的方法：
1、children 获取某一个容器中所有的元素子节点（还可以筛选出指定标签名的）
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> </head> <body> <div id='div1'> <div></div> <div></div> <div> <p></p> <p></p> </div> <p></p> <p></p> <p></p> </div> <script>var odiv = document.getelementbyid('div1')//首先获取所有的子节点(childnodes),在所有的子节点中把元素子节点过滤出来（nodetype===1）//如果多传递了一个标签名的话，我们还要在获取的子元素集合中把对应的标签名进行二次筛选function children(curele,tagname){var ary = [];//ie6-8下不能使用内置的children属性。if(/msie (6|7|8)/i.test(navigator.useragent)){var nodelist = curele.childnodes;for(var i = 0,len=nodelist.length;i<len;i++){var curnode = nodelist[i]if(curnode.nodetype===1){ ary[ary.length] = curnode } } }else{//标准浏览器直接使用children即可，但是这样获取的是元素集合，为了和ie6-8下保持一致，借用数组原型上的slice实现把类数组转化为数组ary = array.prototype.slice.call(curele.children); }//二次筛选 if(typeof tagname ==="string"){for(var k = 0;k<ary.length;k++){var curelenode = ary[k];if(curelenode.nodename.tolowercase()!==tagname.tolowercase()){//不是想要的 删除掉ary.splice(k,1); k--; } } } return ary; }</script> </body> </html>
在这里提一种编程思想：（惰性思想，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); }
以上就是js内置dom操作属性与方法的详细内容。