原生js的增删改查

### (获取节点) [查]

 

　　## 获取节点 (只要是获取到的是数组形式的,就需要在后面加[x],来决定获取第几个节点)

　　+ var el = document.querySelector('.class/#id/li')　　　　[ 根据选择器(类名,id,标签名)获取节点,只能获取一个 ]

　　+ var el = document.querySelectorAll('.class/#id/li')　　   [ 根据选择器(类名,id,标签名)获取节点,会获取所有的,返回一个数组 ]

　　+ var el = document.getElementById('id');　　　　　　　　[ 根据id获取唯一节点 ]

　　+ var el = document.getElementsByClassName('class')　　[ 根据class名获取节点,返回一个数组 ]

　　+ var el = document.getElementsByTagName('h1')　　　　[ 根据标签名获取节点,返回一个数组 ]

 

 　  ## 获取父节点 (父节点是唯一的)

　　+ var father = el.parentNode　　　　　　　　　　　　　　　[ 根据子节点获取父节点 ]

　　

　　## 获取兄弟节点 (ie8兼容问题 var nextBrother = el.nextElementSibling || el.nextSibling;)

　　+ var nextBrother = el.nextElementSibling　　　　　　　　[ 根据某个节点获取它的 下一个兄弟标签节点 ]

　　+ var nextBrothers = el.nextSibling　　　　　　　　　　　[ 根据某个节点获取它的 下一个兄弟任意节点 , 慎用!]

　　+ var LastBrother = el.previousElementSibling　　　　　　[ 根据某个节点获取它的 上一个兄弟标签节点 ]

　　+ var LastBrothers = el.previousSibling　　　　　　　　　[ 根据某个节点获取它的 上一个兄弟任意节点 , 慎用!]

 

　　## 获取一个子节点 ( 任意节点可能是个空格,换位符,注释等 )

　　+ var firstChildren = el.firstElementChild　　　　　　　　  [ 根据某个节点获取他的 第一个标签子节点 ]

　　+ var firstChildrens = el.firstChild　　　　　　　　　　　　[ 根据某个节点获取他的 第一个任意子节点 , 慎用!]

　　+ var lastChildren = el.lastElementChild　　　　　　　　　[ 根据某个节点获取他的 最后一个标签子节点 ]

　　+ var lastChildrens = el.lastChild　　　　　　　　　　　　[ 根据某个节点获取他的 最后一个任意子节点 , 慎用!]

 

　　## 获取所有子节点 ( 数组 )

　　+ var allChildren = el.children　　　　　　　　　　　　[根据某个节点获取他的 所有的标签子节点,返回一个数组]

　　+ var allChildrens = el.childNodes　　　　　　　　　　[根据某个节点获取他的 所有的任意子节点,返回一个数组,慎用!]

### (属性操作 这里以class属性举例,也可以是别的 name啊, onclick啊 等等) [改]

　　+ ele.innerHTML = '<h1>hello word<h1>'　　　　　　[ innerHTML 这个属性会解析值中的标签,一般用来动态生成 ]

　　+ ele.innerTEXT = 'hello word'　　　　　　　　　　　[ innerTEXT 这个属性只会解析成字符串,很少用 ]

　　+ ele.classList.add("active")，　　　　　　　　　　　[ classList.add( ) 可以给指定的节点添加一个class名 , 对class属性的值操作并不影响 属性本身]

　　+ var a = el.getAttribute('class');　　　　　　　　　　[ 可以获取这个节点的class属性  a = 'active']

　　+ el.setAttribute('class', 'active');　　　　　　　　 [ 给这个节点的class属性添加一个class属性值 ]

　　+ var a = el.hasAttribute('class');　　　　　　　　　　　　[ 检测这个节点存不存在某个属性 a = true ]

　　+ ele..appendChild(ele2); 　　　　　　　　　　[把ele2这个节点添加到ele这个节点里]

　　+ parent.replaceChild(newChild,oldChild);　　[newChild节点,替换掉oldChild节点.]

### (创建节点)[增]

　　+ var div = document.createElement("div"); 　　[创建标签节点]

　　+ var textNode = document.createTextNode("一个TextNode"); [创建文本节点]

### [删]

　　+ el.removeAttribute('class');　　　　　　　　　　[ 删除这个节点的class属性,删除的是属性 ]

　　+ ele.classList.remove("active"),　　　　　　　　　　[ classList.remove( )  可以给指定的节点删除一个class名 , 对class属性的值操作并不影响 属性本身]

　　+ var deletedChild = parent.removeChild(node);　　[删除这个指定的节点   node.parentNode.removeChild(node)  通过自己获取父亲删除自己]

未完待续...