第十二章：第27节DOM——节点的访问（一）使用属性访问
更新于：2017-11-22 13:36:59
使用以下几个节点属性可以做到HTML元素任何节点的访问：
nodeName：节点名称，也就是标记名称。
nodeValue：节点的值，只有文本节点、属性节点才有值。元素节点是没有值的。
nodeType：节点类型
firstChild：第一个子节点。(浏览器兼容性不好)
lastChild：最后一个子节点。(浏览器兼容性不好)
childNodes：子节点列表，是一个数组。
注意：所有节点的起点都是document对象。这几个属性是所有节点对象都可以调用的属性。
用代码为大家演示这几个属性的用法：
这是一个完整的HTML页面，46——48行分别是三个按钮，各有三个点击事件属性。（input标签button类型是个按钮，主要作用就是为了触发点击事件）
1）点击第一个按钮“访问table节点”，会触发JS函数“getNodeTable”:
集合整个HTML页面，我们来解读下上面代码的意思。
8行“document.firstChild”意思是document节点的第一个子节点，看整个页面可知“<html></html>”（<html>节点）是它的第一个子节点（也是唯一的子节点）。
10行“node_html.lastChild”意思是<HTML>节点的最后一个子节点，看页面可知<HTML>标签中包含两个子标签（<head>、<body>），<body>节点就是<HTML>节点的最后一个子节点。
12行“node_body.firstChild”意思是<body>节点的第一个子节点，看页面可知<table>标签是它的第一个子节点
13行弹窗输出<table>节点的名称：
2）点击第二个按钮“访问第二个tr节点”，会触发JS函数“getNodeTr”:
17行“document.body”意思是直接用document对象的body属性获取<body>节点。
19行“node_body.firstChild”意思是<body>节点的第一个子节点，那就是<table>节点。
21行“node_table.firstChild”意思是<table>节点的第一个子节点，很多人一定觉着是第一个<tr>节点，其实不是，是<tbody>节点。（可用node_tbody.nodeName打印下）。在<table>与<tr>之间还有一个节点那就是<tbody>，只是我们一般都省略不写，可它依然是存在的。（大家了解下就可以）
23行“node_tbody.childNodes”意思是<tbody>节点的所有子节点，以数组的形式返回。
24行弹出<tbody>节点第二个子节点（也就是第二个tr节点）：
3）点击第三个按钮“修改第二行第二个单元格内容”，会触发JS函数“edit”:
28——34行大家能读懂了吧
36行“node_trs[1].childNodes”意思是第二个tr节点所有的子节点，它的子节点应该是“<td>1001</td><td>1001新闻</td>”这两个<td>节点。
38行“node_tds[1].firstChild”意思是第二个<td>节点的子节点，“<td>1001新闻</td>”的子节点是一个文本节点。
40行使用文本节点的nodeValue属性对文本节点做修改。
41行使用了节点对象的setAttribute方法为第二个<td>节点添加了一个属性节点，那就是“style”。
触发点击事件看看效果：
文本被修改成了“欢迎光临PHP楠神”，添加的CSS属性也生效了。
说明：
使用上面的属性我们可以访问到页面的任何节点元素，可实际中很少这样写的，大家应该能猜出来什么原因。那就是页面HTML元素的稍微改动，就会导致JS代码获取节点不正确。比如在<table>元素前在加一个<p>元素，那<table>节点就是<body>节点的第二个子节点了，代码就失效了。
有个地方要注意：
没有对页面做内容的改动，楠神只是把<table>元素在书写上做了换行处理，看起来更易读。此时，你觉着我们的代码是否还能用？
当点击第二个按钮时报错了。这个错误其实是出在19行。
我们用“console.log”输出下“node_table”到底是什么？看看是不是table节点对象。
结果是“#text”，什么意思呢？也就是“node_table”是一个文本节点对象，而不是table节点对象。为什么会这样呢？
因为在Firefox、chrome、safari、opera中，或者IE9及以上版本，会把空格或换行，当成一个文本节点(#text)。
要想精确获取某个节点，需把所有标记之间的空格和换行都删除掉。不然的话就要把空格和换行全部当成文本节点处理。
是不是挺无语的
下节我们学习更好的节点访问方式。
总结：
<html>节点的查找
（1）document.firstChild
（2）document.documentElement
<body>节点的查找
（1） document.firstChild.lastChild
（2） document.body
有时通过document.firstChild.lastChild会找不到<body>节点的原因：
DOM最初是给HTML4.01开发的，HTML4.0是没有DTD文档类型定的。而我们现在的文档是XHTML1.0。
看手册里的有关介绍：
