获取页面元素

获取页面元素

获取元素的四种方式

通过标签、类名、name名获取的页面元素为数组，需要使用的只是其中的一个元素时，使用角标 [0]、[1]等来单个操作

• 通过便签获取

	var box = document.getElementsByTagName("div")[2];

• 通过class类名获取

	var box2 = document.getElementsByClassName("div1")[0];

• 通过ID名来获取

	var box3 = document.getElementById("div2");

• 通过name名获取

	var box4 = document.getElementsByName("div3")[0];

设置HTML便签的文字

innerText 原先只设置文本，目前看来似乎也会覆盖标签

• innerHTML: 主要用来修改指定标签内的所有的内容(覆盖子元素)，设置标签及文本
• innerText: 主要用来修改指定标签内的文本
  区别：
  • 使用innerText主要是设置文本的,设置标签内容，是没有标签的效果的，innerHTML是可以设置文本内容的，innerHTML主要的作用是在标签中设置新的html标签内容，是有标签效果的
    想要设置标签内容，使用innerHTML，想要设置文本内容，innerText或者textContent，或者innerHTML，推荐用innerText
  • innerText可以获取标签中间的文本内容，但是标签中如果还有标签，那么最里面的标签的文本内容也能获取。获取不到标签的,文本可以获取
    innerHTML才是真正的获取标签中间的所有内容

修改HTML的样式

box.style.width = 100 + “px”;
box.style.backgroundColor = “red”;

将循环和标签和结合使用一下

	var list = document.getElementsByClassName("list");
		
	for(var i = 0; i < list.length; i++){
		list[i].innerHTML = i+1;
	}