getElementByName和getElementByTagName區別和getElement所有方法匯總

工作中很多同學肯定都會遇到這些問題，所以我把它匯總一下，分享給大家。

【重點】分析window.document.getElementById("header")語句

1/document整個文檔意思，document是主語（限定范圍）；

2/父級元素例如ul.getElementsByName("x")。

3/Elements一組元素的意思。

4/window.可以省略，因為它是全局環境可以省略不寫。

】var x=document.getElementsByName("x")      括號中的x是元素的屬性值，Name是屬性名。一般和input配合用<input name="x" type="radio" value="貓">

】var x=document.getElementsByTagName("div") 括號中的div是元素的標簽，該方法返回文檔中所有div元素列表，元素排列的順序就是他們在文檔中的順序

【讀取方式】類數組和真正的數組不一樣。

    1/var x=document.getElementsByTagName("p");        //類數組  通過標簽節點讀取標簽，括號里邊的是標簽,有下標！下標序號就是從代碼的上往下讀取【重要】。它只有數組中lenght和下標屬性，其他數組方法它很少用到。

    用法：i.length數組的長度。//x[i].innerHTML<60  標簽里邊的值。

    2/var y=document.getElementsByClassName("ccc");   //類數組   通過class屬性讀取標簽，括號里邊的是class屬性值

    3/var z=document.getElementById("a2");            //標簽     根據ID獲取對象  精準化  通過id屬性讀取標簽，括號里邊的是id屬性值，要注意唯一性

    4/var u=document.querySelector("p");              //標簽    html5中新的讀取方式，只獲取一個元素，括號里變是選擇器即標簽。通過選擇器獲取元素。

    5/html5新的元素讀取方法，括號里是選擇器即標簽，只讀第一個

    *var v=document.querySelectorAll("p");           //類數組   全部一組元素， html5中新的讀取方式，括號里變是選擇器即標簽。

【讀取】標簽的上一級和下一級

    var p=document.getElementById("a2").parentNode;     //父節點（就是上一級的一次）

    var q=document.getElementById("sct").childNodes;    //子節點（就是下一級的一次）

【改變】標簽的值2種方法    

    document.getElementsByClassName("a1")[0].attributes[0].value="a";   //改變屬性值  value="a"這個形式永遠不變。可以改變任何屬性的值。

    document.getElementsByTagName("input")[0].value="計算";   //要改變什么屬性，就寫什么屬性。屬性="屬性值"

    document.getElementsByTagName("input")[1].type="password";

    document.getElementsByTagName("input")[0].value="煩死";

【document.querySelectorAll和document.getElementsByTagName】的區別：

前者只能獲取一次（靜態的）；后者是可以獲取動態的元素。

【js中 innerHTML與innerText的用法與區別:】

test.innerHTML：例如“<span >test1< /span> test2 ”。可以讀到該文件中的標簽和文本。

test.innerText:    從起始位置到終止位置的內容, 但它去除Html標簽 。            只能讀到文本。

document.getElementsByTagName("p")[0].innerText="活動的活動好"

document.getElementsByTagName("p")[0].innerHTML="活動好打卡機互動".