2.2 获取HTML元素

2.2 获取HTML元素 

DOM方法：是您能够在 HTML 元素上执行的动作。例：添加或删除 HTML 元素

DOM 属性：是您能够设置或改变的 HTML元素的值。例：改变 HTML 元素的内容

2.2.1 通过ID获取

格式：document.getElementById(id)

说明：通过元素 id 来查找元素，找到元素对象返回该元素，找不到则为null

通过ID获取元素是最快速的方法。

实践：获取id为div1的元素

HTML代码：

<div id="div1">div1......</div>

var div1=document.getElementById("div1");
console.log(div1);//<div id="div1"></div>
var div11=document.getElementById("div11");
console.log(div11);//null

2.2.2 通过类名获取

格式：

document.getElementsByClassName(name)

说明：通过相同的类名来查找元素，找到找不到都会返回HTMLCollection。

HTMLCollection是一个节点对象的集合，只能包含元素节点（element），不能包含其他类型的节点。它的返回值是一个类似数组的对象，只能使用for循环遍历。

HTMLCollection 是一个接口，表示 HTML 元素的集合，初学可以当成数组访问。

实践：获取类为div2的元素

HTML代码：

<div class="div2">div2......</div>
<div class="div2">div3......</div>

JS代码：

var div2 = document.getElementsByClassName("div2");
console.log(div2);//HTMLCollection
for (var i = 0; i < div2.length; i++) {
console.log(div2[i]);//输出所有找到的元素
}

2.2.3 通过标签名获取

格式：document.getElementsByTagName(name)

说明：通过标签名来查找所有元素，返回HTMLCollection。

tagname就是HTML标签

实践：获取标签为div的所有元素

var divs = document.getElementsByTagName("div");
console.log(divs);//HTMLCollection
for (var i = 0; i < divs.length; i++) {
console.log(divs[i]);//输出所有找到的元素
}

实践：获取所有标签

获取页面中的所有标签

for (var i = 0; i < document.all.length; i++) {
var element = document.all[i];//选取所有内容
console.dir(element);
document.write(element.tagName + " "); //输出标签名
}

2.2.4 通过 CSS 获取

格式：document.querySelectorAll()

说明：查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，返回结果为NodeList。

例如:#div2(id="div2") .abc(class="abc") div>p(

)

NodeList实例是一个类似数组的对象，它的成员是节点对象。

DOM除了处理单个节点，还提供了NodeList和HTMLCollection来容纳多个节点，主要区别是，NodeList可以包含各种类型的节点，HTMLCollection只能包含 HTML 元素节点。

NodeList可以用forEach和for变量，HTMLCollection可用for遍历，不能用forEach遍历。

HTML代码：

<p class="div2"></p>

JS代码：

var divcss=document.querySelectorAll("#div2");
divcss.forEach(function(element){console.log(element)});//可以使用forEach来遍历内容。
console.log(divcss);//输出NodeLis