JavaScript一（企业云盘的实际应用） JavaScript四（DOM编程）

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.访问表单控件