DOM 定義了訪問和操作HTML文檔的標準方法

訪問（查找標簽）
---- 直接查找
　　document.getElementById(“idname”)
　　document.getElementsByTagName(“tagname”)
　　document.getElementsByName(“name”)
　　document.getElementsByClassName(“name”)

---- 導航屬性
　　NodeElement.parentElement // 父節點標簽元素
　　NodeElement.children // 所有子標簽
　　NodeElement.firstElementChild // 第一個子標簽元素
　　NodeElement.lastElementChild // 最後一個子標簽元素
　　NodeElement.nextElementtSibling // 下一個兄弟標簽元素
　　NodeElement.previousElementSibling // 上一個兄弟標簽元素

操作
1 文本操作
取值操作
　　element.innerHTML (關於標簽的操作)
　　element.innerText （關於文本操作）
賦值操作：
　　element.innerHTML=""
　　element.innerText=""



2 屬性操作 <div key1=value1 key2=value2>DIV</div>
取屬性值： （1）element.getAttribute(屬性名) 。

　　　　　 （2）element.屬性名 （推薦）

賦值操作： （1）element.setAttribute(屬性名，屬性值) 。

　　　　　 （2）element.屬性名=屬性值

關於class屬性：
　　element.classlist.add("class值")
　　element.classlist.remove("class值")

關於select標簽：
　　ele_select.options.length=0 清空操作
　　ele_select.selectedIndex 選中option的索引值


關於style屬性：實現對標簽的css操作
　　element.style.樣式屬性="值"




3 節點操作

-----添加標簽
生成一個標簽：var ele_create=document.createElement("標簽名")
　　// <p></p> <img>

添加標簽：

　　 父標簽.appendChild(添加標簽對象)
　　　　　insertBefore

-----刪除節點：

　　 父標簽.removeChild(查找到的標簽對象)

-----替換節點：
　　父標簽.replaceChild(newnode,查找到的標簽對象)


----- 拷貝一個節點
　　node.cloneNode(true)　　//true表示同時拷貝子節點

DOM兩種綁定事件方式
方式1
<script>
function foo(self){
alert(123)
// self： <p onclick="foo(this)"></p>
}
</script>
<p onclick="foo(this)"></p>

方式2
一個標簽對象.on事件=function(){
alert(456)
// this：綁定事件的標簽對象
}

具體事件

點擊事件 onclick
獲取/失去焦點 onfocus onblur
內容發生變化 onchange (selecte)
onmouse 與鼠標相關的事件
提交事件：onsubmit
加載事件：onload

JavaScript DOM總結