一、HTML DOM 节点
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:
- 文档是一个文档节点。
- 所有的HTML元素都是元素节点。
- 所有 HTML 属性都是属性节点。
- 文本插入到 HTML 元素是文本节点。
- 注释是注释节点。
二、Document 对象
当浏览器载入 HTML 文档, 它就会成为 Document 对象。
Document 对象是 HTML 文档的根节点。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
三、HTML DOM 定义的查找对象的方法
HTML文档常见的方法:
- getElementsByName()
- getElementsByTagName()
- getElementsByClassName()
- getElementById()
（一）、getElementsByName()
1、定义和用法
getElementsByName() 方法可返回带有指定名称的对象的集合。
2、语法
document.getElementsByName(name)
3、参数
name 必须。元素的名称。
4、实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>getElementsByName()实例</title>
<script>
function getElements(){
var f=document.getElementsByName("fruit");
alert(f.length);
}
</script>
</head>
<body>
苹果:<input name="fruit" type="radio" value="苹果">
香蕉:<input name="fruit" type="radio" value="香蕉">
<input type="button" onclick="getElements()" value="name为 'fruit'的元素数量?">
</body>
</html>
5、效果图
（二）、getElementsByTagName()
1、定义和用法
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
提示： 参数值 “*” 返回文档的所有元素。
2、语法
document.getElementsByTagName(tagname)
3、参数
tagname String 必须。你要获取元素的标签名。
4、返回值
NodeList 对象 指定标签名的元素集合
5、实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>getElementsByTagName()实例</title>
</head>
<body>
<p id="demo">单击按钮来改变这一段中的文本。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
document.getElementsByTagName("P")[0].innerHTML="Hello World";
};
</script>
</body>
</html>
6、效果
单击按钮前：
单击按钮后：
（三）、getElementsByClassName()
1、定义和使用
getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
提示： 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。
注意: Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。
2、语法
document.getElementsByClassName(classname)
3、参数
classname String 必须。你需要获取的元素类名。
多个类名使用空格分隔，如 “test demo”。
4、实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>getElementsByClassName()实例</title>
<style>
div {
border: 1px solid black;
margin: 5px;
}
.example {
border: 1px solid black;
margin: 5px;
}
</style>
</head>
<body>
<h1>实例一</h1>
<div class="nocolor">
<p>P 元素在在第一个样式为 class="example" 的 Div 元素中。Div 的索引值为 0。</p>
</div>
<div class="color red">
<p>P 元素在在第一个样式为 class="example color" 的 Div 元素中。Div 的索引值为 0。</p>
</div>
<div class="color yellow">
<p>P 元素在在第二个样式为 class="example color" 的 Div 元素中。Div 的索引值为 1。</p>
</div>
<p>点击按钮修改第一个类为 "example" 的 div 元素的背景颜色。</p>
<p>获取到的对象的长度（数量）：<span id="demo"></span></p>
<hr/>
<h1>实例二</h1>
<div class="example">样式 class="example" 的 Div 元素</div>
<div class="example">另外一个样式 class="example" 的 Div 元素</div>
<p class="example">样式为 class="example" 的 p 元素。</p>
<p>这是一个插入在 p 元素中样式 class="example" 的<span class="example">span</span> 元素 。</p>
<p>点击按钮修改所有样式 class="example" 的背景颜色。</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("color");
x[0].style.backgroundColor = "red";
x[1].style.backgroundColor = "yellow";
document.getElementById("demo").innerHTML = x.length;
//for循环改变
var x = document.getElementsByClassName("example");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
}
</script>
</body>
</html>
5、效果图
单击按钮前：
单击按钮后：
（四）、getElementsById()
1、定义和使用
getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。
NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
提示： 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。
2、方法
getElementsById()
3、语法
document.getElementsById(id)
4、参数
id String 必须。你需要获取的元素id。
5、实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>getElementById()</title>
</head>
<body>
<p id="demo">单击按钮来改变这一段中的文本。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="Hello World";
};
</script>
</body>
</html>
6、效果图
单击按钮前
单击按钮后
