共同学习js，不对的地方欢迎大家指正。
js Dom 操作
一.document获取节点的基本方法
1.document.getElementById(‘id’); //通过id来获取元素,返回指定的唯一元素。
2.document.getElementsByName(“name”); //通过name来获取元素，返回name=’name’的集合。
3.document.getElementsByClassName(“classname”) //用classname来获取元素，返回的是一个class=”classname”的集合(不兼容IE8及以下)。
4.document.getElementsByTagName(‘div’); //用元素的标签获取元素，返回所有标签=“div”的集合。
getElementsByClassName不兼容ie8及以下，所以需要做兼容，搜集到以下两种方式：
//兼容IE getElementsByClassName取标签 方法一
//写成一个函数，每次调用这个函数
function getElementsByClassName(className,root,tagName) { //root：父节点，tagName：该节点的标签名。 这两个参数均可有可无
if(root){
root=typeof root=="string" ? document.getElementById(root) : root;
}else{
root=document.body;
}
tagName=tagName||"*";
if (document.getElementsByClassName) { //如果浏览器支持getElementsByClassName，就直接的用
return root.getElementsByClassName(className);
}else {
var tag= root.getElementsByTagName(tagName); //获取指定元素
var tagAll = []; //用于存储符合条件的元素
for (var i = 0; i < tag.length; i++) { //遍历获得的元素
for(var j=0,n=tag[i].className.split(' ');j
二.js 节点操作方法
1.获取节点
document.documentElement //获取整个Html Dom结构
element.childNodes //得到element的全部子节点
element.parentNode //得到element的父节点
element.nextSibling //得到element的下一个兄弟节点
element.previousSibling //得到element的上一个兄弟节点
element.firstChild //得到element的第一个节点
element.lastChild //得到element的最后一个节点
* example : console.log(element.nextSibling.previousSibling);
2.节点 获取/设置 属性
*element.setAttribute("class","class1") //设置元素属性
*element.getAttribute("class") //获取元素属性
*element.removeAttribute("class") //删除元素属性
* example : element.parentNode.setAttribute("id","bannerUl");
3.创建节点
createElement() //创建标签名为tagname的元素
createTextNode() //创建包含文本text的文本节点
createDocumentFragment() //创建文档碎片节点
* example: document.createElement("p");
* example: document.createTextNode("Hellow world");
* document.createDocumentFragment()说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会改变页面的变现，并重新刷新整个页面，从而消耗了大量的时间。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中。
4.添加、移除、替换、复制节点。
element.appendChild() //向节点的子节点列表末尾增加一个新的节点
element.insertBefore(newchild,refchild) //向某个子节点的前面插入一个节点 newchild新的节点 refchild指定的节点
element.removeChild() //删除某个节点 只能删除下一级的节点
element.replaceChild(newnode,oldnode) //替换DOM节点的方法 newnode新的节点 oldnode需要替换的节点
element.cloneNode(Boolean) //设置为 true，克隆节点及其属性，以及后代, 设置为 false，则只克隆节点及其属性,不克隆后代节点
element.cloneNode //不同于一般的赋值 var li = childodeClear(ul2).childNodes[0].cloneNode(true) != var li = childodeClear(ul2).childNodes[0]; 后者是赋值一个内存地址，所以操作会改变原来的节点
常见问题：
用element.childNodes获取一个节点的子元素集合的时候（ul获取li集合），如果里面有很多空格/回车,子集的长度会不符合子集个数。需要手动清除回车、空格
转载请注明：Falost的小窝 » JS学习笔记之DOM操作
如果你觉得这篇文章不错或者对你有帮助，想请我喝一杯咖啡，可以打赏
