节点的概念
DOM 是Document Object Model( 文档对象模型 )的缩写。
DOM是把html里面的各种数据当作对象进行操作的一种思路。
比如一个超链，作为一个DOM对象，就可以使其隐藏，修改其href指向的地址。之前的博客里面也用到了一点点。
获取节点
| document.getElementById | 通过id获取元素节点 |
| getElementsByTagName | 通过标签名称获取元素节点 |
| getElementsByClassName | 通过类名获取元素节点 |
| getElementsByName | 通过表单元素的name获取元素节点 |
| null | 为什么会获取不到? |
| attributes | 获取属性节点 |
| childNodes | 获取内容节点 |
上面的四种获取方式中，除了getelmentbyid之外，其他三个的返回值都是一个节点数组，因为只有id是唯一的！！，所以能通过id准确无误的找到需要寻找的节点。
为什么会获取不到节点！出现NULL的情况，比如如下代码：
<html>
<script>
var div1 = document.getElementById("d1");
document.write(div1);
</script>
</html>
<div id="d1">hello HTML DOM</div>感觉逻辑上是没问题的，但是输出的是null。
这是因为javascript是解释语言，是顺序执行的，和java的函数不一样。 在执行到 document.getElementById的时候，div标签还没有加载，所以无法获取。所以要把html内容写到script的上面去才行。
获取属性节点的时候，首先通过getElementById获取元素节点，然后通过元素节点的attributes获取其下所有的属性节点。
因为属性节点是多个，所以是以数组的形式返回出来的，可以用数组下标的形式去定位某一个指定属性，比如id、name。如果是要指定某一个属性，那可以as["id"]取出名称是id的属性，就比自己去数下标要方便。
获取内容节点的时候，首先通过getElementById获取元素节点，然后通过childNodes获取其所有的子节点。 其中第一个子节点，下标为0，就是其内容节点。然后借助nodeName和nodeValue把内容节点的名称和值打印出来。
节点的属性
| nodeName | 节点名称 |
| nodeValue | 节点值 |
| nodeType | 节点类型 |
| innerHTML | 元素的文本内容 |
| id value className |
元素上的属性 |
nodeName：表示一个节点的名字
document.nodeName 文档的节点名，是 固定的#document
div1.nodeName 元素的节点名，是对应的标签名 div
div1.attributes[0].nodeName 属性的节点名，是对应的属性名 id
div1.childNodes[0].nodeName 内容的节点名，是固定的 #text
nodeValue：表示一个节点的值
document是没有nodeValue的：null
元素节点是没有nodeValue的：null
属性节点id的nodeValue：d1
内容节点的nodeValue：hello HTML DOM
nodeType表示一个节点的类型
修改与获取内容的值
修改与获取内容的值可以通过 childNodes[0].nodeValue进行
还有个简便办法就是通过innerHTML进行。 效果是一样的。
获取属性的时候
getAttribute("test")
attributes["test"].nodeValue
attributes[0].nodeValue
都行的。
作业：
1、
<!DOCTYPE html>
<html>
<head>
<title></title>
<input type="text" class="xx" id="t1">
<input type="button" class="xx" id="b1" value="验证" οnclick="get()">
<font id="ans" class="xx"> </font>
<script type="text/javascript">
function get() {
// body...
var text1 = document.getElementById('t1').value;
if(text1[0] == 'a' || text1[0] =='A')
{
document.getElementById("ans").childNodes[0].nodeValue="账号已经存在";
document.getElementById("ans").color="red";
//document.write(document.getElementById("ans").attributes[2].nodeValue);
}
else
{
document.getElementById("ans").childNodes[0].nodeValue="账号可以使用";
document.getElementById("ans").color="green";
}
console.log("End");
}
</script>
<style type="text/css">
.xx{
float: left;
}
</style>
</head>
</html>2.
<input type="button" οnclick="change1()" value="通过src属性直接切换图片"><br>
<input type="button" οnclick="change2()" value="通过属性节点切换图片"><br>
<img src="C:\Users\msi-\Desktop\imgs\23.jpg" id="img1">
<script type="text/javascript">
var imgg=document.getElementById('img1');
function change1() {
// body...
imgg.src="C:/Users/msi-/Desktop/imgs/25.jpg";
}
function change2() {
// body...
imgg.attributes[0].nodeValue="C:/Users/msi-/Desktop/imgs/27.jpg";
}
</script>