THML DOM / Element 對象操做

隨着Vue等MVVM框架流行，操做DOM已經不想以前那麼頻繁，所以不少DOM的操做已經陌生，特此回顧HTML中DOM操做

獲取Element節點

　　熟悉的有  

　　　　經過ID獲取，返回element對象      　　　　      　document.getElementById(elementId)　　

　　　　經過Name獲取，返回element對象數組   　　　   document.getElementsByName(elementName)

　　　　經過TagName獲取，返回element對象數組 　　　document.getElementsByTagName(tagName）

　　隨着瀏覽器發展，先大部分瀏覽器已經支持以下兩種更爲簡單的獲取Dom的方法，使用方法與Jquery選擇器同樣

　　　 querySelector　　    返回類型：節點對象

　　　 querySelectorAll　　　　返回類型：節點對象數組

　  經過子節點得到父節點

　　　childNode.parentNode

 

Element經常使用方法和操做

element.className	設置或返回元素的 class 屬性
element.clientHeight	返回元素的可見高度
element.clientWidth	返回元素的可見寬度
element.getAttribute()	返回元素節點的指定屬性值
element.hasAttribute()	若是元素擁有指定屬性，則返回true，不然返回 false
element.innerHTML	設置或返回元素的內容
element.appendChild()	向元素添加新的子節點，做爲最後一個子節點
element.offsetLeft	返回元素的水平偏移位置
element.offsetTop	返回元素的垂直偏移位置
element.removeAttribute()	從元素中移除指定屬性
element.removeChild()	從元素中移除子節點
element.style	設置或返回元素的 style 屬性
nodelist.length	返回 NodeList 中的節點數

 

修改節點內容

document.querySelector('p').innerHTML = 'new text'

修改路徑

document.getElementById("image").src="landscape.jpg";
document.querySelector('a').href = "http://www.qq.com"

修改樣式

document.getElementById(id).style.backgroundColor='#ff0'

綁定事件

onclick=function(e){ ... }

建立節點

 var para = document.createElement('a'); para.innerHTML = 'baidu'; para.setAttribute('href','https://www.baidu.com'); document.querySelector('#box').appendChild(para);

刪除節點

document.querySelector('ul').removeChild(document.querySelectorAll('li')[0])