1、认识Node节点对象
Node节点对象是元素节点对象、属性节点对象、文本节点对象和注释节点对象的父类，元素节点对象、属性节点对象、文本节点对象和注释节点对象都继承于Node节点对象。
Node节点对象有一个属性nodeType，表示该节点的类型（对象类型），节点类型如下表所示：
元素节点对象
元素节点的子节点类型可以是元素节点、属性节点、文本节点和注释节点。如下图所示：
元素节点可以使用Node节点的全部属性和方法。
Document对象的documentElement属性值是文档根Node节点对象，类型是元素节点类型。元素节点下面有一个或多个Node节点对象，Node节点下面又有一个多个Node节点对象，以此类推，不同层次的Node节点对象构成了树结构。
例如：下面的HTML文档
<html> <head> <title>送杜少府之任蜀州</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <h3>送杜少府之任蜀州</h3> <div> <p>城阙辅三秦，风烟望五津。与君离别意，同是宦游人。</p> </div> </body> </html>
Node节点对象树结构为：
属性节点对象
属性节点的子节点类型只能是文本节点。
注意事项：虽然在 W3C DOM 内核中，规定属性节点继承Node节点对象的所有属性和方法 ，但在DOM 4 中，属性节点对象不再从Node节点对象中继承，因此属性节点尽量避免使用Node节点的全部属性和方法。
文本节点对象
文本节点对象表示元素或属性中的文本内容，该节点对象没有任何子节点。因此Node节点对象关于子节点的属性和操作是不能继承使用的。
注释节点对象
注释节点对象表示注释内容，该节点对象没有任何子节点。因此Node节点对象关于子节点的属性和操作是不能继承使用的。
2、Node节点属性和方法
Node节点对象的主要属性如下表所示：
Node节点对象的主要方法如下表所示：
注释（1）
appendChild()向当前元素添加一个新的子节点，当节点类型为元素节点（Element）时，添加的子节点可以是元素节点、属性节点、文本节点和注释节点。其它类型不支持该方法。新节点会添加到元素childNodes的尾部。
语法：
appendChild(node)
参数node是节点对象，node类型可以是元素节点、文本节点、属性节点和注释节点。
案例6：添加元素和文本节点（案例代码见unit3\case6.html）。
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function add_node(){
// 获取id值为id_node的节点对象
var node = document.getElementById("id_node")
// 创建一个<p>元素节点
e_node = document.createElement("P")
// 创建文本节点
var text_obj = document.createTextNode("城阙辅三秦，风烟望五津。");
// e_node元素节点添加文本子节点
e_node.appendChild(text_obj);
// 添加e_node到node节点对象
node.appendChild(e_node);
}
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<div id="id_node"></div>
<p><input type="button" value="添加节点" onclick="add_node()"/></p>
</body>
<html>注释（2）
insertBefore()在指定的节点前插入一个新的子节点。该方法仅限于类型为元素节点的Node节点对象。
语法：
insertBefore(newchild,refchild)
参数newchild是要插入的新节点，参数refchild是已存在的子节点，在该子节点前插入newchild节点。
案例7：插入元素和文本节点（案例代码见unit3\case7.html）。
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function insert_node(){
// 获取id值为id_content的节点对象
var content_node = document.getElementById("id_content")
// 创建一个<p>元素节点
new_node = document.createElement("P")
// 创建文本节点
var text_obj = document.createTextNode("城阙辅三秦，风烟望五津。");
// new_node元素节点添加文本子节点
new_node.appendChild(text_obj);
// 获取id值为id_p2的节点对象
var p2_node = document.getElementById("id_p2")
// 在p2_node节点前插入new_node节点
content_node.insertBefore(new_node,p2_node);
}
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<div id="id_content">
<p id="id_p2">与君离别意，同是宦游人。</p>
</div>
<p><input type="button" value="插入节点" onclick="insert_node()"/></p>
</body>
<html>注释（3）
removeChild()删除并返回当前节点对象的指定子节点。
语法：
removeChild(node)
参数node为要删除的节点对象。
3、 Element节点属性和方法
Element节点是元素节点对象，Element节点继承了Node节点对象的所有属性和方法，也定义了自己的属性和方法。
元素节点对象的主要属性如下表所示：
注释（1）
attributes属性是一个数组结构，数组元素为Attribute对象，它是一个键值对，存储了元素节点对象的属性及值。Attribute对象有两个属性：分别是name和value，name是键值对的key，value是键值对的值。
案例8：遍历元素的属性（案例代码见unit3\case8.html）。
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function get_attribute(){
// 获取id值为id_input的节点对象
var obj = document.getElementById("id_input")
// 获取obj对象的属性数组
attri = obj.attributes
// 遍历属性数组
for( i = 0; i < attri.length; i++ ) {
// 获取一个Attribute对象
attr = attri[i]
// Attribute对象的键值对赋值给key_value
key_value = attr.name +":" + attr.value
obj.value += key_value
}
}
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<p> <input type="text" id="id_input" name="username" maxlength="100" /></p>
<p><input type="button" value="获取节点属性" onclick="get_attribute()"/></p>
</body>
<html>注释（2）
children 属性与 childNodes 属性的差别：
childNodes 属性返回所有的节点，包括文本节点、注释节点；
children 属性只返回元素节点。
元素对象的主要方法如下表所示：
注释（1）
addEventListener()向当前元素节点对象添加事件监听器，事件监听器就是把事件和处理事件的JS函数绑定在一起，当事件被触发时，该JS函数被调用。使用方法参见Document对象。
注释（2）
getAttribute()返回当前元素节点对象指定的属性值。
语法：
getAttribute(attributename)
参数attributename是元素节点对象的属性名称，类型为字符串。
案例9：获取元素的属性值（案例代码见unit3\case9.html）。
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function get_attribute_value(){
// 获取id值为id_input的节点对象
var obj = document.getElementById("id_input")
// 获取obj节点对象的name属性值
obj.value = obj.getAttribute("name")
}
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<p> <input type="text" id="id_input" name="username" maxlength="100" /></p>
<p><input type="button" value="获取属性值" onclick="get_attribute_value()"/></p>
</body>
<html>注释（3）
setAttribute()设置或修改当前元素节点对象的属性值。
语法：
setAttribute(name,value)
参数name是属性名称，类型为字符串。参数value是属性的值，类型为字符串。
案例10：设置元素属性值（案例代码见unit3\case10.html）。
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function set_attribute_value(){
// 获取id值为id_input的节点对象
var obj = document.getElementById("id_input")
// 修改name属性
obj.setAttribute("name","user_name")
// 添加value属性
obj.setAttribute("value","属性值被修改")
}
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<p> <input type="text" id="id_input" name="username" /></p>
<p><input type="button" value="设置属性值" onclick="set_attribute_value()"/></p>
</body>
<html>