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="活动好打卡机互动".