JavaScript核心document.getElementById()

document.getElementById()是根據id獲取標籤物件

//獲取標籤物件的值
//文字域和文字框都用value取值
document.getElementById("username").value;

//div,p,span,h1,h2都是innerHTML
document.getElementById("div1").innerHtTML;

改變樣式

var div2=document.getElementById("div2");
        //一個屬性由兩個單片語成時把“-”改成駝峰格式
        div2.style.backgroundColor="red";
        div2.style.fontSize="28px";
        div2.style.color="blue";

 

檢索

 //建立物件cityObject，該物件為div層
    var cityObjcet =document.getElementById("city")
    //檢索div中的的li
        var objects2=cityObjcet.getElementsByTagName("li")
        //alert(objects2.length)
        //檢索節點的屬性值
        var  attrNode =cityObjcet.getAttributeNode("style").nodeValue
        //alert(attrNode)
        //獲取元素的所有子節點（包括文位元組點 如：連續空格為一個子節點）
        var children =cityObjcet.childNodes//獲得第一個子節點 firstChild 最後一個節點 lastChild
        //alert(children.length)

        //檢視div節點的型別
        //alert(cityObjcet.nodeType)
        //檢視div節點的標籤名
        //alert(cityObjcet.nodeName)
        //檢視節點值 若無為null
        //alert(cityObjcet.nodeValue)

 

getElementsByName()方法

與getElementById() 方法不同的是，通過元素的 name 屬性查詢元素，而不是通過 id 屬性。 因為文件中的name屬性可能不唯一，所以getElementsByName()方法返回的是元素的陣列，而不是一個元素。 這個方法不多用，主要用在複選框，需要多個標籤同用一個name的情況下

<input type="checkbox" name="aihao" value="吃飯">吃飯
<input type="checkbox" name="aihao" value="睡覺">睡覺

var aihao = document.getElementsByName("aihao");
        for (var i=0;i<aihao.length;i++){
            alert(aihao[i].value);
        }
 

getElementsByTagName()方法

返回帶有指定標籤名的節點物件的集合。返回元素的順序是他們在文件中的順序。

<div id="div1">這是div1哦</div>
<div id="div2">這是div2哦</div>

   var divs =document.getElementsByTagName("div");
       for (var i=0;i<divs.length;i++){
           alert(divs[i].innerHTML);
       }