DOM常用方法【DOM】

最新推荐文章于 2022-10-23 23:51:41 发布

请叫我木丁西

最新推荐文章于 2022-10-23 23:51:41 发布

阅读量1.8k

点赞数

分类专栏： DOM

本文链接：https://blog.csdn.net/qq1012421396/article/details/77431736

版权

DOM 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

DOM方法：是我们可以在节点（HTML 元素）上执行的动作。

①appendChild(Node newChild)

作用：为给定元素的最后增加一个子节点：

var newreference = element.appendChild(newChild).

给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点。

方法的返回值是一个指向新增子节点的引用指针。

该方法通常与 createElement() createTextNode() 配合使用

新节点可以被追加给文档中的任何一个元素。

②insertBefore(Node newChild, Node refChild)

作用：把一个给定节点插入到一个给定元素节点的给定子节点的前面

var reference = element.insertBefore(newNode,targetNode);

节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面.

节点 targetNode 必须是 element 元素的一个子节点。

该方法通常与 createElement() 和 createTextNode() 配合使用。

 
    
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>insertBefore.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  </head>
  <body>
       <ul>
         <li id="bj" name="beijing">北京</li>
         <li id="sh" name="shanghai">上海</li>
         <li id="cq" name="chongqing">重庆</li>
       </ul>
  </body>
  
  <script language="JavaScript">
    // 插入新的节点 <li id="tj" name="tianjin">天津</li>
    var tj_node = document.createElement("li");
    tj_node.setAttribute("name", "tianjin");
    var text_node = document.createTextNode("天津");
    tj_node.appendChild(text_node);
    // 在 <li id="cq" name="chongqing">重庆</li>的前面
    var cq_node = document.getElementById("cq");
    cq_node.parentNode.insertBefore(tj_node, cq_node);
    
  </script>
</html>

③自定义的insertAfter(Node newChild, Node refChild)

作用：把一个给定节点插入到一个给定元素节点的给定子节点的后面

自定义js函数代码：

 
     
   
 
        
 
         
 
          
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>insertBefore.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  </head>
  <body>
       <ul>
         <li id="bj" name="beijing">北京</li>
         <li id="sh" name="shanghai">上海</li>
         <li id="cq" name="chongqing">重庆</li>
         <li id="hb" name="hubei">湖北</li>
       </ul>
  </body>
  
  <script language="JavaScript">
    //******************************插入新的节点 <li id="tj" name="tianjin">天津</li>
    var tj_node = document.createElement("li");
    tj_node.setAttribute("name", "tianjin");
    var text_node = document.createTextNode("天津");
    tj_node.appendChild(text_node);
    // 在  <li id="sh" name="shanghai">上海</li>的后面
    var sh_node = document.getElementById("sh");
    insertAfter(tj_node, sh_node);
    
    function insertAfter(newChild, refChild){
        //获取目标元素的父类节点
        var parent_node = refChild.parentNode;
        if(parent_node.lastChild == refChild){ //如果目标元素是最后一个元素,则新元素插入到目标元素的后面
            parent_node.appendChild(newChild);          
        }else{//说明目标元素不是最后一个元素，则获取目标元素的下一个元素，在它之前插入新的节点
            var refChild_next = refChild.nextSibling;
            parent_node.insertBefore(newChild, refChild_next);
        }
    }
  </script>
</html>
​
 
    

④replaceChild(Node newChild, Node refChild)

作用：把一个给定父元素里的一个子节点替换为另外一个子节点

var reference = element.replaceChild(newChild,oldChild);

返回值是一个指向已被替换的那个子节点的引用指针。

如果被插入的子节点还有子节点，则那些子节点也被插入到目标节点中

案例代码：

 
    
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>form.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  
  <body>
      您喜欢的城市:<br> 
       <ul>
         <li id="bj" value="beijing" >北京</li>
         <li id="sh" value="shanghai">上海</li>
         <li id="cq" value="chongqing"> 重庆</li>
       </ul>
      
      您喜欢的游戏:<br> 
       <ul>
         <li id="fk" value="fangkong">反恐<p>精英</p></li>
         <li id="ms" value="moshou">魔兽</li>
         <li id="cq" value="chuanqi">传奇</li>
       </ul>   
  </body>
  
  <script language="JavaScript">
      //点击北京节点， 将被反恐节点替换
      var bj_node = document.getElementById("bj");
      bj_node.onclick = function(){
        var fk_node = document.getElementById("fk");
        var bj_parent_node = bj_node.parentNode;
        bj_parent_node.replaceChild(fk_node, bj_node);
      }
  </script>
  
</html>

演示：

⑤removeChild(Node oldChild)

作用：从一个给定元素里删除一个子节点

var reference = element.removeChild(node);

返回值是一个指向已被删除的子节点的引用指针。

某个节点被removeChild()方法删除时,这个节点所包含的所有子节点将同时被删除。

如果想删除某个节点，但不知道它的父节点是哪一个， parentNode 属性可以帮忙。

 
     
   
 
        
 
         
 
          
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>insertBefore.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  </head>
  <body>
       <ul id="city">
         <li id="bj" name="beijing">北京</li>
         <li id="sh" name="shanghai">上海</li>
         <li id="cq" name="chongqing">重庆</li>
       </ul>
  </body>
  
  <script language="JavaScript">
   //删除<ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul>
   var bj_node = document.getElementById("bj");
   var remove_obj = bj_node.parentNode.removeChild(bj_node);//返回删除的对象
   alert(remove_obj.name)
  </script>
</html>
 
    

⑥hasChildNodes()

作用：该方法用来检查一个元素是否有子节点，返回值是 true 或 false.

var booleanValue = element.hasChildNodes();

文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.

如果 hasChildNodes 方法的返回值是 false，则 childNodes,firstChild,lastChild 将是空数组和空字符串。

 
    
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>form.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  
  <body>
       
       <form name="form1" action="test.html" method="post" >
          <input type="text" name="tname" value="请叫我木丁西 QQ1012421396_1"  id="tid_1"  ><br>
          <input type="text" name="tname" value="请叫我木丁西 QQ1012421396_2"  id="tid_2"  ><br>
          <input type="text" name="tname" value="请叫我木丁西 QQ1012421396_3"  id="tid_3"  ><br>
          <input type="button" name="ok" value="保存1"/>
       </form>
       
       <select name="edu" id="edu">
          <option value="博士">博士^^^^^</option>
          <option value="硕士">硕士^^^^^</option>
          <option value="本科" selected="selected" >本科^^^^^</option>
          <option value="幼儿园">幼儿园^^^^^</option>
       </select>
       
       <select name="job" id="job" >
          <option value="美容">美容^^^^^</option>
          <option value="IT">IT^^^^^</option>
          <option value="程序员">程序员^^^^^</option>
          <option value="建筑师">建筑师^^^^^</option>
       </select>
  </body>
  
  <script language="JavaScript">
  //查看id="edu"的节点是否含有子节点
  var eduSelectObj = document.getElementById("edu");
  if(eduSelectObj.hasChildNodes()){
    alert("id=edu的节点有子节点")
  }else{
    alert("id=edu的节点没有子节点")
  }
  
     
​
   //查看id="tid_1"的节点是否含有子节点
  var tid_1Obj = document.getElementById("tid_1");
  if(tid_1Obj.hasChildNodes()){
    alert("id=tid_1的节点有子节点")
  }else{
    alert("id=tid_1的节点没有子节点");
  }
  </script>
</html>

⑦getAttribute(String name)

作用：返回一个给定元素的一个给定属性名称的节点的值

var attributeValue = element.getAttribute(attributeName);

给定属性的名字必须以字符串的形式传递给该方法。

给定属性的值将以字符串的形式返回，如果给定属性不存在，getAttribute() 将返回一个空字符串.

 
     
   
 
        
 
         
 
          
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>form.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  
  <body>
      您喜欢的城市:<br> 
       <ul>
         <li id="bj" value="beijing">北京</li>
         <li id="sh" value="shanghai">上海</li>
         <li id="cq" value="chongqing">重庆</li>
       </ul>
      
      您喜欢的游戏:<br> 
       <ul>
         <li id="fk" value="fangkong">反恐</li>
         <li id="ms" value="moshou">魔兽</li>
         <li id="xj" value="xingji">星际争霸</li>
       </ul>   
  </body>
  
  <script language="JavaScript">
      //打印<li id="xj" value="xingji">星际争霸</li>节点的value属性的值
       var xj_node = document.getElementById("xj");
       alert(xj_node.getAttribute("value") + "#" + xj_node.value);//由于是标签，xj_node.value=1 并不是“xingji”而是1
  </script>
</html>
 
    

⑧getAttributeNode(String attributeNodeName)

作用： 返回一个给定元素的一个给定属性名称的节点

var value_node = xj_node.getAttributeNode("value");//获取value属性的属性节点

⑨setAttribute(String name, String value)

作用：将给定元素节点添加一个新的属性值或改变它的现有属性的值。

element.setAttribute(attributeName,attributeValue);

属性的名字和值必须以字符串的形式传递给此方法

如果这个属性已经存在，它的值将被刷新；

如果不存在，setAttribute()方法将先创建它再为其赋值。

 
    
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>form.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  
  <body>
       
      您喜欢的城市:<br> 
       <ul>
         <li id="bj" value="beijing">北京</li>
         <li id="sh" value="shanghai">上海</li>
         <li id="cq" value="chongqing">重庆</li>
       </ul>
      
      您喜欢的游戏:<br> 
       <ul>
         <li id="fk" value="fangkong">反恐</li>
         <li id="ms" value="moshou">魔兽</li>
         <li id="xj" value="xingji">星际争霸</li>
       </ul>   
  </body>
  
  <script language="JavaScript">
     //给这个节点增加 name属性 <li id="xj" value="xingji" name="xingjizhengba">星际争霸</li>
    var xj_node = document.getElementById("xj");
    xj_node.setAttribute("name", "xingjizhengba");
    alert(xj_node.getAttribute("name"));
  </script>
</html>

⑩createElement(String tagName)

作用：按照给定的标签名创建一个新的元素节点。方法只有一个参数：将被创建的元素的名字，是一个字符串.

var reference = document.createElement(element);

方法的返回值：是一个指向新建节点的引用指针。返回值是一个元素节点，所以它的 nodeType 属性值等于 1。

新元素节点不会自动添加到文档里，新节点没有 nodeParent 属性，它只是一个存在于 JavaScript 上下文的对象.

例如： var pElement = document.createElement("p");

 
     
   
 
        
 
         
 
          
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>form.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  
  <body>
      您喜欢的城市:<br> 
       <ul id="city">
         <li id="bj" value="beijing">北京</li>
         <li id="sh" value="shanghai">上海</li>
         <li id="cq" value="chongqing">重庆</li>
       </ul>
      
      您喜欢的游戏:<br> 
       <ul>
         <li id="fk" value="fangkong">反恐</li>
         <li id="ms" value="moshou">魔兽</li>
         <li id="xj" value="xingji">星际争霸</li>
       </ul>
  </body>
  <script language="JavaScript">
     //增加城市节点 <li id="tj" value="tianjin">天津</li>   
     //创建元素节点
     var li_Ele = document.createElement("li");
     li_Ele.setAttribute("id", "tj");
     li_Ele.setAttribute("value", "tianjin");
     //添加文本子节点
     var text_node = document.createTextNode("天津");
     li_Ele.appendChild(text_node);
     //获取city节点
     var city_node = document.getElementById("city");
     //追加子节点
     city_node.appendChild(li_Ele);
      
  </script>
</html>
 
    

⑪createTextNode(String data)

作用：创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节点引用指针。

var textNode = document.createTextNode(text);

方法只有一个参数：新建文本节点所包含的文本字符串

方法的返回值：是一个指向新建节点的引用指针。它是一个文本节点，所以它的 nodeType 属性等于 3.

新元素节点不会自动添加到文档里，新节点没有 nodeParent 属性。

例如：

var pElementText=document.createElement("li");

var textElement=document.createTextNode("南京");

pElementText.appendChild(textElement);

 
    
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>form.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  
  <body>
       <select name="edu" id="edu">
          <option value="博士">博士^^^^^</option>
          <option value="硕士">硕士^^^^^</option>
          <option value="本科">本科^^^^^</option>
          <option value="幼儿园">幼儿园^^^^^</option>
         
       </select>
​
  </body>
  <script language="JavaScript">
   //增加节点<option value="大专">大专^^^^^</option>
   var option_Ele = document.createElement("option");
   option_Ele.setAttribute("value", "大专");
   var text_node = document.createTextNode("大专^^^^^");
   option_Ele.appendChild(text_node);
   var edu_node = document.getElementById("edu");
   edu_node.appendChild(option_Ele);
    
  </script>
</html>

综合案例1：

案例代码：

 
     
   
 
        
 
         
 
          
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>添加用户</title>
    </head>
    <body>
        <center>
            <br><br>
            添加用户:<br><br>
            姓名: <input type="text" name="name" id="name" />&nbsp;&nbsp;
            email: <input type="text" name="email" id="email" />&nbsp;&nbsp;
            电话: <input type="text" name="tel" id="tel" /><br><br>
            <button id="addUser">提交</button>
            <br><br>
            <hr>
            <br><br>
            <table id="usertable" border="1" cellpadding="5" cellspacing=0>
                    <tr>
                        <th>姓名</th>
                        <th>email</th>
                        <th>电话</th>
                        <th>操作</th>
                    </tr>
            </table>
        </center>
    </body>
    <script language="JavaScript">
     
     //获取提交按钮
     var addUser_obj = document.getElementById("addUser");
     //添加onclick事件
     addUser_obj.onclick = function(){
        //获取姓名
        var name = document.getElementById("name").value;
        //获取email
        var email = document.getElementById("email").value;
        //获取电话
        var tel = document.getElementById("tel").value;
        
        //获取表格usertable节点
        var usertable_node = document.getElementById("usertable");
        //创建tbody
        var tbody_node = document.createElement("tbody");
        //创建tr元素
        var tr = document.createElement("tr");
        //创建td元素
        var td1 = document.createElement("td");
        td1.innerHTML = name;
        var td2 = document.createElement("td");
        td2.innerHTML = email;
        var td3 = document.createElement("td");
        td3.innerHTML = tel;
        var td4 = document.createElement("td");
        var a_Ele = document.createElement("a");
        a_Ele.setAttribute("href", "#");
        var text_a_Ele = document.createTextNode("删除");
        a_Ele.appendChild(text_a_Ele);
        
        a_Ele.onclick = function(){
            var tr = a_Ele.parentNode.parentNode;
            var td = tr.firstChild.firstChild;
            var tbody = tr.parentNode;
            var flag = window.confirm("确定删除" + td.nodeValue + "?");
            if(flag){
                tbody.removeChild(tr);
            }
        }
        
        td4.appendChild(a_Ele);
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        
        tbody_node.appendChild(tr);
        usertable_node.appendChild(tbody_node);
     }
    </script>
</html>
 
    

案例演示：

综合案例2：

案例代码：

 
     
   
 
        
 
        
 
         
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
​
<style type="text/css">
<!--
BODY
{
    font-family:"Courier";
    font-size: 12px;
    margin:0px 0px 0px 0px;
    overflow-x:no;
    overflow-y:no;
    background-color: #B8D3F4;
}
td
{
    font-size:12px;
}
.default_input
{
    border:1px solid #666666;
    height:18px;
    font-size:12px;
}
.default_input2
{
    border:1px solid #666666;
    height:18px;
    font-size:12px;
}
.nowrite_input
{
    border:1px solid #849EB5;
    height:18px;
    font-size:12px;
    background-color:#EBEAE7;
    color: #9E9A9E;
}
.default_list
{
    font-size:12px;
  border:1px solid #849EB5;
}
.default_textarea
{
    font-size:12px;
    border:1px solid #849EB5;
}
​
.nowrite_textarea
{
    border:1px solid #849EB5;
    font-size:12px;
    background-color:#EBEAE7;
    color: #9E9A9E;
}
​
.wordtd5 {
    font-size: 12px;
    text-align: center;
    vertical-align:top;
    padding-top: 6px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
    background-color: #b8c4f4;
}
​
.wordtd {
    font-size: 12px;
    text-align: left;
    vertical-align:top;
    padding-top: 6px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
    background-color: #b8c4f4;
}
.wordtd_1 {
    font-size: 12px;
    vertical-align:top;
    padding-top: 6px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
    background-color: #516CD6;
    color:#fff;
}
.wordtd_2{
    font-size: 12px;
    text-align: right;
    vertical-align:top;
    padding-top: 6px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
    background-color: #64BDF9;
}
.wordtd_3{
    font-size: 12px;
    text-align: right;
    vertical-align:top;
    padding-top: 6px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
    background-color: #F1DD34;
}
.inputtd
{
    font-size:12px;
    vertical-align:top;
    padding-top: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
}
.inputtd2
{
    text-align: center;
    font-size:12px;
    vertical-align:top;
    padding-top: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
}
.tablebg
{
    font-size:12px;
}
​
.tb{
    border-collapse: collapse;
    border: 1px outset #999999;
    background-color: #FFFFFF;
}
.td2{line-height:22px; text-align:center; background-color:#F6F6F6;}
.td3{background-color:#B8D3F4; text-align:center; line-height:20px;}
.td4{background-color:#F6F6F6;line-height:20px;}
.td5{border:#000000 solid;
       border-right-width:0px;
       border-left-width:0px;
       border-top-width:0px;
       border-bottom-width:1px;}
​
.tb td{
font-size: 12px;
border: 2px groove #ffffff;
}
​
.noborder {
    border: none;
}
​
.button {
    border: 1px ridge #ffffff;
    line-height:18px;
    height: 20px;
    width: 45px;
    padding-top: 0px;
    background:#CBDAF7;
    color:#000000;
    font-size: 9pt;
    font-family:"Courier";
} 
​
.textarea {
    font-family: Arial, Helvetica, sans-serif, "??";
    font-size: 9pt;
    color: #000000;
    border-bottom-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-bottom-color: #000000;
    background-color:transparent;
    text-align: left
}
-->
</style></head>
​
<body>
​
<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
  <tr>
    <td width="126">
        <!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
        <select name="first" size="10" multiple="multiple" class="td3" id="first">
          <option value="选项1">选项1</option>
          <option value="选项2">选项2</option>
          <option value="选项3">选项3</option>
          <option value="选项4">选项4</option>
          <option value="选项5">选项5</option>
          <option value="选项6">选项6</option>
          <option value="选项7">选项7</option>
          <option value="选项8">选项8</option>
        </select>    
    </td>
    <td width="69" valign="middle">
        <!-- 把左侧选中的option增加到右侧的选择框中 -->
       <input name="add"  id="add" type="button" class="button" value="-->" /> 
        <!-- 把左侧所有的option增加到右侧的选择框中 -->
       <input name="add_all" id="add_all"  type="button" class="button" value="==>" /> 
        <!-- 把右侧选中的option增加到左侧的选择框中 -->
       <input name="remove"  id="remove" type="button" class="button" value="&lt;--" />
        <!-- 把右侧所有的option增加到左侧的选择框中 -->
       <input name="remove_all"  id="remove_all" type="button" class="button" value="&lt;==" />
        </td>
    <td width="127" align="left">
      <select name="second" size="10" multiple="multiple" class="td3" id="second">
          <option value="选项9">选项9</option>
      </select>
    </td>
  </tr>
</table>
</div>
</body>
<script type="text/javascript">
    
    //******************功能1：把左侧选中的option增加到右侧的选择框中
    //获取左侧的选择框select节点
    var first_node = document.getElementById("first");
    //获取右侧的选择框select节点
    var second_node = document.getElementById("second");
    
    //得到id=add的按钮，添加点击事件
    var add = document.getElementById("add");
    add.onclick = function(){
        //得到左侧下拉框中的所有option
        var option_nodes = first_node.getElementsByTagName("OPTION");
        //遍历所有被选中部分
        for(var i=0; i<option_nodes.length; i++){
            var option_node = option_nodes[i];
            if(option_node.selected){//如果被选中
                //将左侧的节点追加到右侧
                second_node.appendChild(option_node);
                i--;        
            }
        }
    }
    //******************功能2：把左侧所有的option增加到右侧的选择框中 
    //得到id=add_all的按钮，添加点击事件
    var add_all = document.getElementById("add_all");
    add_all.onclick = function(){
        //得到左侧下拉框中的所有option
        var option_nodes = first_node.getElementsByTagName("OPTION");
        var len = option_nodes.length;//注意JavaScript中数组的长度是可变的！！！！这样在下面的循环中会出问题！
        //遍历所有被选中部分
        for(var i=0; i<len; i++){
            var option_node = option_nodes[0];
            //将左侧的节点追加到右侧
            second_node.appendChild(option_node);   
        }
    }
    //******************功能3：把右侧选中的option增加到左侧的选择框中
    //得到id=remove的按钮，添加点击事件
    var remove = document.getElementById("remove");
    remove.onclick = function(){
        //得到右侧下拉框中的所有option
        var option_nodes = second_node.getElementsByTagName("OPTION");
        //遍历所有被选中部分
        for(var i=0; i<option_nodes.length; i++){
            var option_node = option_nodes[i];
            if(option_node.selected){//如果被选中
                //将右侧的节点追加到左侧
                first_node.appendChild(option_node);
                i--;        
            }
        }
    }
    //******************功能4：把右侧所有的option增加到左侧的选择框中
    //得到id=remove_all的按钮，添加点击事件
    var remove_all = document.getElementById("remove_all");
    remove_all.onclick = function(){
        //得到右侧下拉框中的所有option
        var option_nodes = second_node.getElementsByTagName("OPTION");
        //遍历所有被选中部分
        for(var i=0; i<option_nodes.length; i++){
            var option_node = option_nodes[i];
            //将右侧的节点追加到左侧
            first_node.appendChild(option_node);    
            i--;    
        }
    }
    //******************功能5：双击右侧某一个option增加到左侧的选择框中;双击左侧某一个option增加到右侧的选择框中，在select元素上添加双击事件才“完全”正确！因为有些浏览器不支持在option上添加双击事件
    //得到所有的select
    var select_nodes = document.getElementsByTagName("select");
    for(var i=0; i<select_nodes.length; i++){
        select_nodes[i].ondblclick = function(){
            //如果是first，则增加到second中去；如果是second，则增加到first中去
            //获取当前被选中的option的索引
            var selectedIndex = this.selectedIndex;
            //获取当前select元素下所有的option
            var option_nodes = this.getElementsByTagName("option");//注意这里用这种方法才对，如果用this.childNodes获取其实是不对的，不止option元素，其中还包括了空文本等所有元素
            if(this.id == "first"){
                //将双击的节点追加到右侧
                second_node.appendChild(option_nodes[selectedIndex]);
            }else{
                //将双击的节点追加到左侧
                first_node.appendChild(option_nodes[selectedIndex]);
            }
        }
    }
</script>
 
          
</html>
 
    

案例演示：

注意：JavaScript中数组长度是可变的！

请叫我木丁西

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DOM常用方法【DOM】

DOM方法：是我们可以在节点（HTML 元素）上执行的动作。①appendChild(Node newChild) 作用：为给定元素的最后增加一个子节点： var newreference = element.appendChild(newChild).
复制链接

扫一扫