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