你的位置:首页 > Java教程

[Java教程]javascript DOM 操作


 在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识。

一、JavaScript DOM 操作

1.1、DOM概念

  DOM :Document Object Model(文本对象模型)。

  D : 文档(html或

  O : 对象(文档对象)

  M : 模型

1.2、DOM结构

  DOM将文档以家谱树的形式来表现。

 

  下面是一个简单的html文档,我们可以看出该文档的DOM结构如下

  

 

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <meta charset="UTF-8"> 5     <title></title> 6   </head> 7   <body> 8     <p title="hello">该实例使用 addEventListener() 方法来向按钮添加点击事件。</p> 9       10     11     <ul>12       <li>1</li>13       <li>2</li>14       <li>3</a>15     </ul>16     17   </body>18 </html>19 

 

 

 
 

1.3、DOM节点类型

  1). 元素节点

  2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作. 

  3). 文本节点: 是元素节点的子节点, 其内容为文本.

 

  举个例子:

  <p title="hello">文本内容。</p>
  上面这行代码中:p标签为元素节点、title属性为属性节点、p的内容"文本内容"则为文本节点。其中文本节点是 p 元素节点的子节点。

二、JavaScript DOM 常用操作

  2.1、获取元素节点   

   1). document.getElementById: 根据 id 属性获取对应的单个节点

   2). document.getElementsByTagName: 根据标签名获取指定节点名字的数组,通过数组对象 length 属性可以获取数组的长度

   3). document.getElementsByName: 根据节点的 name 属性获取符合条件的节点数组

 

   案例:

    

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <meta charset="UTF-8"> 5     <title></title> 6     <script> 7       //文档加载完后执行 onload 方法 8       window.onload = function(){ 9         // 根据 id 属性获取对应的单个节点10         var inputText = document.getElementById("txt");11         alert(inputText.value);12         13         //根据标签名获取指定节点名字的数组,通过数组对象 length 属性可以获取数组的长度14         var cityNodes = document.getElementsByTagName("li");15         alert(cityNodes.length);16         17         //根据节点的 name 属性获取符合条件的节点数组18         var dirNodes = document.getElementsByName("direction");19         alert(dirNodes.length);20       }21     </script>22   </head>23   <body>24     25     <input type="text" id="txt" value="test getElementById"/>26     27     <br /><br /><br />28     <ul id="city">29       <li>北京</li>30       <li>华盛顿</li>31       <li>伦敦</li>32       <li>巴黎</li>33     </ul>34     35     <br /><br /><br />36     37     <ul>38       <li name="direction">east</li>39       <li name="direction">south</li>40       <li name="direction">west</li>41       <li name="direction">north</li>42     </ul>43     44     45   </body>46 </html>

   

  2.2、获取属性节点    

   1). 可以直接通过elementNode.attr 这样的方式来获取和设置属性节点的值

   2). 通过元素节点的 getAttributeNode 方法来获取属性节点,然后在通过 nodeValue 来读写属性值

   

    案例:

 

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <meta charset="UTF-8"> 5     <title></title> 6     <script> 7       //文档加载完后执行 onload 方法 8       window.onload = function(){ 9         // 根据 id 属性获取 元素节点10         var inputText = document.getElementById("txt");11         12         //通过elementNode.attr 这样的方式来获取和设置属性节点的值13         //获取 id 为 txt 的文本输入框 的 value 属性值14         var txtValue = inputText.value;15         16         alert(txtValue);17         18         //设置文本框的 value属性值19         inputText.value = "value changed";20         21         22         23         //通过元素节点的 getAttributeNode 方法来获取属性节点24         //获取文本框元素节点的 type 属性节点25         var attrNode = inputText.getAttributeNode("type");26         27         //获取属性节点的值28         var attrNodeValue = attrNode.nodeValue;29         alert(attrNodeValue);30       }31     </script>32     33   </head>34   <body>35     36     <input type="text" id="txt" value="test getAttributeNode"/>37     38   </body>39 </html>

  2.3、 获取元素节点的子节点(只有元素节点才有子节点!!)

 

   1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName()

   方法来获取. 

   2). firstChild 属性获取第一个子节点

   3). lastChild 属性获取最后一个子节点

 

    案例:

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <meta charset="UTF-8"> 5     <title></title> 6     <script> 7       //文档加载完后执行 onload 方法 8       window.onload = function(){ 9         // 根据 id 为 city 的元素节点10         var cityNode = document.getElementById("city");11         12         //用 childNodes 获取元素节点 cityNode 的所有子节点13         //该方法不实用14         var cityNodeChildren = cityNode.childNodes;15         alert(cityNodeChildren.length);16         17         //获取 cityNode 元素节点的所有 li 子节点.18         var cityLiNodes = cityNode.getElementsByTagName("li");19         alert(cityLiNodes.length);20         21         //取 cityNode 元素节点的第一个子节点和最后一个子节点. 22         alert(cityNode.firstChild);23         alert(cityNode.lastChild);24         25       }26     </script>27   </head>28   <body>29     30     31     <ul id="city"><!--此处换行,也是ul的一个子节点-->32       <li>北京</li>33       <li>华盛顿</li>34       <li>伦敦</li>35       <li>巴黎</li>36     </ul>37     38     39     40   </body>41 </html>

 

  2.4、 获取文本节点

   1). 步骤: 元素节点 --> 获取元素节点的子节点
   2). 若元素节点只有文本节点一个子节点,
    例如:<p title="textNode" id="test">文本节点内容</p>

    可以先获取到指定的元素节点 eleNode, 然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值,也可以直接用eleNode.textContent

    来获取文本节点的值。 

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <meta charset="UTF-8"> 5     <title></title> 6     <script> 7       //获取文本节点 8       window.onload = function(){ 9         10         //文本节点一定是元素节点的子节点. 11         12         //1. 获取文本节点所在的元素节点13         var parentNode = document.getElementById("test");14         15         //2. 通过 firstChild 定义为到文本节点16         var textNode = parentNode.firstChild;17         18         //3. 通过操作文本节点的 nodeValue 属性来读写文本节点的值. 19         alert(textNode.nodeValue);20         21         //也可以用 elementNode.textContent 来获取文本节点的值22         alert(parentNode.textContent);23         24       }25     </script>26   </head>27   <body>28     29     <p title="textNode" id="test">文本节点内容</p>30   </body>31 </html>

 

  2.5、节点的属性

   1). nodeName: 代表当前节点的名字. 只读属性.
     如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串
   2). nodeType:返回一个整数, 这个数值代表着给定节点的类型.
    只读属性. 1 -- 元素节点, 2 -- 属性节点, 3 -- 文本节点
   3). nodeValue:返回给定节点的当前值(字符串). 可读写的属性
    ①. 元素节点, 返回值是 null.
    ②. 属性节点: 返回值是这个属性的值
    ③. 文本节点: 返回值是这个文本节点的内容

  

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <meta charset="UTF-8"> 5     <title></title> 6     <script type="text/javascript"> 7        8       //关于节点的属性: nodeType, nodeName, nodeValue 9       //在文档中, 任何一个节点都有这 3 个属性10       //而 id, name, value 是具体节点的属性. 11       window.onload = function(){12         13         //1. 元素节点的这 3 个属性14         var bjNode = document.getElementById("bj");15         alert(bjNode.nodeType); //元素节点: 116         alert(bjNode.nodeName); //节点名: li17         alert(bjNode.nodeValue); //元素节点没有 nodeValue 属性值: null18         19         //2. 属性节点20         var nameAttr = document.getElementById("name")21                     .getAttributeNode("name");22         alert(nameAttr.nodeType); //属性节点: 223         alert(nameAttr.nodeName); //属性节点的节点名: 属性名24         alert(nameAttr.nodeValue); //属性节点的 nodeValue 属性值: 属性值25         26         //3. 文本节点:27         var textNode = bjNode.firstChild;  28         alert(textNode.nodeType); //文本节点: 329         alert(textNode.nodeName); //节点名: #text30         alert(textNode.nodeValue); //文本节点的 nodeValue 属性值: 文本值本身. 31       32         //nodeType、nodeName 是只读的.33         //而 nodeValue 是可以被改变的。 34         //以上三个属性, 只有在文本节点中使用 nodeValue 读写文本值时使用最多. 35       }36       37     </script>38   </head>39   <body>40     41     <p>你喜欢哪个城市?</p>42     <ul id="city">43       <li id="bj" name="BeiJing">北京</li>44       <li>上海</li>45       <li>东京</li>46       <li>首尔</li>47     </ul>48     49     <br><br>50     name: <input type="text" name="username" id="name" value="atguigu"/>51     52   </body>53 </html>

   2.6、创建元素节点和文本节点及为元素节点添加子节点:

   1). createElement(): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数:被创建的元素节点的名字, 是一个字符串.

    方法的返回值:是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1.
       新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.

   2). createTextNode(): 创建一个包含着给定文本的新文本节点. 这个方法的返回值是一个指向新建文本节点引用指针. 它是一个文本节点, 所以它的 nodeType 属性等于 3.
    方法只有一个参数:新建文本节点所包含的文本字符串. 新元素节点不会自动添加到文档里。

   3). appendChild(): var reference = element.appendChild(newChild): 给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点.
    方法的返回值是一个指向新增子节点的引用指针.

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <meta charset="UTF-8"> 5     <title></title> 6     <script> 7       window.onload = function(){ 8         //获取 id 为 city 的 元素节点 cityNode 9         var cityNode = document.getElementById("city");10         11         //创建一个 li 元素节点, 返回值为指向元素节点的引用12         //document.createElement(elementTagName) 创建一个元素节点13         //参数为元素节点名称14         var liNode = document.createElement("li");15         16         //创建 "巴塞罗那" 的文本节点17         //document.createTextNode(string) 创建一个文本节点18         //参数为文本值, 返回该文本节点的引用. 19         var textNode = document.createTextNode("巴塞罗那");20         21         //elementNode.appendChild(newChild): 为 elementNode22         //新添加 newChild 子节点, 该子节点将作为 elementNode 的最后23         //一个子节点24         liNode.appendChild(textNode);25         cityNode.appendChild(liNode);26       }27       28     </script>29   </head>30   <body>31     32     <ul id="city">33       <li>北京</li>34       <li>华盛顿</li>35       <li>伦敦</li>36       <li>巴黎</li>37     </ul>38     39   </body>40 </html>

 

  2.7、节点的替换:

   1). replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点

    var reference = element.replaceChild(newChild,oldChild);
    返回值是一个指向已被替换的那个子节点的引用指针
   2). 该方法除了替换功能以外还有移动的功能.
   3). 该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数:

   

    案例1:replaceChild的替换功能  

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title></title>    <script>      //文档加载完后执行 onload 方法      window.onload = function(){        //测试 replaceChild 方法        var bjNode = document.getElementById("bj");        var eastNode = document.getElementById("east");                var cityNode = document.getElementById("city");                //eastNode 替换 bjNode         cityNode.replaceChild(eastNode,bjNode);              }          </script>  </head>  <body>    <h3>city</h3>    <ul id="city">       <li id="bj">北京</li>       <li>华盛顿</li>       <li>伦敦</li>       <li>巴黎</li>     </ul>         <br /><br /><br />              <h3>direction</h3>         <ul id="direction">       <li id="east">east</li>       <li>south</li>       <li>west</li>       <li>north</li>     </ul>  </body></html>

 

    案例2:实现两个节点的互换

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <meta charset="UTF-8"> 5     <title></title> 6     <script> 7       //文档加载完后执行 onload 方法 8       window.onload = function(){ 9                 10         //案例2: 实现两个节点的互换11         var bjNode = document.getElementById("bj");12         var eastNode = document.getElementById("east");13         14         var cityNode = document.getElementById("city");15         var directionNode = document.getElementById("direction");16         17         //克隆 bjNode18          //cloneNode(deep) 若 deep 为true, 则可以克隆子节点19         var bjNode2 = bjNode.cloneNode(true);21         22         alert(1);23         directionNode.replaceChild(bjNode2,eastNode);24         25         alert(2);26         cityNode.replaceChild(eastNode,bjNode);27         28       }29       30     </script>31   </head>32   <body>33     <h3>city</h3>34     <ul id="city">35       <li id="bj">北京</li>36       <li>华盛顿</li>37       <li>伦敦</li>38       <li>巴黎</li>39     </ul>40     41     <br /><br /><br />42     43     44     <h3>direction</h3>45     46     <ul id="direction">47       <li id="east">east</li>48       <li>south</li>49       <li>west</li>50       <li>north</li>51     </ul>52   </body>53 </html>

 

    案例3:自定义节点互换方法

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <meta charset="UTF-8"> 5     <title></title> 6     <script> 7       //文档加载完后执行 onload 方法 8       window.onload = function(){ 9         10         //案例3:自定义节点互换方法11         var bjNode = document.getElementById("bj");12         var eastNode = document.getElementById("east");13         replaceEach(bjNode,eastNode);14         function replaceEach(aNode,bNode){15           //1. 获取 aNode 和 bNode 的父节点. 使用 parentNode 属性16           var aNodeParent = aNode.parentNode;17           var bNodeParent = bNode.parentNode;18           19           if(aNodeParent && bNodeParent){20             //2. 克隆 aNode 或 bNode21             var aNode2 = aNode.cloneNode(true);22             23             //3. 分别调用 aNode 的父节点和 bNode 的父节点的 replaceChild()24             //方法实现节点的互换25             bNodeParent.replaceChild(aNode2,bNode);26             aNodeParent.replaceChild(bNode,aNode);27           }28           29         }30       }31       32     </script>33   </head>34   <body>35     <h3>city</h3>36     <ul id="city">37       <li id="bj">北京</li>38       <li>华盛顿</li>39       <li>伦敦</li>40       <li>巴黎</li>41     </ul>42     43     <br /><br /><br />44     45     46     <h3>direction</h3>47     48     <ul id="direction">49       <li id="east">east</li>50       <li>south</li>51       <li>west</li>52       <li>north</li>53     </ul>54   </body>55 </html>

 

    案例4:为所有的 li 节点添加 onclick 响应函数,实现 city 子节点和 game 子节点对应位置的元素的互换

    

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title>  <script type="text/javascript">        //需求: 为所有的 li 节点添加 onclick 响应函数    //实现 city 子节点和 game 子节点对应位置的元素的互换        window.onload = function(){            //自定义互换两个节点的函数      function replaceEach(aNode, bNode){        //1. 获取 aNode 和 bNode 的父节点. 使用 parentNode 属性        var aParent = aNode.parentNode;        var bParent = bNode.parentNode;                if(aParent && bParent){          //2. 克隆 aNode 或 bNode          var aNode2 = aNode.cloneNode(true);                    //克隆 aNode 的同时, 把 onclick 事件也复制.           aNode2.onclick = aNode.onclick;                    //克隆 aNode 的同时, 把 onclick 事件也复制.           aNode2.index = aNode.index;                    //3. 分别调用 aNode 的父节点和 bNode 的父节点的 replaceChild()          //方法实现节点的互换          bParent.replaceChild(aNode2, bNode);          aParent.replaceChild(bNode, aNode);        }      }            //1. 获取所有的 li 节点      var liNodes = document.getElementsByTagName("li");            //2. 为每一个 li 节点添加 Onclick 响应函数      for(var i = 0; i < liNodes.length; i++){        //手动为每个 li 节点添加一个 index 属性        liNodes[i].index = i;                liNodes[i].onclick = function(){                    //alert("index: " + this.index);                    //3. 找到和当前节点对应的那个 li 节点          var targetIndex = 0;                    if(this.index < 4){            targetIndex = 4 + this.index;          }else{            targetIndex = this.index - 4;          }                    //交换 index 属性.           var tempIndex = this.index;          this.index = liNodes[targetIndex].index;          liNodes[targetIndex].index = tempIndex;                    //4. 互换.           replaceEach(this, liNodes[targetIndex]);                  }      }                }    </script></head><body>  <p>你喜欢哪个城市?</p>      <ul id="city">      <li id="bj">北京</li>      <li>上海</li>      <li>东京</li>      <li>首尔</li>    </ul>        <br><br>    <p>你喜欢哪款单机游戏?</p>    <ul id="game">      <li id="rl">红警</li>      <li>实况</li>      <li>极品飞车</li>      <li>魔兽</li>    </ul>        <br><br>        <form action="dom-7.html" name="myform">            <input type="radio" name="type" value="city">城市      <input type="radio" name="type" value="game">游戏          name: <input type="text" name="name"/>          <input type="submit" value="Submit" id="submit"/>          </form></body></html>

 

  2.8、插入节点

   1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
    var reference = element.insertBefore(newNode,targetNode);
    节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是 element 元素的一个子节点。

 

  案例1:将 id 为 east 的元素节点插入到 id 为 bj 的元素节点前

 1 <!DOCTYPE html> 2 <html> 3  4   <head> 5     <meta charset="UTF-8"> 6     <title></title> 7     <script type="text/javascript"> 8       //将 id 为 east 的元素节点插入到 id 为 bj 的元素节点前 9       window.onload = function(){10         11         var cityNode = document.getElementById("city");12         var bjNode = document.getElementById("bj");13         var eastNode = document.getElementById("east");14         15         //element.insertBefore(newChild:node,refChild:node)16         //element 是 refChild 的父节点,newChild 插入到 refChild 前面17         cityNode.insertBefore(eastNode,bjNode);18         cityNode.insertBefore19       }20     </script>21   </head>22   23   <body>24     <ul id="city">25       <li id="bj">北京</li>26       <li>华盛顿</li>27       <li>伦敦</li>28       <li>巴黎</li>29     </ul>30 31     <br /><br /><br />32 33     <h3>direction</h3>34 35     <ul id="direction">36       <li id="east">east</li>37       <li>south</li>38       <li>west</li>39       <li>north</li>40     </ul>41   </body>42 43 </html>

    案例2:定义insertAfter(newChild:node,refChild:node)方法,将 newChild 插入到 refChild 后面

 1 <!DOCTYPE html> 2 <html> 3  4   <head> 5     <meta charset="UTF-8"> 6     <title></title> 7     <script type="text/javascript"> 8        9       window.onload = function(){      10       11         //自定义insertAfter(newChild:node,refChild:node)方法12         //将 newChild 插入到 refChild 后面13         var bjNode = document.getElementById("bj");14         var eastNode = document.getElementById("east");15         insertAfert(eastNode,bjNode);16         17         function insertAfert(newChild,refChild){18           //获取 refChild 节点的父节点19           var refNodeParent = refChild.parentNode;20           21           if(refNodeParent){22             //获取 refNodeParent 的最后一个子节点23             var lastChildNode = refNodeParent.lastChild;24             25             //判断refChild 节点是否是 其父节点的最后一个子节点26             //若是: 直接把 newNode 插入为 refNode 父节点的最后一个子节点.27             if(refChild==lastChildNode){28               refNodeParent.appendChild(newChild);29             }30             31             //3. 若不是: 获取 refChild 的下一个兄弟节点, 然后插入到其下一个兄弟32             //节点的前面.33             else{34               var nextNode = refChild.nextSibling;35               refNodeParent.insertBefore(newChild,nextNode);36             }37           }38         }39       }40     </script>41   </head>42   43   <body>44     <ul id="city">45       <li id="bj">北京</li>46       <li>华盛顿</li>47       <li>伦敦</li>48       <li>巴黎</li>49     </ul>50 51     <br /><br /><br />52 53     <h3>direction</h3>54 55     <ul id="direction">56       <li id="east">east</li>57       <li>south</li>58       <li>west</li>59       <li>north</li>60     </ul>61   </body>62 63 </html>

 


  2.9、
删除节点

   1). removeChild(): 从一个给定元素里删除一个子节点
    var reference = element.removeChild(node);
    返回值是一个指向已被删除的子节点的引用指针. 某个节点被 removeChild() 方法删除时, 这个节点所包含的所有子节点将同时被删除.
    如果想删除某个节点, 但不知道它的父节点是哪一个, parentNode 属性可以帮忙。

    

    案例:为每个li 节点添加删除自身节点的事件    

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <meta charset="UTF-8"> 5     <title></title> 6     <script> 7       //为每个 li 节点添加一个 confirm(确认对话框): 确定要删除 xx 的信息吗? 8       //若确定, 则删除 9       window.onload = function(){10         11         //获取 li 标签12         var liNodes = document.getElementsByTagName("li");13         14         //给 li 标签添加 onclick 事件15         for(var i = 0 ; i < liNodes.length; i++){16           liNodes[i].onclick = function(){17             var flag = confirm("您确认要删除" + this.firstChild.nodeValue);18             if(flag){19               this.parentNode.removeChild(this);20             }21           }22         }23       }24     </script>25     26   </head>27   <body>28     <h3>city</h3>29     <ul id="city">30       <li id="bj">北京</li>31       <li>华盛顿</li>32       <li>伦敦</li>33       <li>巴黎</li>34     </ul>35     36     <br /><br /><br />37     38     39     <h3>direction</h3>40     41     <ul id="direction">42       <li id="east">east</li>43       <li>south</li>44       <li>west</li>45       <li>north</li>46     </ul>47     48   </body>49 </html>