DOM

Document Object Model 文檔對(duì)象模型

1.Dom可進(jìn)行的操作：
查找 修改 添加 刪除

Dom案例

(1)
<ul id='tree'>
                <li>
                   電子設(shè)備
                   <ul>
                        <li>手機(jī)</li>
                        <li>電視</li>
                        <li>電腦</li>
                   </ul>
                </li>
                <li>
                   母嬰用品
                   <ul>
                        <li>奶粉</li>
                        <li>玩具</li>
                        <li>尿不濕</li>
                   </ul>
                </li>
                <li>
                   個(gè)人護(hù)理
                   <ul>
                        <li>面膜</li>
                        <li>爽膚水</li>
                        <li>BB霜</li>
                   </ul>
                </li>
            </ul>
<script>
查找tree的父元素
console.log(tree.parentElement);
查找tree的子元素
console.log(tree.children);
從tree找到尿不濕
console.log(tree.children[1].firstElementChild.children[2]);  
</script>

(2)
<ul id='tree'>
                <li class='list'>電子設(shè)備</li>
                <li class='list'>母嬰用品</li>
                <li class='list'>個(gè)人護(hù)理</li>
            </ul>
            <input type="" name="uname">
<script>
使用id找
var ul=document.getElementById('tree');
tree.style.color='red';
使用class查找  返回一個(gè)動(dòng)態(tài)集合
var list=document.getElementsByClassName('list');
for(var i=0;i<list.length;i++){
list[i].style.background='yellow';
 }
使用標(biāo)簽名查找
var li=document.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
li[i].style.fontSize='30px';
}
使用name屬性查找 只針對(duì)于表單元素
var input=document.getElementsByName('uname');
for(var i=0;i<input.length;i++){
input[i].style.color='green';
}

(3)
<ul id='tree'>
                <li>
                   電子設(shè)備
                   <ul>
                        <li>手機(jī)</li>
                        <li>電視</li>
                        <li>電腦</li>
                   </ul>
                </li>
                <li>
                   母嬰用品
                   <ul>
                        <li>奶粉</li>
                        <li>玩具</li>
                        <li>尿不濕</li>
                   </ul>
                </li>
                <li>
                   個(gè)人護(hù)理
                   <ul>
                        <li>面膜</li>
                        <li>爽膚水</li>
                        <li>BB霜</li>
                   </ul>
                </li>
            </ul>
<script>
按選擇器找技矮，只能找到一個(gè)
var li=document.querySelector('#tree>li:first-child>ul>li:nth-child(2)');
li.style.color='red';
按選擇器找，可以找到多個(gè)
var lis=document.querySelectorAll('#tree>li');
console.log(lis);
for(var i=0;i<lis.length;i++){
lis[i].style.color='red';
  }
</script>

(4)
<select id="unsel" size="5" multiple>
        <option>Argentina</option>
        <option>Brazil</option>
        <option>Canada</option>
        <option>Chile</option>
        <option>China</option>
        <option>Cuba</option>
        <option>Denmark</option>
        <option>Egypt</option>
        <option>France</option>
        <option>Greece</option>
        <option>Spain</option>
  </select>
    <div>
        <button onclick='move(this)'>&gt;&gt;</button>
        <button onclick='move(this)'>&gt;</button>
        <button onclick='move(this)'>&lt;</button>
        <button onclick='move(this)'>&lt;&lt;</button>
    </div>
    <select id="sel" size="5" multiple>
    </select>
    <script>
        
 var unselCts=[],selCts=[];
   將unsel元素中的所有國(guó)家名稱(chēng)填充到unselCts中
unselCts=   unsel的內(nèi)容去掉開(kāi)頭和結(jié)尾的空字符殊轴，再掐頭去尾衰倦，按?切割
  unsel.innerHTML
       .replace(/^\s+|\s+$/g,"")
       .slice(8,-9)
       .split(/<\/option>\s*<option>/);

function move(btn){
  switch(btn.innerHTML){  判斷btn的內(nèi)容:
    case "&gt;&gt;":    是>>，就將unselCts拼接到selCts結(jié)尾旁理，再保存回selCts中
      selCts=selCts.concat(unselCts);
      unselCts=[];   將unselCts清空
      break;
    case "&lt;&lt;":  是<<樊零，就將selCts拼接到unselCts結(jié)尾，再保存回unselCts中
      unselCts=unselCts.concat(selCts);
      selCts=[];   將selCts清空
      break;
    case "&gt;":    是
        查找id為unsel下的所有option孽文，保存在變量opts中
      var opts=document.querySelectorAll(
        "#unsel>option"
      );
         反向遍歷opts中每個(gè)opt
         for(var i=opts.length-1;i>=0;i--){
        for(var i=0;i<opts.length;i++){
           如果當(dāng)前opt的selected為true   為什么用true判斷
        if(opts[i].selected){
            刪除unselCts數(shù)組中當(dāng)前位置的元素驻襟，再將刪除的元素拼接到selCts中
          selCts.push(unselCts.splice(i,1));
        }
      }
      break;
    case "&lt;":  是<,就查找id為sel下的所有option，保存在變量opts中
      var opts=document.querySelectorAll(
        "#sel>option"  
      );
         反向遍歷opts中每個(gè)opt
          for(var i=opts.length-1;i>=0;i--){
        for(var i=0;i<opts.length;i++){
          如果當(dāng)前opt的selected為true
        if(opts[i].selected){
             刪除selCts數(shù)組中當(dāng)前位置的元素芋哭，再將刪除的元素拼接到unselCts中
          unselCts.push(selCts.splice(i,1));
        }
      }
  }
  unselCts.sort();  將unselCts按國(guó)家名稱(chēng)升序排列
  selCts.sort();  將selCts按國(guó)家名稱(chēng)升序排序
    查找id為unsel的元素塑悼，保存在unsel中
  var unsel=document.getElementById("unsel");
     將unselCts數(shù)組的內(nèi)容更新到unsel元素中
  updateSel(unselCts,unsel);
    查找id為sel的元素，保存在sel中
  var sel=document.getElementById("sel");
     將selCts數(shù)組的內(nèi)容更新到sel元素中
  updateSel(selCts,sel);
}
function updateSel(arr,sel){
     設(shè)置sel的內(nèi)容為:arr按?拼接楷掉，補(bǔ)上開(kāi)頭和結(jié)尾
  sel.innerHTML=("<option>"+
    arr.join("</option><option>")
    +"</option>");
}
</script>