版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/54848178
DOM(document object model) 即文档对象模型。
DOM中共有三种类型的节点，元素节点、文本节点、属性节点。
getElementsById()
通过ID获取元素
一个ID只能使用一次，所以，该方法会返回一个唯一的对象
注：可以使用typeof判断变量的类型
typedof + 变量名
以下面这段代码为例：
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Shopping list</title>
</head>
<body>
<h1>What to by</h1>
<p title="a gentle reminder">Don't forget to buy this stuff</p>
<ul id="purchases">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale implement">Milk</li>
</ul>
<script src="JS/test1.js"></script>
</body>
</html>
var temp = document.getElementById("purchases");
alert(typeof temp); 结果为object
getElementsByTagName()
根据标签名返回一个对象数组
使用以下JavaScript语句：
var temp = document.getElementsByTagName("li");
alert(temp.length); 结果是3 ，表示一个长度为3的数组。也可以将函数参数改为通配符*，这样表示获取DOM中的所有标签。
getElementsByClassName()
通过类名获取元素，返回一个数组。参数为类名，类名可以不唯一，多个类名表示同时含有多个类名的元素，类名顺序可以不固定
这个方法比较新，不是所有浏览器都支持
获取/更改标签中的属性值
可以通过getAttribute(attribute)获取元素中的属性值，通过setAttribute(attribute,value)来更改属性的值，如果一个元素原来没有这个属性，使用setAttribute会先创建这个属性在给这个属性赋值，虽然创建了这个属性，但是网页的源码并不会因此发生任何改变，
var temp = document.getElementsByTagName("p");
for(var i = 0 ; i < temp.length; i++){
alert(temp[i].getAttribute("title"));
temp[i].setAttribute("title","s");
alert(temp[i].getAttribute("title"));
} 结果是先弹出a gentle reminder，再弹出s，因为title的值被更改为s。
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)