WebAPI的 DOM

一、DOM

文档对象模型（DOM)，是html或者xml的标准编程接口。

1、获取元素

1）根据ID获取
使用getElementByID（）

<div id ="time">2019-9-9</div>
         <script>
           //1.因为我们文档时从上到小加载，所以显得有标签
            //2.get获得element元素by
            //3.参数大小写敏感
            //4.
            var timer=document.getElementById('time');
            console.log(timer);
            console.log(typeof timer);
            //5.打印我们返回的元素对象 更好的查看里面的属性和方法
            console.dir(timer);
            
        </script>

2）根据标签名获取，使用getElementsByTagName(‘li’);

 //1.返回的时 获取过来元素对象的集合 以伪数组的形式存储
     var lis=document.getElementsByTagName('li');
     console.log(lis);
     console.log(lis[0]);
     //2.一次打印
     for(var i=0;i<lis.length;i++)
     {
         console.log(lis[i]);
         
     }
     

3）.getElementsByClassName和querySelector

    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ur>
            <li>首页</li>
            <li>产品</li>
        </ur>
<script>
     //1.getElementsByClassName 根据类名获得某些元素集合
     var boxs =document.getElementsByClassName('box');
     console.log(boxs);
     //2.querySelector 返回指定选择器的第一个元素对象
     var firstBox=document.querySelector('.box');
     console.log(firstBox);
     var nav =document.querySelector('#nav');
     console.log(nav);
     var li=document.querySelector('li');
     console.log(li);
     //3.querySelectorAll()返回指定选择器的所有元素对象集合
     var allBox=document.querySelectorAll('.box');
     console.log(allBox);
     var lis=document.querySelectorAll('li');
     console.log(lis);
     
 </script>

4）获取body 元素,获取html元素

     //1.获取body 元素
      var bodyEle=document.body;
      console.log(bodyEle);
      console.dir(bodyEle);
       
      //2.获取html元素
      //var htmlEle=document.html;
      var htmlEle=document.documentElement;
      console.log(htmlEle);
      

2、事件基础

    <button id='btn'>唐伯虎</button>
<script>
 //点击一个按钮，弹出对话框
 //1.时间是有三部分组成 事件源 事件类型 事件处理程序 
 //（1）事件源 时间被处罚的对象 谁 按钮
 var btn =document.getElementById('btn');
//（2）事件类型  如何触发 比如鼠标点击 还是鼠标经过
//（3）事件处理程序 通过一个函数赋值的方式完成
btn.onclick=function(){
    alert('dianqiuxiang ');
}
 </script>

    <div>123</div>
<script>
  //执行时间步骤
  //点击div 控制台输出 我被选中了
  //1.获取事件源
  var div =document.querySelector('div');
  //2.绑定事件 注册事件
  //div.onclick
  //3.添加事件处理程序
  div.onclick=function(){
      console.log('我被选中了');
      
  }

 </script>

3、操作元素

 <button>显示当前系统时间</button>
    <div>某个时间</div>

    <script>
     var btn=document.querySelector('button');
     var div =document.querySelector('div');
     btn.onclick=function(){
         div.innerText=getDate();
     }

     function getDate()
     {
         var date=new Date();
         var year =date.getFullYear();
         var month=date.getMonth()+1;
         var dates=date.getDate();
         var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
         var day =date.getDay();
         return '今天是：'+year+'年'+month+'月'+dates+'日'+arr[day] ;

     }
    </script>

innerText和 innerhtml

    //元素可以不用添加事件
     var p=document.querySelector('p');
     p.innerText=getDate();
      //innerText 不识别html标签 去除空格和换行
     //innerhtml识别html标签    识别空格和换行
      div.innerHTML='<strong>今天是：</strong> 2019';
    </script>

表单

 var btn=document.querySelector('button');
    var input=document.querySelector('input');
     btn.onclick=function(){
         input.value='被点击了';
         //如果想要某个表单或按钮被禁用 不能点击 disabled 
        //btn.disabled=true;
        this.disabled=true;//this指向调用者btn
        input.disabled=true;
     }

this.className

//3.如果想要保留原先的类名first,变为change的类名
this.className='first change';

//失去焦点
ipt.onblur=function(){
      if(this.value.length<6||this.value.length>16)
   {
        console.log('错误');
        message.className='message wrong';
        message.innerHTML='要求6-16位';
    
    }
      else{
        message.className='message right';
        message.innerHTML='right';
       }
}