JavaScript DOM總結

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