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模型被结构化为对象树:DOM操作获取HTML中的元素的方法_第1张图片
通过这个对象模型,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元素。

你可能感兴趣的