版权声明:本文为博主原创文章,转载请注明出处。 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。