DOM操作获取HTML中的元素的方法

什么是DOM

DOM（Document Object Model）是一项W3C标准（World Wide Web Consortium）标准。定义了访问文档的标注：“W3C文档对象模型(DOM)是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”DOM标准被分为了3个不同的部分：
1.Core DOM：所有文档类型的标准模型
2.XML DOM：XML的文档标准模型
3.HTML DOM：HTML文档的标准模型

HTML DOM（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（DOM），HTML DOM模型被结构化为对象树：
通过这个对象模型，JavaScript获得创建动态HTML所有力量：
1.JavaScript能改变页面中所有的HTML元素
2.JavaScript能改变页面中所有的HTML属性
3.JavaScript能改变页面中所有的CSS样式
4.JavaScript能删除已有的HTML元素和属性
5.JavaScript能添加新的HTML元素和属性
6.JavaScript能对页面中所有已有的HTML事件作出反应
7.JavaScript能在页面中创建新的HTML事件
总而言之HTML DOM是关于如何获取、更改、添加或删除HTML元素的标准。

JavaScript 获取HTML元素的方法

1.通过id属性获取

var id = document.getElementById('id');

如果存在多个id，getElementById()获取的是第一个，参数是String类型，返回值是只获取到的第一个元素，如果没有就返回null。
2.通过标签名获取

//获取所有p标签
var p = document.getElementsByTagName("p");
//获取id = "main"的元素下的所有P标签
var m = document.getElementById("main");
var p = m.getElementsByTagName("p");

返回值是一个类数组，没有找到就返回空数组。
3.通过类名获取

//获取class = "x"的所有元素列表
var x = document.getElementsByClassName("x");

返回值跟标签名获取是一样，也是类数组，如果没有找到就返回空数组。
注意：通过类名查找元素不适用于IE8及更早的版本
4.通过CSS选择器获取

//获取class=“intro”的所有p元素列表。
var x = document.querySelectorAll("x.intro")

返回值也是一个数组，没有找到返回空数组，该方法可以获取指定的CSS选择器（id、类名、类型、属性、属性值等等）的所有HTML元素。同样，该方法也不适用于IE8及更早的版本。
5.通过HTML对象选择器获取HTML对象

//通过查找id="form1"的form 元素，在form集合中，显示所有的元素值。
var x=document.forms["form1"];
var text = "";
for(var i=0;i<x.length;i++){
	text += x.elements[i].value+"
";
}
document.getElementById("demo").innerHTML = text;

通过JavaScript操作HTML元素第一部就是获取HTML元素，以上方法是通过DOM操作来获取HTML中的元素，让我们更加方便快捷的更改、删除或添加HTML元素。