getElementByName和getElementByTagName區(qū)別和getElement所有方法匯總

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

【重點(diǎn)】分析window.document.getElementById("header")語(yǔ)句

1/document整個(gè)文檔意思，document是主語(yǔ)（限定范圍）；

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

3/Elements一組元素的意思。

4/window.可以省略，因?yàn)樗侨汁h(huán)境可以省略不寫。

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

】var x=document.getElementsByTagName("div") 括號(hào)中的div是元素的標(biāo)簽，該方法返回文檔中所有div元素列表，元素排列的順序就是他們?cè)谖臋n中的順序

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

    1/var x=document.getElementsByTagName("p");        //類數(shù)組  通過標(biāo)簽節(jié)點(diǎn)讀取標(biāo)簽，括號(hào)里邊的是標(biāo)簽,有下標(biāo)！下標(biāo)序號(hào)就是從代碼的上往下讀取【重要】。它只有數(shù)組中l(wèi)enght和下標(biāo)屬性，其他數(shù)組方法它很少用到。

    用法：i.length數(shù)組的長(zhǎng)度。//x[i].innerHTML<60  標(biāo)簽里邊的值。

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

    3/var z=document.getElementById("a2");            //標(biāo)簽     根據(jù)ID獲取對(duì)象  精準(zhǔn)化  通過id屬性讀取標(biāo)簽，括號(hào)里邊的是id屬性值，要注意唯一性

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

    5/html5新的元素讀取方法，括號(hào)里是選擇器即標(biāo)簽，只讀第一個(gè)

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

【讀取】標(biāo)簽的上一級(jí)和下一級(jí)

    var p=document.getElementById("a2").parentNode;     //父節(jié)點(diǎn)（就是上一級(jí)的一次）

    var q=document.getElementById("sct").childNodes;    //子節(jié)點(diǎn)（就是下一級(jí)的一次）

【改變】標(biāo)簽的值2種方法    

    document.getElementsByClassName("a1")[0].attributes[0].value="a";   //改變屬性值  value="a"這個(gè)形式永遠(yuǎn)不變?？梢愿淖?nèi)魏螌傩缘闹怠?/span>

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

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

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

【document.querySelectorAll和document.getElementsByTagName】的區(qū)別：

前者只能獲取一次（靜態(tài)的）；后者是可以獲取動(dòng)態(tài)的元素。

【js中 innerHTML與innerText的用法與區(qū)別:】

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

test.innerText:    從起始位置到終止位置的內(nèi)容, 但它去除Html標(biāo)簽 。            只能讀到文本。

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

document.getElementsByTagName("p")[0].innerHTML="活動(dòng)好打卡機(jī)互動(dòng)".