暑假复习8

DOM

Document Object Model 文档对象模型

1.Dom可进行的操作：
查找 修改 添加 删除

Dom案例

(1)
<ul id='tree'>
                <li>
                   电子设备
                   <ul>
                        <li>手机</li>
                        <li>电视</li>
                        <li>电脑</li>
                   </ul>
                </li>
                <li>
                   母婴用品
                   <ul>
                        <li>奶粉</li>
                        <li>玩具</li>
                        <li>尿不湿</li>
                   </ul>
                </li>
                <li>
                   个人护理
                   <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'>电子设备</li>
                <li class='list'>母婴用品</li>
                <li class='list'>个人护理</li>
            </ul>
            <input type="" name="uname">
<script>
使用id找
var ul=document.getElementById('tree');
tree.style.color='red';
使用class查找  返回一个动态集合
var list=document.getElementsByClassName('list');
for(var i=0;i<list.length;i++){
list[i].style.background='yellow';
 }
使用标签名查找
var li=document.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
li[i].style.fontSize='30px';
}
使用name属性查找 只针对于表单元素
var input=document.getElementsByName('uname');
for(var i=0;i<input.length;i++){
input[i].style.color='green';
}

(3)
<ul id='tree'>
                <li>
                   电子设备
                   <ul>
                        <li>手机</li>
                        <li>电视</li>
                        <li>电脑</li>
                   </ul>
                </li>
                <li>
                   母婴用品
                   <ul>
                        <li>奶粉</li>
                        <li>玩具</li>
                        <li>尿不湿</li>
                   </ul>
                </li>
                <li>
                   个人护理
                   <ul>
                        <li>面膜</li>
                        <li>爽肤水</li>
                        <li>BB霜</li>
                   </ul>
                </li>
            </ul>
<script>
按选择器找，只能找到一个
var li=document.querySelector('#tree>li:first-child>ul>li:nth-child(2)');
li.style.color='red';
按选择器找，可以找到多个
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元素中的所有国家名称填充到unselCts中
unselCts=   unsel的内容去掉开头和结尾的空字符，再掐头去尾，按?切割
  unsel.innerHTML
       .replace(/^\s+|\s+$/g,"")
       .slice(8,-9)
       .split(/<\/option>\s*<option>/);

function move(btn){
  switch(btn.innerHTML){  判断btn的内容:
    case "&gt;&gt;":    是>>，就将unselCts拼接到selCts结尾，再保存回selCts中
      selCts=selCts.concat(unselCts);
      unselCts=[];   将unselCts清空
      break;
    case "&lt;&lt;":  是<<，就将selCts拼接到unselCts结尾，再保存回unselCts中
      unselCts=unselCts.concat(selCts);
      selCts=[];   将selCts清空
      break;
    case "&gt;":    是
        查找id为unsel下的所有option，保存在变量opts中
      var opts=document.querySelectorAll(
        "#unsel>option"
      );
         反向遍历opts中每个opt
         for(var i=opts.length-1;i>=0;i--){
        for(var i=0;i<opts.length;i++){
           如果当前opt的selected为true   为什么用true判断
        if(opts[i].selected){
            删除unselCts数组中当前位置的元素，再将删除的元素拼接到selCts中
          selCts.push(unselCts.splice(i,1));
        }
      }
      break;
    case "&lt;":  是<,就查找id为sel下的所有option，保存在变量opts中
      var opts=document.querySelectorAll(
        "#sel>option"  
      );
         反向遍历opts中每个opt
          for(var i=opts.length-1;i>=0;i--){
        for(var i=0;i<opts.length;i++){
          如果当前opt的selected为true
        if(opts[i].selected){
             删除selCts数组中当前位置的元素，再将删除的元素拼接到unselCts中
          unselCts.push(selCts.splice(i,1));
        }
      }
  }
  unselCts.sort();  将unselCts按国家名称升序排列
  selCts.sort();  将selCts按国家名称升序排序
    查找id为unsel的元素，保存在unsel中
  var unsel=document.getElementById("unsel");
     将unselCts数组的内容更新到unsel元素中
  updateSel(unselCts,unsel);
    查找id为sel的元素，保存在sel中
  var sel=document.getElementById("sel");
     将selCts数组的内容更新到sel元素中
  updateSel(selCts,sel);
}
function updateSel(arr,sel){
     设置sel的内容为:arr按?拼接，补上开头和结尾
  sel.innerHTML=("<option>"+
    arr.join("</option><option>")
    +"</option>");
}
</script>