1. 四種節(jié)點(diǎn)的屬性：
2. var btu=document.getElementById('btu'); //獲取button對(duì)象的ID
btu.innerHTML="I'm a buttom"; //修改HTML內(nèi)的文字
3. 事件：用戶和瀏覽器之間的交互行為，比如，點(diǎn)擊按鈕，鼠標(biāo)移動(dòng).....
可以在事件對(duì)應(yīng)的屬性中設(shè)置一些js代碼，當(dāng)事件被觸發(fā)時(shí)，這些代碼會(huì)被執(zhí)行。
W3c中JS>HTML DOM>DOM參考>DOM Event
var btn=document.getElementById('btu');
//為按鈕的對(duì)應(yīng)事件綁定處理函數(shù)的形式來(lái)響應(yīng)事件，當(dāng)事件被觸發(fā)時(shí)就會(huì)執(zhí)行
//綁定一個(gè)單擊事件
btn.onclick=function () {
alert("不用點(diǎn)？？？")}
4. 瀏覽器在加載一個(gè)頁(yè)面時(shí)，是按照自上而下的順序加載的，讀取到一行就運(yùn)行一行，如果將script標(biāo)簽寫(xiě)到頁(yè)面的上面，在代碼執(zhí)行時(shí)，頁(yè)面還沒(méi)有加載
將JS代碼寫(xiě)到頁(yè)面的下部就是為了可以在頁(yè)面加載完畢以后再執(zhí)行Js代碼
<script>
window.onload=function(){ ///利用這種方法可以寫(xiě)在前面?。№?yè)面加載完畢之后，立即執(zhí)行
var btn=document.getElementById('btu');
btu.onclick=function(){
alert("不用點(diǎn)？？？")
}};
</script>
<body>
<button id="btu">一個(gè)小小小小按鈕</button>
</body>
5.
代碼：
如果讀取元素節(jié)點(diǎn)屬性，直接使用元素.屬性名
例子： 元素.id 元素.name 元素.value
注意：class屬性不能采用這種方式，可以使用 元素.className
<script>
var btn01=document.getElementById("btn01");
btn01.onclick=function(){
//查找#bj節(jié)點(diǎn)
var bj=document.getElementById("bj");
//打印bj
//通過(guò)innerHTML獲取元素內(nèi)部的html代碼
alert(bj.innerHTML);};
var btn02=document.getElementById("btn02");
btn02.onclick=function(){
//查找li節(jié)點(diǎn)，封裝到數(shù)組中
var lis=document.getElementsByName("li");
// alert(lis.length);
for(var i=0;i<lis.length;i++){
alert(lis[i].innerHTML)}}
var btn03=document.getElementById("btn03");
btn03.onclick=function () {
//查找name=gender的所有節(jié)點(diǎn)
var inputs=document.getElementsByName("gender");
// alert(inputs.length);
for(var i=0;i<inputs.length;i++){
//innerHTML用于獲取元素內(nèi)部的HTML代碼，但是Input沒(méi)有內(nèi)部，對(duì)于單標(biāo)簽沒(méi)有意義
//讀取元素的屬性
alert(inputs[i].value)}};
</script>
6. DOM查詢的剩余方法：
//獲取body標(biāo)簽
var body=document.body;
//獲取html根標(biāo)簽
var html=document.documentElement;
//已棄用
var all=document.all;
//根據(jù)元素的class屬性值查詢一組元素節(jié)點(diǎn)對(duì)象，IE9以上才支持
var box1=document.getElementsByClassName("box1")
7. JS與CSS交互
//在css中利用.box1 div
/*document.querySelector()
需要一個(gè)選擇器的字符串作為參數(shù)，可以根據(jù)一個(gè)css選擇器來(lái)查詢一個(gè)元素節(jié)點(diǎn)對(duì)象*/
var div=document.querySelector(".box1 div");
console.log(div);
//雖然IE8中沒(méi)有getElementsByClassName( )，但可以利用querySelector( )代替
//使用querySelector( )方法總會(huì)返回唯一個(gè)元素，如果滿足條件的元素有多個(gè)，那么它只會(huì)返回第一個(gè)
var box=document.querySelector(".box1")
//使用querySelectorAll( )方法會(huì)返回所有class相同的div，返回?cái)?shù)組
var box2=document.querySelectorAll(".box1");
console.log(box2.length);
聯(lián)系客服
