|
  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ù)的形式來響應(yīng)事件，當(dāng)事件被觸發(fā)時(shí)就會(huì)執(zhí)行
//綁定一個(gè)單擊事件
btn.onclick=function () {
alert("不用點(diǎn)？？？")} 4. 瀏覽器在加載一個(gè)頁面時(shí)，是按照自上而下的順序加載的，讀取到一行就運(yùn)行一行，如果將script標(biāo)簽寫到頁面的上面，在代碼執(zhí)行時(shí)，頁面還沒有加載 將JS代碼寫到頁面的下部就是為了可以在頁面加載完畢以后再執(zhí)行Js代碼 <script> window.onload=function(){ ///利用這種方法可以寫在前面！！頁面加載完畢之后，立即執(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
//通過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沒有內(nèi)部，對(duì)于單標(biāo)簽沒有意義
//讀取元素的屬性
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選擇器來查詢一個(gè)元素節(jié)點(diǎn)對(duì)象*/
var div=document.querySelector(".box1 div");
console.log(div); //雖然IE8中沒有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);
|
