js-DOM api选择器

一、选择器（找元素）

1: document.getElementById('id名')
2: document.getElementsByClassName('类名')[i]  一组  数组集合
3: document.getElementsByTagName('标签名')[i]  一组  数组集合
4： document.getElementsByName('input控件名')[i]  一组  数组集合
5: css选择器去选择元素   document.querySelector("css选择器")  ## 注意  : 一组（返回数组的第一元素）或一个 
                                         document.querySelectorAll("css选择器")  数组

 

二、节点操作（创建 ，插入，删除，查找）

1、 创建元素

1：document.write('<li>我是li元素</li>')  
2：对象.innerHTML = '<li>我是li元素</li>'  可以用  一两个标签的时候  不能用在循环里
//创建一个标签结点 标签（元素）
3：var TagObj  = document.createElement('标签名')
//创建一个文本结点
   var text  =   document.createTextNode('内容')
   //挂接文本结点到标签结点
   TagObj.appendChild(text)  
   //添加属性和样式
   TagObj.属性名  TagObj.setAttribute('属性名','属性值')
   TagObj.style.属性名 = '' /   穿衣服  className classList 
   // 挂接文档树上（父元素）
   父元素.appendChild(TagObj)

2、插入元素 

 （1）尾插   父元素.appendChild(子元素)  //将子元素插入到父元素内容末尾 
 （2）任意位置插入  父元素.insertBefore(新结点,参考的结点)
 （3）删除  父元素.removeChild(子元素)；
 （4）替换  父元素.replaceChild('新元素','旧的元素') //把旧元素替换成新元素

3、查找元素

  父元素.children  找父元素的所有子元素  集合（数组）
  子元素.parentElement  找子元素对应的爸爸
  
  上一个兄弟节点： 元素.previousElementSibling
  下一个兄弟节点： 元素.nextElementSibling
  第一个：   元素.firstElement
  最后一个： 元素.lastElement

4、删除元素

父元素..removechild()

案例