1.認(rèn)識(shí)DOM
在網(wǎng)頁正常加載的時(shí)候，瀏覽器會(huì)創(chuàng)建頁面的文檔對(duì)象類型(Document Object Model)
- javascript能改變頁面中的html元素
- javascript能改變頁面中的html屬性
- javascript能改變頁面中的css樣式
- javascript能對(duì)頁面中的事件作出反應(yīng)
2.查詢?cè)?/strong>
document.getElementById(' ');
返回匹配制定的ID屬性的元素節(jié)點(diǎn)document.getElementsByClassName(' ');
返回一個(gè)類似數(shù)組的對(duì)象document.getElementByTagName(' ');
返回所有指定標(biāo)簽的元素document.querySelector( );
querySelector()返回匹配指定的css選擇器的元素節(jié)點(diǎn),如果有多個(gè)節(jié)點(diǎn)滿足匹配條件,則返回第一個(gè)匹配的節(jié)點(diǎn),如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn),則返回null
var el1=document.querySelector(".kk");
var el2=document.querySelector('#id>.kk');
querySelector無法選中css的偽類.括號(hào)內(nèi)單雙引都可
- 3.document.querySelectorAll();
querySelectorAll()返回匹配指定的css選擇器的元素的所有節(jié)點(diǎn),返回的是NodeList類型的對(duì)象.NodeList不是動(dòng)態(tài)的集合,不能實(shí)時(shí)反映到結(jié)果中.
querySelectorAll(".ll,.oo,.pp")方法的參數(shù),可以是用逗號(hào)分割的多個(gè)css選擇器.返回所有匹配其中一個(gè)選擇器的元素.
var maths=document.querySelectorAll("div.kk,div.alert");
這段代碼返回Clss屬性是kk和alert的div元素
3.DOM修改添加
(1)修改html內(nèi)容
document.getElementById('id').innerHTML=new HTMLdocument.getElementById('id').innerText=new Text
(2)修改html屬性
document.getElementById(id).attribute=新值;document.getElementById(id).setAttribute(屬性, 值);
<script>
document.getElementById("image").src="landscape.jpg";
document.getElementById("image").setAttribute('src','landscape.jpg');
</script>
(3)改變樣式
document.element.style.xxx=xxx
<p id="p1">我是段落，要變色</p>
<button>變色</button>
<script>
document.getElementsByTagName('button')[0].onclick=function(){
document.getElementById('p1').style.color="red";
}
</script>
(4)創(chuàng)建新的html元素
創(chuàng)建元素，然后追加到已有的元素上
<div class="d1"></div>
<script>
var para=document.createElement("p");
para.innerHtml="我是新添加的段落";
var element=document.getElementById("d1");
element.appendChild(para);//加在最后面
element.firstChild(para);//加在第一個(gè)
</script>
