当前位置:首页 >> 网络编程

JavaScript中 DOM操作方法小结

"属性名","属性值");   添加或更改一个属性。

  • a.getAtrribute("属性名");获取属性的值。
  • a.removeAttribute("属性名"); 移除属性。
  • 四.设置样式

    var a = document.getElementsByClassName("a");
    
    a[o].style.background-color="red";  //(只能取钳在body里边的)
    

    五.相关元素操作

    1. var b = a.nextSibling;    找a的下一个同辈元素,注意包含空格。
    2. var b = a.previousSibling, 找a的上一个同辈元素,包含空格。
    3. var b = a.parentNode,     找a的上一级父级元素。
    4. var b = a.firstChild,     第一个元素;   lastChild 最后一个;  childNodes[n]找第n个;

    五.元素的创建、添加、删除

    var obj = document.createElement('标签名');

    a.appendChild(); 向a中添加一个子元素。

    a.removeChild();从a中删除一个子元素。

    a.selectedIndex   选中的是第几个; a.options[a.selectedIndex]   //取出第几个option对象;

    六. 字符串操作

    var s = "hello world";

    alert(s.toLowerCase());  转小写  toUpperCase();转大写

    alert(s.substring(3,8))  从第三个位置截取到第八个位置

    alert(s.substr(3,8));  从第三个位置截取,截取八个字符长度。不写后面数字是截到最后。

    s.split('')  将字符串按照指定字符拆开。

    七.事件

    1. onclick: 鼠标单击触发
    2. ondblclick: 鼠标双击触发
    3. onmouseover:鼠标移动到上面触发
    4. onmouseout:鼠标离开时触发
    5. onmousemove:鼠标在上面移动时触发
    6. onchange:只要内容改变触发
    7. onblur:失去焦点时触发
    8. onfocus:获得焦点时触发
    9. onkeydown:按键按下时触发
    10. onkeyup:按键抬起时触发
    11. onkeypress: 在用户按下并放开任何字母数字键时发生,但是系统按钮(例:箭头键、功能键)无法识别

    例题解析:1.复选框按钮,下一步可用 

    <html>
      <head>
      <title>无标题文档</title>
      
      </head>
      
       <body>
         <input id="tong" type="checkbox" name="ch" ckecked="checked" value="1" onclick="ck_yes()")/>
         <label for="tong">同意</label><br />
         <input type="button" value="下一步" id="btn" disabled="disabled"/>
        
      </body>
    </html>
    <script>
      function ck_yes(){
        var btn = document.getElementById('btn');
        if(btn.disabled){
        document.getElementById('btn').removeAttribute('disabled');
        }else
          document.getElementById('btn').setAttribute('disabled','disabled'); 
      }
    </script>

    2.两个下拉框互传内容

    <html>
      <head>
      <title>无标题文档</title>
      </head>
      
      <body>
        <select multiple="multiple" size="7" id="slt" style="width: 200px; height: 200px;">
          <option>abc</option>
          <option>123</option>
          <option>asd</option>
          <option>bcd</option>
          <option>def</option>
        </select>
        <input type="button" value="左移" onclick="left()"/>
        <input type="button" value="右移" onclick="right()"/>
        <select multiple="multiple" size="7" id="slt_r" style="width: 200px; height: 200px;">
          <option value="时间">时间</option>
          <option value="日期">日期</option>
          <option value="年月">年月</option>
          <option value="东西">东西</option>
          <option value="南北">南北</option>
        </select>
      </body>
    </html>
    <script>
      function left(){
        var slt = document.getElementById('slt');
        var slt_r = document.getElementById('slt_r');
        var opt1 = slt_r.options[slt_r.selectedIndex];
        slt.appendChild(opt1);  
      }
      function right(){
        var slt=document.getElementById('slt');
        var slt_r=document.getElementById('slt_r');
        var opt = slt.options[slt.selectedIndex];    
        slt_r.appendChild(opt);  
      }
    </script>

    3.三个下拉框日期选择

    <html>
    
      <head>
        <meta charset="UTF-8">
        <title></title>
      </head>
    
      <body>
    <select id='year' onchange="addDay()"></select>
        <select id="month" onchange="addDay()"></select>
        <select id="date"></select>
      </body>
    
    </html>
    <script>
      var year_slt = document.getElementById('year');
      var month_slt = document.getElementById('month');
      var day_slt = document.getElementById('date');
      var now = new Date();
      now_year = now.getFullYear();
    
      for(var i = now_year; i >= now_year - 70; i--) {
        var opt_year = document.createElement('option');
        opt_year.value = i;
        opt_year.innerText = i;
        year_slt.appendChild(opt_year);
      }
    
      for(var i = 1; i <= 12; i++) {
        var opt_month = document.createElement('option');
        opt_month.value = i;
        opt_month.innerText = i;
        month_slt.appendChild(opt_month);
      }
    
      function isRun(year) {
        if((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
          return 29;
        } else {
          return 28
        }
      }
    
      function addDay() {
        day_slt.innerHTML = '';
        if(month_slt.value == 1 || month_slt.value == 3 || month_slt.value == 5 || month_slt.value == 7 || month_slt.value == 8 || month_slt.value == 10 || month_slt.value == 12) {
          for(var i = 1; i <= 31; i++) {
            var day = document.createElement('option');
            day.value = i;
            day.innerText = i;
            day_slt.appendChild(day);
          }
        } else if(month_slt.value == 4 || month_slt.value == 6 || month_slt.value == 9 || month_slt.value == 11) {
          for(var i = 1; i <= 30; i++) {
            var day = document.createElement('option');
            day.value = i;
            day.innerText = i;
            day_slt.appendChild(day);
          }
        } else {
          for(var i = 1; i <= isRun(year_slt.value); i++) {
            var day = document.createElement('option');
            day.value = i;
            day.innerText = i;
            day_slt.appendChild(day);
          }
        }
    
      }
    </script>
    
    

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。