1. 程式人生 > >html之DOM屬性查詢,操作

html之DOM屬性查詢,操作

<div id='div0' class='div1' name='div2'></div>

DOM屬性查詢

定位查詢

var oDiv = document.getElementById(‘div0’)
var oDiv = document.getElementsByClassName(‘div1’)
var oDiv = document.getElementsByTagName(‘div’)
var oDiv = document.getElementByName(‘div2’)

導航查詢

parentElement 查詢父級標籤

nextElementSibling 查詢下一個同級標籤

previousElementSibling 查詢上一個同級標籤

children 查詢所有的子標籤

firstElementChild 查詢第一個子標籤

lastElementChild 查詢最後一個字標籤

操作

文字操作

.innerText 操作純文字,所以不是很常用
.innerHTML操作純文字和標籤文字

屬性操作

<div id='div0' class='div1' name='div2'></div>
var oDiv = document.getElementById('div0'
)

賦值操作

oDiv.id = ‘div10’
onDiv.id.setAttribute(‘id’,’div10’)

查詢操作

console.log(oDiv.id)
console.log(oDiv.getAttribute(‘id’))

對class屬性的處理!!!

className獲取當前標籤所有class屬性的名字,型別string,所有的屬性名為一個大的字串。

classList.add()對class屬性名進行新增,classList型別為object。

classList.remove()對class屬性名進行移除