首页 > 代码库 > 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所有方法汇总