首页 > 代码库 > getElementByName和getElementByTagName区别和getElement所有方法汇总

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="http://www.mamicode.com/猫">

】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].vhttp://www.mamicode.com/alue="a";   //改变属性值  vhttp://www.mamicode.com/alue="a"这个形式永远不变。可以改变任何属性的值。

    document.getElementsByTagName("input")[0].value="http://www.mamicode.com/计算";   //要改变什么属性,就写什么属性。属性="属性值"

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

    document.getElementsByTagName("input")[0].value="http://www.mamicode.com/烦死";


【document.querySelectorAll和document.getElementsByTagName】的区别:

前者只能获取一次(静态的);后者是可以获取动态的元素。


【js中 innerHTML与innerText的用法与区别:】

test.innerHTML:例如“<span style="color:red">test1< /span> test2 ”。可以读到该文件中的标签和文本。

test.innerText:    从起始位置到终止位置的内容, 但它去除Html标签 。            只能读到文本。


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

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





本文出自 “11988113” 博客,请务必保留此出处http://11998113.blog.51cto.com/11988113/1894266

getElementByName和getElementByTagName区别和getElement所有方法汇总