js DOM

一、访问节点

 parentNode   //返回节点的父节点
        firstElementChild	//返回节点的第一个子节点
        lastElementChild	//返回节点的最后一个子节点
        nextElementSibling	//下一个节点
        previousElementSibling	//上一个节点

二、操作节点属性
1．设置属性、

setAttribute(属性名,属性值)

2．获取属性

getAttribute(属性名) 方法返回指定属性名的属性值

3．删除属性

removeAttribute() 方法删除指定的属性

三、创建节点

 document.createElement("li")

四、添加节点
1．appendChild()

父节点.appendChild(添加的节点)
        例子
        <ul id="list">
        <li>1111</li>
        <li>2222</li>   
        </ul>
        var myul = document.querySelector("#list")
        // 创建节点
        var newli = document.createElement("li");
        newli.innerHTML = "<b>明天会更好</b>"
        console.log(newli); // <li><b>明天会更好</b></li>
        // appendChild() 添加节点(添加到父节点的末尾)
        myul.appendChild(newli)

2．insertBefore(A, B)

  insertBefore(A,B) //把A节点插入到B节点之前
  

五、删除与替换节点

 removeChild() 移除父元素里面的子节点
        替换节点：replaceChild(新节点, 旧节点)
        mybox.removeChild(myimg1)

六、复制的节点

 // 要复制的节点.cloneNode(boolean) 
        // true-深度复制（包含节点里面的内容）； 
        // false-浅复制 （只包含节点节点标签）
        var myclone = 节点.cloneNode(true);       

七、访问节点内容方法

innerHTML//获取标签里面的内容,表单的内容获取不了
value//专门获取表单的内容input.value

八、className属性

  通过 className 给 元素添加 class 
 这种方式不会在原有的class上面追加，会清空对象原有的class
 myh1.className = "mybor"
 myh1.className = "active mybor"

九、classList方法
1．class属性值的数量

表示class属性值的数量
 console.log(myh1.classList.length);

2．item()

item()方法，按照索引返回具体的class属性值
 console.log(myh1.classList.item(0));

3．toggle()

toggle() 方法 如果class值存在则删除，如果不存在则添加
myh1.classList.toggle("mybor","active")

4．add()

add()方法，添加指定的class值, 追加
       myh1.classList.add("mybor")
       myh1.classList.add("mybor","on","aaa")

5．remove()

remove方法，删除指定的class值
     myh1.classList.remove("red")
     myh1.classList.remove("red","active")

十、元素属性应用

offsetLeft 	//返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop	//返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight	//返回元素的高度
offsetWidth	//返回元素的宽度
offsetParent	//返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop	//返回匹配元素的滚动条的垂直位置
scrollLeft	//返回匹配元素的滚动条的水平位置
clientWidth	//返回元素的可见宽度
clientHeight	//返回元素的可见高度