1.DOM简介
DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
2.常用DOM
<!--通过标签id属性访问某一元素-->
var objElement = document.getElementById("button1"); <!--button1为标签的id-->
alert(objElement.tagName);
<!--通过标签访问一组元素(数组)
var objElements = document.getElementsByTagName("input"); <!--input为HTML标签-->
alert(objElements[0].tagName);
<!--通过name属性访问一组元素(数组)
var objElementsN = document.getElementsByName("button"); <!--button为标签的name-->
alert(objElementsN[0].tagName);
<!--从元素数组中取出某个元素的方法-->
var obj = objElementsN[0];
var obj = objElementsN.button1; <!--button1为标签的id-->
var obj = objElementsN.item(0);
<!--通过某个元素来访问其父元素，子元素或同级元素-->
var obj = objElement.parentNode; <!--父元素，只能有一个-->
var obj = objElement.previousSibling; <!--同层上一个元素-->
var obj = objElement.nextSibling; <!--同层下一个元素-->
var obj = objElement.childNodes; <!--子元素数组，子元素可能有多个标签元素-->
var obj = objElement.firstChild; <!--第一个子元素-->
var obj = objElement.lastChild; <!--最后一个子元素-->
<!--访问元素内的内容（内容：开始标签和结束之间的字符串；内容为HTML(HTML标签的嵌套)，需要解释；内容为Text，直接显示；-->
objElement.innerHTML="标签修饰的内容为HTML";
objElement.innerText="标签修饰的内容当成文本";
objElement.firstChild.nodeValue:相当于innerText属性
<!--访问元素的属性值，也可以设置-->
alert(objElement.id); <!--元素名.属性名;这样就可以操作元素的属性值了-->
objElement.setAttribute("属性名",属性值);
<!--增加新的节点-->
var objImg = document.createElement("img"); <!--创建一个新元素-->
objImg.setAttribute("src","a.gif"); <!--为新元素设置相应的属性值-->
objFather.appendChild(objImg); <!--为objFather元素添加一个子元素-->
element.appendChild();
3.示例代码[html]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js测试</title>
</head>
<script type="text/javascript">
<!--通过标签id属性访问某一元素 -->
function test1(){
var objElement = document.getElementById("button1");
alert("元素值为："+objElement.value);
}
<!--通过标签访问一组元素(数组) -->
function test2(){
var objElements = document.getElementsByTagName("input");
alert("第一个标签名为："+objElements[0].tagName);
alert("第二个元素值为："+objElements[1].value);
}
<!--通过某个元素来访问其父元素 -->
function test3(){
var objElement = document.getElementById("button3");
var obj = objElement.parentNode;
alert("父元素的标签名："+obj.tagName);
}
<!--通过某个元素来访问其同层第一个元素 -->
function test4(){
var objElement = document.getElementById("button4");
var obj = objElement.parentNode.firstChild;
alert("同层第一个元素:"+obj.value);
}
<!--标签修饰的内容当成文本 -->
function test5(){
var objElements = document.getElementsByTagName("p");
objElements[0].innerText="CN:很高兴见到你！";
objElements[1].innerHTML='<a href="http://blog.csdn.net/nuptboyzhb/">NUPTboyZHB<a>';
}
<!--修改属性值 -->
function test6(){
var objElement = document.getElementById("button6");
objElement.setAttribute("value","已修改");
}
<!--增加新的节点 -->
function test7(){
var objFather = document.getElementById("button7").parentNode;
var objImgNewElement = document.createElement("img");
objImgNewElement.setAttribute("src","http://avatar.csdn.net/C/2/1/1_nuptboyzhb.jpg");
objFather.appendChild(objImgNewElement);
}
</script>
<body>
<p>Nice to meet you!</p>
<p>Hello world!</p>
<div>
<input id="button1" type="button" value="getElementById" onclick="test1()">
<input id="button2" type="button" value="getElementByTagName" onclick="test2()">
<input id="button3" type="button" value="Get-ParentNode" onclick="test3()">
<input id="button4" type="button" value="Get-firstChild" onclick="test4()">
<input id="button5" type="button" value="innerText-HTML" onclick="test5()">
<input id="button6" type="button" value="setAttribute" onclick="test6()">
<input id="button7" type="button" value="addElement" onclick="test7()">
</div>
</body>
</html>
未经允许，不得用于商业目的