JavaScript中DOM操作方法小結(jié)

DM是(Document Object Model)的簡(jiǎn)稱。

創(chuàng)新互聯(lián)公司自2013年起，公司以成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、系統(tǒng)開發(fā)、網(wǎng)絡(luò)推廣、文化傳媒、企業(yè)宣傳、平面廣告設(shè)計(jì)等為主要業(yè)務(wù)，適用行業(yè)近百種。服務(wù)企業(yè)客戶上千多家，涉及國內(nèi)多個(gè)省份客戶。擁有多年網(wǎng)站建設(shè)開發(fā)經(jīng)驗(yàn)。為企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、創(chuàng)意設(shè)計(jì)、宣傳推廣等服務(wù)。通過專業(yè)的設(shè)計(jì)、獨(dú)特的風(fēng)格，為不同客戶提供各種風(fēng)格的特色服務(wù)。

一.找元素

document.getElementById() 根據(jù)id選擇器找，最多找一個(gè)；
document.getElementsByName() 根據(jù)name找，找出的是數(shù)組；
document.getElementsByclassName() 根據(jù)類選擇器找，找出的也是數(shù)組；
document.getElementsByTagName() 根據(jù)標(biāo)簽名找，找出的是數(shù)組；

二.獲取內(nèi)容

非表單元素：alert(a.innerHTML);獲取代碼和內(nèi)容，但只顯示內(nèi)容。
alert(a.innerText);提取代碼和內(nèi)容。
表單元素：alert(a.value); 獲取input中的value值。

三.操作屬性

a.setAttribute("屬性名","屬性值")；添加或更改一個(gè)屬性。
a.getAtrribute("屬性名")；獲取屬性的值。
a.removeAttribute("屬性名")；移除屬性。

四.設(shè)置樣式

var a = document.getElementsByClassName("a");

a[o].style.background-color="red";  //(只能取鉗在body里邊的)

五.相關(guān)元素操作

var b = a.nextSibling; 找a的下一個(gè)同輩元素，注意包含空格。
var b = a.previousSibling, 找a的上一個(gè)同輩元素，包含空格。
var b = a.parentNode, 找a的上一級(jí)父級(jí)元素。
var b = a.firstChild, 第一個(gè)元素； lastChild 最后一個(gè); childNodes[n]找第n個(gè)；

五.元素的創(chuàng)建、添加、刪除

var obj = document.createElement('標(biāo)簽名');

a.appendChild(); 向a中添加一個(gè)子元素。

a.removeChild();從a中刪除一個(gè)子元素。

a.selectedIndex 選中的是第幾個(gè)； a.options[a.selectedIndex] //取出第幾個(gè)option對(duì)象；

六. 字符串操作

var s = "hello world";

alert(s.toLowerCase()); 轉(zhuǎn)小寫 toUpperCase();轉(zhuǎn)大寫

alert(s.substring(3,8)) 從第三個(gè)位置截取到第八個(gè)位置

alert(s.substr(3,8)); 從第三個(gè)位置截取，截取八個(gè)字符長度。不寫后面數(shù)字是截到最后。

s.split('') 將字符串按照指定字符拆開。

七.事件

onclick: 鼠標(biāo)單擊觸發(fā)
ondblclick: 鼠標(biāo)雙擊觸發(fā)
onmouseover：鼠標(biāo)移動(dòng)到上面觸發(fā)
onmouseout：鼠標(biāo)離開時(shí)觸發(fā)
onmousemove：鼠標(biāo)在上面移動(dòng)時(shí)觸發(fā)
onchange：只要內(nèi)容改變觸發(fā)
onblur：失去焦點(diǎn)時(shí)觸發(fā)
onfocus：獲得焦點(diǎn)時(shí)觸發(fā)
onkeydown：按鍵按下時(shí)觸發(fā)
onkeyup：按鍵抬起時(shí)觸發(fā)
onkeypress: 在用戶按下并放開任何字母數(shù)字鍵時(shí)發(fā)生，但是系統(tǒng)按鈕（例：箭頭鍵、功能鍵）無法識(shí)別

例題解析：1.復(fù)選框按鈕，下一步可用

<html>
  <head>
  <title>無標(biāo)題文檔</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.兩個(gè)下拉框互傳內(nèi)容

<html>
  <head>
  <title>無標(biāo)題文檔</title>
  </head>
  
  <body>
    <select multiple="multiple" size="7" id="slt" >
      <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" >
      <option value="時(shí)間">時(shí)間</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.三個(gè)下拉框日期選擇

<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>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章題目：JavaScript中DOM操作方法小結(jié)
網(wǎng)站路徑：http://jinyejixie.com/article12/pppidc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站策劃、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站收錄、標(biāo)簽優(yōu)化、Google

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

JavaScript中DOM操作方法小結(jié)