节点分为:元素节点、文本节点和属性节点等。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.4 节点</title>
</head>
<body>
<h1>what to buy</h1>
<p title="a genele reminder">don't forgrt to buy this stuff</p>
<ul id="purchases">
<li>A tin of beans</li>
<li class="sale">cheese</li>
<li class="sale important">milk</li>
</ul>
</body>
</html>
- 标签的名字就是元素的名字,即元素节点可以理解为html中的标签。
- 在上面的代码中,p标签包含的内容是“don’t forgrt to buy this stuff”,这就是一个文本节点,即元素节点之间的文本。
- 属性节点用来对元素做出更具体的描述,如代码中title=”a genele reminder”就是一个属性节点,即html标签中的属性值。
获取元素
有三种DOM方法可以获取元素节点,分别是通过元素ID、通过标签名和通过类名来获取。
1.getElementById |
方法返回一个与那个给定id属性值的元素节点对应的对象。
例如下面的代码:
<script type="text/javascript">
var oUl = document.getElementById("purchases");
console.log(oUl);
</script>
输出的结果是:
<ul id="purchases">
<li>A tin of beans</li>
<li class="sale">cheese</li>
<li class="sale important">milk</li>
</ul>
2.getElementsByTagName |
该方法返回的是一个对象数组
<script type="text/javascript">
var oLi = document.getElementsByTagName("li");
console.log(oLi);
</script>
输出的结果是:
获取元素的个数:
var length = document.getElementsByTagName("li").length; //3
上面的代码有多少个元素节点:
console.log(document.getElementsByTagName("*").length); //12
3.getElementsByClassName |
返回类型与getElementsByTagName相似,返回一个具有相同类名的元素的数组。
<script type="text/javascript">
var cheese = document.getElementsByClassName("sale");
console.log(cheese);
</script>
输出结果:
由于低版本的ie浏览器不支持getElementsByClassName方法,可用以下函数来代替:
<script type="text/javascript">
function getElementsByClassName(node, classname) {
if (node.getElementsByClassName) {
return node.getElementsByClassName(classname);
} else {
var results = new Array;
var tag = node.getElementsByTagName("*");
for (var i = 0; i < tag.length; i++) {
if (tag[i].className.indexOf(classname) != -1) {
results[results.length] = tag[i];
}
}
return results;
}
}
var oUl = document.getElementById("ul");
var oLi = getElementsByClassName(oUl, "sale");
console.log(oLi);
</script>
两个参数:node表示DOM树中的搜索起点,即上下文;classname就是要搜索的类名
一份文档就是一颗节点树。
每个节点都是一个对象。