1、DOM是文档对象模型（Document Object Model）的简称。
当网页加载时，可以将结构化文档在内存中转换成对象树。
简单的说，DOM并不是一种技术，而是一种访问结构化文档的思想。借助DOM模型，我们可以对DOM树进行修改、删除、新增等操作，让结构化文档动态化。
2、DOM模型中的节点--文档可以说是由节点构成的集合。在DOM模型中有以下3种节点：
（1）元素节点：各种标签就是这些元素节点的名称，如<ul>、<p>等；
（2）文本节点：文本节点总是被包含在元素节点的内部；
（3）属性节点：一般用来修饰元素节点的就称之为属性节点。
3、DOM对HTML元素的访问操作：
为了动态地修改HTML元素，须先访问HTML元素。DOM主要提供了两种方式来访问HTML元素：
（1）根据ID访问HTML元素--通过document对象调用getElementById（）方法来查找具有唯一id属性值的元素；
如下例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="name" content="content">
<title>DOM-使用getElementById方法查找元素</title>
<script type="text/javascript">
function showContent(){
var myDiv,content,txtName;
with(document){
myDiv=getElementById("myDiv");
content=getElementById("content");
txtName=getElementById("txtName");
}
alert(myDiv.innerHTML+"\n"+content.value+"\n"+txtName.value);
}
</script>
</head>
<body>
<div id="myDiv">我的div块</div>
<textarea id="content" rows="3" cols="25">好好学习,天天向上</textarea><br>
<input type="text" id="txtName" value="chen"><br>
<input type="button" id="btn_show" value="访问3个元素的内容" onclick="showContent()"><br>
</body>
</html>
（2）利用节点关系访问HTML元素。常用的属性和方法如下：
parentNode:返回当前节点的父亲节点；
previousSibling:返回当前节点的前一个兄弟节点；
nextSibling:返回当前节点的后一个兄弟节点；
childNode:返回当前节点的所有子节点；
firstChild:返回当前节点的第一个子节点；
lastChild:返回当前节点的最后一个子节点；
getElementsByTagName(tagName):返回当前节点的具有指定标签名的所有子节点。
如下例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#n4{color:red;}
</style>
</head>
<body>
<ul id="names">
<li id="n1">Bob</li>
<li id="n2">PJ</li>
<li id="n3">Teddy</li>
<li id="n4">Chariel</li>
<li id="n5">Gabe</li>
<li id="n6">Dorra</li>
</ul>
<input type="button" value="父节点" onclick="showContent(current.parentNode)">
<input type="button" value="第一个子节点" onclick="showContent(current.parentNode.firstChild.nextSibling)">
<!--注意：在火狐谷歌浏览器里面，换行也会被认为是子节点，
如果没有加nextSibling，在火狐谷歌浏览器输出的结果会是undefined-->
<input type="button" value="上一个节点" onclick="showContent(current.previousSibling.previousSibling)">
<input type="button" value="下一个节点" onclick="showContent(current.nextSibling.nextSibling)">
<input type="button" value="最后一个子节点" onclick="showContent(current.parentNode.lastChild.previousSibling)">
<input type="button" value="得到所有li元素的个数" onclick="showCount()">
<script type="text/javascript">
var current=document.getElementById("n4");
function showContent(target){
alert(target.innerHTML);
}
/*若是将JavaScript代码放在head标签中，那么会报错：Cannot read property 'parentNode' of null
因为JavaScript是解析执行的，HTML会从上面的标签往下执行，
语句“var current=document.getElementById("n4");”没有放在函数中，还没有解析到ul标签，就去找n4了，
所以会出错。解决方法之一是将JavaScript代码放在最后面，就是放在</body>前面。
还有一种解决方法就是先让HTML结构加载完毕之后再执行。
*/
function showCount(){
alert(document.getElementsByTagName("li").length);
}
</script>
</body>
</html>
4、DOM访问表单控件的常用属性和方法如下：
action:返回该表单的提交地址；
method:返回表单内的method属性，主要有post和get两个值；
target:确定提交表单时的结果窗口，主要有"_self"、"_blank"、"_top"等；
elements:返回表单内全部表单控件所组成的数组，通过数组可以访问表单内的任何表单控件；
length:返回表单内表单域的个数；
reset()、submit():重置表单和确定表单方法。
--------------------------------------------------------------
在elements返回的数组中访问具体的表单控件语法如下:
.elements[index]:返回该表单中第index个表单控件；
.elements[elementName]:返回表单内id或name为elementName的表单控件；
.elementName:返回表单内id或name为elementName的表单控件。
----------------------------------------------------------------
如下例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>提交表单控件</title>
<script type="text/javascript">
function operatorForm(){
var myForm=document.forms[0];//document.forms可以得到所有表单,即表单数组
alert(myForm.action);
alert(myForm.method);
alert(myForm.target);
myForm.submit();
}
/*总结：DOM访问表单控件常用的属性和方法如下：
action:返回该表单的提交地址；
method:返回表单内的method属性，主要有post和get两个值；
target:确定提交表单时的结果窗口，主要有"_self"、"_blank"、"_top"等；
elements:返回表单内全部表单控件所组成的数组，通过数组可以访问表单内的任何表单控件；
length:返回表单内表单域的个数；
reset()、submit():重置表单和确定表单方法。
在elements返回的数组中访问具体的表单控件语法如下:
.elements[index]:返回该表单中第index个表单控件；
.elements[elementName]:返回表单内id或name为elementName的表单控件；
.elementName:返回表单内id或name为elementName的表单控件。
*/
</script>
</head>
<body>
<form id="myForm" action="#" method="get" target="_self">
<input type="text" name="userName" value="chen"><br>
<input type="text" name="password" value="123456"><br>
<select name="city">
<option value="shanghai">上海</option>
<option value="nanjing" selected="selected">南京</option>
</select><br>
<input type="button" value="获取表单内的第一个控件" onclick="alert(document.getElementById('myForm').elements[0].value);"><br>
<input type="button" value="获取表单内的第二个控件" onclick="alert(document.getElementById('myForm').elements['password'].value);"><br>
<input type="button" value="获取表单内的第三个控件" onclick="alert(document.getElementById('myForm').city.value);"><br>
<input type="button" value="操作表单" onclick="operatorForm()"><br>
</form>
</body>
</html>
5、DOM访问列表框、下拉菜单的常用属性：
form:返回列表框、下拉菜单所在的表单对象；
length:返回列表框、下拉菜单的选项个数；
options:返回列表框、下拉菜单里所有的选项组成的数组；
selectedIndex:返回下拉列表中选中项的索引；
type:返回下拉列表的类型，多选的话返回select-multiple，单选返回select-one。
-----------------------------------------------------------------------------------------------
使用options[index]返回具体选项所对应的常用属性：
defaultSelected:返回该选项默认是否被选中；
index:返回该选项在列框、下拉菜单中的索引；
selected:返回该选项是否被选中；
text:返回该选项呈现的文本；
value:返回该选项的value属性值。
------------------------------------------------------------------------
如下例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>查找列表框、下拉菜单控件</title>
<!---->
</head>
<body>
<select id="city" name="city" size="5">
<option value="beijing">北京</option>
<option value="shanghai" selected="selected">上海</option>
<option value="hangzhou">杭州</option>
<option value="xian">西安</option>
<option value="shenzhen">深圳</option>
<option value="guangzhou">广州</option>
</select><br>
<input type="button" value="第一个城市" onclick="change(s_city.options[0])">
<input type="button" value="上一个城市" onclick="change(s_city.options[s_city.selectedIndex-1])">
<input type="button" value="下一个城市" onclick="change(s_city.options[s_city.selectedIndex+1])">
<input type="button" value="最后一个城市" onclick="change(s_city.options[s_city.length-1])">
<script type="text/javascript">
var s_city=document.getElementById("city");
var change=function(city){
alert(city.text);//text返回的是该选项呈现的文本，若是value则返回该选项的value属性值
}
/*总结：DOM访问列表框、下拉菜单的常用属性如下：
form:返回列表框、下拉菜单所在的表单对象；
length:返回列表框、下拉菜单的选项个数；
options:返回列表框、下拉菜单里所有的选项组成的数组；
selectedIndex:返回下拉列表中选中项的索引；
type:返回下拉列表的类型，多选的话返回select-multiple，单选返回select-one。
使用options[index]返回具体选项所对应的常用属性：
defaultSelected:返回该选项默认是否被选中；
index:返回该选项在列框、下拉菜单中的索引；
selected:返回该选项是否被选中；
text:返回该选项呈现的文本；
value:返回该选项的value属性值。
*/
</script>
</body>
</html>
6、DOM访问表格子元素的常用属性和方法如下：
caption:返回表格的标题对象；
rows:返回该表格里的所有表格行；
tbodies:返回该表格里所有<tbody.../>元素组成的数组；
tfoot:返回该表格里所有<tfoot.../>元素；
thead:返回该表格里所有<thead.../>元素。
通过rows[index]返回表格指定的行所对应的属性：
cells:返回该表格行内所有的单元格组成的数组；
rowIndex:返回该表格行在表格内的索引值；
sectionRowIndex:返回该表格行在其所在元素(tbody、thead等元素)的索引值。
通过cells[index]返回表格指定的列所对应的属性：
cellIndex:返回该单元格在表格行内的索引值。
例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>查找表单控件</title>
<script type="text/javascript">
function update(){
var row=document.getElementById("row").value;
var cel=document.getElementById("cel").value;
var t=document.getElementById("myTable");
//t.rows[row-1].cells[cel-1].innerHTML=document.getElementById("content").value;
t.rows.item(row-1).cells.item(cel-1).innerHTML=document.getElementById("content").value;
alert("修改成功!");
}
/*总结：DOM访问表格子元素的常用属性和方法如下：
caption:返回表格的标题对象；
rows:返回该表格里的所有表格行；
tbodies:返回该表格里所有<tbody.../>元素组成的数组；
tfoot:返回该表格里所有<tfoot.../>元素；
thead:返回该表格里所有<thead.../>元素。
通过rows[index]返回表格指定的行所对应的属性：
cells:返回该表格行内所有的单元格组成的数组；
rowIndex:返回该表格行在表格内的索引值；
sectionRowIndex:返回该表格行在其所在元素(tbody、thead等元素)的索引值。
通过cells[index]返回表格指定的列所对应的属性：
cellIndex:返回该单元格在表格行内的索引值。
*/
</script>
</head>
<body>
<table id="myTable" border="1">
<caption>编程语言</caption>
<tr>
<td>C</td>
<td>C++</td>
</tr>
<tr>
<td>J2EE</td>
<td>Android</td>
</tr>
<tr>
<td>Web</td>
<td>PHP</td>
</tr>
</table>
<input type="button" value="表格标题" onclick="alert(document.getElementById('myTable').caption.innerHTML);">
<input type="button" value="第一行、第一格" onclick="alert(document.getElementById('myTable').rows[0].cells[0].innerHTML);">
<input type="button" value="第二行、第二格" onclick="alert(document.getElementById('myTable').rows[1].cells[1].innerHTML);">
<input type="button" value="第三行、第二格" onclick="alert(document.getElementById('myTable').rows[2].cells[1].innerHTML);"><br>
设置指定单元格的值：第<input type="text" id="row" size="2">行,
第<input type="text" id="cel" size="2">列的值为
<input type="text" id="content" size="10">
<input type="button" id="btn_set" value="修改" onclick="update()">
</body>
</html>
来源：https://www.cnblogs.com/dorra/p/7339727.html