HTML DOM 对象 - 方法和属性
一些常用的 HTML DOM 方法：
- getElementById(id) - 获取带有指定 id 的节点（元素）
- appendChild(node) - 插入新的子节点（元素）
- removeChild(node) - 删除子节点（元素）
一些常用的 HTML DOM 属性：
- innerHTML - 节点（元素）的文本值
- parentNode - 节点（元素）的父节点
- childNodes - 节点（元素）的子节点
- attributes - 节点（元素）的属性节点
代码示例：
<!DOCTYPE html>
<html>
<body>
<p >Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法！</p>
<script>
x=document.getElementById("Example");
document.write("<p>Example段落的文本：" + x.innerHTML + "</p>");
</script>
</body>
</html>
运行结果：
Hello World!
本例演示 getElementById 方法！
Example段落的文本：Hello World!
============================================================================================================
nodeName 属性
nodeName 属性规定节点的名称。
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
注释：nodeName 始终包含 HTML 元素的大写字母标签名。
nodeValue 属性
nodeValue 属性规定节点的值。
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
nodeName&nodeValue的使用方法：
<!DOCTYPE html>
<html>
<body>
<p >Hello World!</p>
<script>
x=document.getElementById("Example");
txt=document.getElementById("Example").innerHTML;
document.write("<p>"+"The text is:"+txt+"</p>");
document.write("</br>");
document.write("<p>示例节点的nodeValue:"+x.nodeValue +"</p>");
document.write("<p>示例节点的子节点的nodeValue:"+x.firstChild.nodeValue +"</p>");
document.write("</br>");
document.write("<p>示例节点的nodeName:"+x.nodeName+ "</p>");
document.write("<p>示例节点的子节点的nodeName:"+x.firstChild.nodeName+ "</p>");
document.write("</br>");
document.write("<p>示例节点的类型:"+x.nodeType+"</p>");
document.write("<p>示例节点的第一个子节点的类型:"+x.firstChild.nodeType+"</p>");
</script>
</body>
</html>
示例运行结果：
Hello World!
The text is:Hello World!
示例节点的nodeValue:null
示例节点的子节点的nodeValue:Hello World!
示例节点的nodeName:P
示例节点的子节点的nodeName:#text
示例节点的类型:1
示例节点的第一个子节点的类型:3
<!DOCTYPE html>
<html>
<body>
<p >Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法的使用方法：</p>
<p>DOM 很有用！</p>
<p>我在学习，我相信我能学好！</p>
<script>
document.write("</br>");
x=document.getElementById("intro");
document.write("<p>getElementById Return Value is：" + x + "</p>");
document.write("<p>getElementById Return Value's NodeName’：" + x.nodeName + "</p>");
document.write("<p>getElementById Return Value's NodeValue’：" + x.nodeValue + "</p>");
document.write("</br>");
document.write("<p>getElementById Return Value's childNode's NodeValue is：" + x.firstChild.nodeValue + "</p>");
document.write("<p>Id为intro段落的文本值为：" + x.innerHTML + "</p>");
document.write("</br>");
<!--这里的TagName就是标签名称，html的标签 -->
tagNameList=document.getElementsByTagName("p");
document.write("<p>第一段的文本: " + tagNameList[0].innerHTML +"</p>");
document.write("<p>第二段的文本: " + tagNameList[1].innerHTML +"</p>");
document.write("<p>第三段的文本: " + tagNameList[2].innerHTML +"</p>");
document.write("<p>第三段的文本: " + tagNameList[3].innerHTML +"</p>");
document.write("</br>");
<!--这里的TagName就是标签名称，html的标签 -->
</script>
</body>
</html>
运行结果：
Hello World!
本例演示 getElementById 方法的使用方法：
DOM 很有用！
我在学习，我相信我能学好！
getElementById Return Value is：[object HTMLParagraphElement]
getElementById Return Value's NodeName’：P
getElementById Return Value's NodeValue’：null
getElementById Return Value's childNode's NodeValue is：Hello World!
Id为intro段落的文本值为：Hello World!
第一段的文本: Hello World!
第二段的文本: 本例演示 getElementById 方法的使用方法：
第三段的文本: DOM 很有用！
