JavaScript四（DOM编程）

一.绪论

DOM是文档对象模型（Document Object Module）的简称，借助DOM模型，可以将结构化文档，转换成DOM树，程序可以访问，修改，增加，删除树的节点。程序通过操作DOM树时，结构化文档也会随之

动态改变。

DOM并不是一种技术，它只是访问结构化文档的一种思想，各种语言都有自己的DOM解释器。

DOM为常用的HTML元素提供了一整套的继承体系，从页面的document对象到每个常用的HTML元素，DOM模型都提供了对应的类，每个类都提供了相应的方法来操作元素本身，属性及其子元素。DOM模型允许

以树的形式操作HTML文档的每一个元素。

HTML中，Node，Document，Element，HTMLELement都是普通HTML元素的超类，不直接对应于HTML页面的控件。但他们所包含的方法也可被其他页面元素调用。

二.访问HTML元素

1.根据Id访问HTML元素

document.getElementById(idVal):返回文档中Id属性为idVal的HTML元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>根据Id访问HTML元素</title>
  <script type="text/javascript">
  var accessById = function(){
     alert(document.getElementById("a").innerHTML+"\n"+document.getElementById("b").value);
  }
  </script>
</head>
<body>
<div id="a">疯狂java讲义</div>
<textarea  id="b" cols="30" rows="3">轻量级javaEE企业应用实战</textarea>
<input type="button" value="访问2个元素" onclick="accessById()"/>
</body>
</html>

innerHTML属性：该属性代表该元素的内容。当某个元素的开始标签和结束标签之间都是字符串内容时（不包含其他子元素），JavaScript子元素可通过它的innerHTML属性返回这些字符串内容

value属性：<textarea.../>是一个表单控件，开始标签和结束标签之间的内容都是它的值，只能通过value属性来访问。不仅如此，，还有<input.../>元素所生成的表单控件，包括单行文本框，各种按钮等，

它们的可视化文本都有value属性控制，因此通过value属性获取它们的内容。除此之外的HTML元素，包括列表框，下拉菜单的列表项，<label.../>表单域，<button.../>按钮，都应通过innerHTML

来获取它们的内容。

2.根据css选择器访问HTML元素

根据CSS选择器来访问HTML元素由document的如下方法提供

a）Element querySeletor(seletors)：该方法的参数既可是一个CSS选择器，也可是用逗号隔开的多个CSS选择器，该方法返回HTML文档中第一个匹配选择器参数的HTML元素。

下面代码示范了querySeletor()的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据选择器访问HTML元素</title>
  <script type="text/javascript">
    var accessById = function()
    {
      alert(document.querySelector("#a").innerHTML+"\n"+document.querySelector("#b").value);
    }
  </script>
</head>
<body>
<div id="a">疯狂java讲义</div>
<textarea  id="b" cols="30" rows="3">轻量级javaEE企业应用实战</textarea>
<input type="button" value="访问2个元素" onclick="accessById()"/>
</body>
</html>

b）NodeList querySeletorALl(seletors)：该方法与前一个方法的用法类似，只是该方法将返回所有符合CSS选择器的HTML元素。

下面代码示范了querySeletorAll()的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据选择器访问HTML元素</title>
  <script type="text/javascript">
    var change = function()
    {
      var divList = document.querySelectorAll("div");
      alert(divList);
      for(var i in divList)
      {
        divList[i].innerHTML = "测试内容"+ i;
        divList[i].style.width = '300px';
        divList[i].style.height = '50px';
        divList[i].style.margin = '10px';
        divList[i].style.backgroundColor = '#faa';
      }
    }
  </script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<input type="button" onclick="change();" value="修改全部div元素"/>
</body>
</html>

3.利用节点关系访问HTML元素

一旦获取了某个HTML元素，由于该元素实际上与DOM树的某个节点对应，因此可以利用节点之间的父子、兄弟关系来访问HTML元素。

利用节点关系访问HTML元素的方法如下：

Node parentNode：返回当前节点的父节点。只读属性。

Node previousSibling：返回当前节点的前一个兄弟节点，只读属性。

Node nextSibling：返回当前节点的后一个兄弟节点，只读属性。

Node[] childNodes：返回当前节点的所有子节点，只读属性。

Node[] getElementByTagName(tagName)：返回当前节点的具有指定标签名的所有子节点。

Node firstChild：返回当前节点的第一个子节点，只读属性

Node lastChild：返回当前节点的最后一个子节点，只读属性。

下面页面代码示范了如何利用节点关系访问HTML元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据节点关系访问HTML元素</title>
  <style type="text/css">
    .selected{
      background-color: #66f;
    }
  </style>
</head>
<body>
<ol id="books">
  <li id="java">疯狂Java讲义</li>
  <li id="ssh">轻量级JavaEE企业应用实战</li>
  <li id="ajax" class="selected">疯狂Ajax讲义</li>
  <li id="xml">疯狂xml讲义</li>
  <li id="ejb">经典JavaEE企业应用实战</li>
  <li id="android">疯狂Android讲义</li>
</ol>

<input type="button" value="父节点" onclick="change(curTarget.parentNode);"/>
<input type="button" value="第一个" onclick="change(curTarget.parentNode.firstChild.nextSibling);"/>
<input type="button" value="上一个" onclick="change(curTarget.previousSibling.previousSibling);"/>
<input type="button" value="下一个" onclick="change(curTarget.nextSibling.nextSibling);"/>
<input type="button" value="最后一个" onclick="change(curTarget.parentNode.lastChild.previousSibling);"/>
<script type="text/javascript">
  var curTarget = document.getElementById("ajax");
  var change = function(target)
  {
    alert(target.innerHTML);
  }
</script>
</body>
</html>

4.访问表单控件

表单在DOM中由HTMLFromElement对象表示，该对象除了可调用前面介绍的基本属性和方法之外，还拥有如下几个常用属性。

action：返回该表单的action属性值，该属性用于指定表单的提交地址。读写属性。

elements：返回表单内全部表单控件所组成的数组。使用该数组可以访问该表单内的任何表单控件。只读属性。

length：返回表单内表单域的个数，该属性等于elements.length的值。只读属性。

method：返回表单的method属性，该属性通常有post和get两个值，默认采用get方式。该属性用于确定表单发送请求的方式。读写属性。

target：用于确定提交表单时的结果窗口，可以是_self，_parent，_top，_blank等值。

除此之外，HTMLFormElement对象还有如下两个常用方法。

reset：重设表单，将所有表单域的值设置为初始值。

submit：提交表单。

因为HTMLFormElement提供了elements属性返回表单内的全部表单控件，因此可通过该属性访问表单里的表单控件。看如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问表单控件</title>
</head>
<body>
<form id="d" action="" method="get">
  <input name="user" type="text"/><br/>
  <input name="pass" type="text"/><br/>
  <select name="color">
    <option value="red">红色</option>
    <option value="blue">蓝色</option>
  </select><br/>
  <input type="button" value="第一个" onclick="alert(document.getElementById('d').elements[0].value);"/>
  <input type="button" value="第二个" onclick="alert(document.getElementById('d').elements['pass'].value);"/>
  <input type="button" value="第三个" onclick="alert(document.getElementById('d').color.value);"/>
</form>
</body>
</html>

实际上，HTMLFormElement的elements属性值并不是一个普通数组，而是一个HTMLCollection对象，该对象既可当成普通数组使用（通过数字索引访问元素），也可以通过关联数组来访问（通过

字符串索引来访问元素，即元素的id或name属性）。

HTMLCollection访问表单控件有以下方法：

formObj.elements[index]：返回表单中第index个元素。

formObj.elements['elementName']：返回表单中id或name为elementName的表单控件。

formObj.elementName：返回表单中id或name为elementName的表单控件。

5.访问列表框，下拉菜单的选项

HTMLSelectElement代表一个列表框或下拉菜单，该对象除了可使用普通HTML元素的各种属性和方法外，还支持如下额外的属性。

form：返回列表框，下拉菜单所在的表单对象。只读属性。

length：返回列表框，下拉菜单的选项个数。该属性的值可通过增加或删除列表框的选项来改变，只读属性。

options：返回列表框，下拉菜单里所有选项组成的数组。只读属性。

selectedIndex：返回下拉列表中选中选项的索引，如果多个选项被选中，则只返回第一个被选中选项的索引。读写属性。

type：返回下拉列表的类型，即是否允许多选。如果允许多选，则返回select-multiple；如果不支持多选，则返回select-one.

HTMLSelectElement的options属性可直接访问列表框，下拉菜单的所有列表项，传入指定索引即可访问指定列表项，语法格式如下：

select.options[index]：返回列表框，下拉菜单的index+1个选项

列表框，下拉菜单的选项由HTMLOptionElement对象表示，除了前面介绍的普通属性之外，还提供了如下常用属性。

form：返回包含该选项所处列表框，下拉菜单的表单对象。

defaultSelected：返回该选项默认是否被选中，通过修改该属性可以动态改变该选项是否被选中。

index：返回该选项在列表框，下拉菜单中的索引。只读属性当然也可以通过增加或者删除列表框的选项来改变选项的索引值。

selected：返回选项是否被选中，通过修改该属性可以动态改变该选项是否被选中。

text：返回该选项呈现的文本，也就是<option>和</option>之间的文本，对HTMLOptionElement而言，该属性与innerHTML属性相同。

value：返回每个选项的value属性，可以通过设置该属性来改变选项的value值。演示代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问列表项</title>
</head>
<body>
<select name="mySelect" id="mySelect" size="6">
  <option value="java">疯狂Java讲义</option>
  <option value="ssh">轻量级JavaEE企业应用实战</option>
  <option value="ajax" class="selected">疯狂Ajax讲义</option>
  <option value="xml">疯狂xml讲义</option>
  <option value="ejb">经典JavaEE企业应用实战</option>
  <option value="android">疯狂Android讲义</option>
</select><br/>
<input type="button" value="第一个" onclick="change(curTarget.options[0]);"/>
<input type="button" value="上一个" onclick="change(curTarget.options[curTarget.selectedIndex-1]);"/>
<input type="button" value="下一个" onclick="change(curTarget.options[curTarget.selectedIndex+1]);"/>
<input type="button" value="最后一个" onclick="change(curTarget.options[curTarget.length-1]);"/>
<script type="text/javascript">
  var curTarget = document.getElementById('mySelect');
  var change = function(target)
  {
    alert(target.text);
  }
</script>
</body>
</html>

6.访问表格子元素

HTMLTableElement代表表格，该对象除了可使用普通HTML元素的各种属性属性和方法以外，还支持如下额外的属性。

caption：返回表格的标题对象。可通过修改该属性来改变表格标题。

HTMLCollection rows：返回该表格里的所有表格行，该属性会返回<thead.../>、<tfoot.../>和<tbody.../>元素里的所有表格行。只读属性。

HTMLCollection tBodies：返回该表格里所有<tBody.../>元素组成的数组。

tFoot：返回表格里的<tfoot.../>元素。

tHead：返回表格里的所有<thead.../>元素。

如果需要访问表格的指定表格行，只需要使用如下格式即可。

table.rows[index]：返回表格第index+1行的表格行。

HTMLTableRowElement代表表格行，它除了可使用普通HTML元素的各种属性属性和方法以外，还支持如下额外的属性。

cells：返回表格行内所有的单元格组成的数组。只读属性。

rowIndex：返回表格行在表格内的索引值。只读属性。

sectionRowIndex：返回该表格行在其所在元素（<tbody.../>、<thead.../>等元素）的索引值。只读属性。

HTMLTableCellElement代表单元格，它除了可使用普通HTML元素的各种属性属性和方法以外，还支持如下额外的属性。

cellIndex：返回该单元格在表格行内的索引值。只读属性。

下面代码示范了如何访问HTML表格的内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table id="d" border = '1'>
  <caption>疯狂Java体系</caption>
  <tr>
    <td>疯狂Java讲义</td>
    <td>轻量级Java EE企业应用实战</td>
  </tr>
  <tr>
    <td>疯狂ajax讲义</td>
    <td>经典Java EE企业应用实战</td>
  </tr>
  <tr>
    <td>疯狂xml讲义</td>
    <td>疯狂Android讲义</td>
  </tr>
</table>

<input type="button" value="表格标题" onclick="alert(document.getElementById('d').caption.innerHTML);"/>
<input type="button" value="第一行，第一格" onclick="alert(document.getElementById('d').rows[0].innerHTML);"/>
<input type="button" value="第二行，第二格" onclick="alert(document.getElementById('d').rows[1].cells[1].innerHTML);"/>
<input type="button" value="第三行，第二格" onclick="alert(document.getElementById('d').rows[2].cells[1].innerHTML);"/>
</body>
</html>

三.修改HTML元素

修改节点通常是修改节点的内容，修改节点的属性，或者修改节点的css样式。总结一句话：HTML元素的读写属性都可被修改。修改HTML元素通常通过修改

如下几个常用属性来实现。

innerHTML：大部分HTML页面元素如<div.../>、<td.../>的呈现内容有该属性控制。

value：表单控件如<input.../>、<textarea.../>的呈现内容由该属性控制。

className：修改HTML元素的css样式，该属性的合法值是一个class选择器名。

style：修改HTML元素的内联样式。

options[index]：直接对<select.../>元素的指定列表项赋值，可改变列表框，下拉菜单的指定列表项。

下面代码演示了一个可编辑的表格，在页面中指定需要修改的表格行、列，然后输入要修改的值，即可动态改变单元格的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑表格值</title>
</head>
<body>
修改第 <input id='row' type="text" size="2"/>行，第 <input id='cel' type="text" size="2"/>列的值为：
<input id='celVal' type="text" size="16"/><br/>
<input id='chg' type="button" value="改变" onclick="change();">
<table id="d" border = '1' style="width:580px;border-collapse: collapse;">
  <tr>
    <td>疯狂Java讲义</td>
    <td>轻量级Java EE企业应用实战</td>
  </tr>
  <tr>
    <td>疯狂ajax讲义</td>
    <td>经典Java EE企业应用实战</td>
  </tr>
  <tr>
    <td>疯狂xml讲义</td>
    <td>疯狂Android讲义</td>
  </tr>
</table>
<script type="text/javascript">
  var change = function()
  {
    var tb = document.getElementById('d');
    var row = document.getElementById('row').value;

    row = parseInt(row);
    if(isNaN(row))
    {
      alert('您需要修改的行必须是整数');
      return false;
    }
    var cel = document.getElementById('cel').value;
    cel = parseInt(cel);

    if(isNaN(cel))
    {
      alert("您需要修改的列必须是整数");
      return false;
    }
    if(row>tb.rows.length || cel>tb.rows.item(0).cells.length){
      alert("要修改的单元格不在该表格内");
      return false;
    }
    tb.rows.item(row-1).cells.item(cel-1).innerHTML = document.getElementById('celVal').value;
  }
</script>
</body>
</html>

四.增加HTML元素

当需要为页面增加HTMl元素时，应按如下两个步骤操作。

1.创建或复制节点

2.添加节点

4.1创建或复制节点

创建节点通常借助于document对象的creatElement方法来实现，语法如下。

document.createElement(tag)：创建Tag标签对应的节点。

如下代码演示了创建一个节点

<script type="text/javascript">
var a = document.createElement("div");//传入的参数必须合法
alert(a);
</script>

Node cloneNode(boolean deep)：复制当前节点。当deep为true时，赋值当前节点的同时，赋值该节点的全部后代节点；当deep为false时，表示复制当前节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复制节点</title>
</head>
<body>
<ul id="d">
  <li>疯狂Java讲义</li>
</ul>
<script type="text/javascript">
  var ul = document.getElementById('d');
  var ajax = ul.firstChild.nextSibling.cloneNode(false);
  ajax.innerHTML = "疯狂Ajax讲义";
  ul.appendChild(ajax);
</script>
</body>
</html>

4.2 添加节点

对于普通的节点，可采用Node对象的如下方法来添加节点。

appendChild(Node newNode)：将newNode添加成当前节点的最后一个子节点。

insertBefore(Node newNode,Node refNode)：在refNode节点之前插入newNode节点。

replaceChild(Node newNode,Node oldNode)：将oldNode节点替换成newNode节点。

4.3 为列表框，下拉菜单添加选项

1.调用HTMLSelectElement的add()方法添加选项。

add(HTMLOptionElement Option,HTMLOptionElement before)：在before选项之前添加option选项。如果想将option添加在最后，则将before设置为null即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加选项</title>
</head>
<body id="test">
<script type="text/javascript">
  var a = document.createElement('select');
  for(var i = 0 ; i < 10 ; i++){
    var op = document.createElement('option');
    op.innerHTML = "新增的选项"+i;
    a.add(op);
  }
  a.size = 5;
  document.getElementById('test').appendChild(a);
</script>
</body>
</html>

2.直接为<select../>的指定选项赋值。

创建选项输了可使用createELement()方法以外，还可以使用如下构造器。

new Option(text,value,defaultSelected,selected)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>添加选项</title>
</head>
<body id="test">
<script type="text/javascript">
  var a = document.createElement('select');
  for(var i = 0 ; i < 10 ; i++){
    var op = new Option('新增的选项'+i,i);
    a.add(op);
  }
  a.size = 5;
  document.getElementById('test').appendChild(a);
</script>
</body>
</html>

4.4动态添加表格内容

表格元素，表格行另有添加子元素的方法。实际上它们可以在添加子元素的同时创建这些子元素。也就是说，添加表格子元素时，往往无需使用document的

createElement()方法。

HTMLTableELement对象有如下方法：

insertRow(index)：在index处插入一行，返回新创建的HTMLTableRowElement.

createCaption()：为该表格创建标题。返回新创建的HTMLTableCaptionELement。如果已有标题，则返回已有的标题对象。

createTFoot：为该表格创建<tfoot.../>元素，返回新创建的HTMLTableFootELement。如果表格已有<tfoot.../>元素，则返回已有的<tfoot.../>元素。

createTHead：为该表格创建<thead.../>元素，返回新创建的HTMLTableHeadELement。如果表格已有<thead..../>元素，则返回已有的<thead..../>元素。

HTMLTableRowElement代表表格行，该对象包含如下方法用于插入单元格。

insertCell(long index)：在index处插入一个单元格，返回新创建的单元格。

下面通过脚本动态生成一个表格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加表格</title>
</head>
<body id="test">
<script type="text/javascript">
  var a = document.createElement('table');
  a.style.width = '800px';
  a.style.borderCollapse = 'collapse';
  a.border = 1;

  var caption = a.createCaption();
  caption.innerHTML = "表格标题";

  for(let i = 0 ; i < 5 ; i++)
  {
    var tr = a.insertRow(i);
    for(let j = 0 ; j < 7 ; j++)
    {
      var td = tr.insertCell();
      td.style.padding = '5px';
      td.innerHTML = "表格内容"+i+j;
    }
  }
  document.getElementById('test').appendChild(a);
</script>
</body>
</html>

五.删除HTML元素

5.1 删除节点

删除节点通常借助于父节点。Node对象提供了如下方法

removeChild(oldNode)：删除oldNode子节点

5.2 删除列表框，下拉菜单的选项

1. 利用HTMLSelectElement对象的remove()方法删除选项

remove(long index)：删除指定索引处的选项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除列表项</title>
</head>
<body>
<input type="text" id="opValue"/>
<input type="button" id="add" value="增加" onclick="add();"/>
<input type="button" id="del" value="删除" onclick="del();"/>
<br/>
<select  id="show" size="8" style="width:180px;"></select>
<script type="text/javascript">
  var show = document.getElementById('show');

  var add = function()
  {
    var op = new Option(document.getElementById('opValue').value);
    show.insertBefore(op,null);
  }
  var del = function ()
  {
    if(show.length > 0)
    {
      show.remove(show.length-1);
    }

  }
</script>
</body>
</html>