JavaScript --------WebS APIs学习之DOM(二)

操作元素

          JavaScript 的DOM操作可以改变网页内容,结构和样式,我们可以利用DOM操作元素来改变元素里面的内容,属性等.

 一 改变元素的内容

             ①element.innerText //从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉

             不识别html标签  (非标准)

             ②element.innerHTML //起始位置到终止位置的全部内容,包括html标签,保留空格和换行.

             识别html标签( W3C标准)

案例 : 点击按钮 ,div中显示当前时间

     <button> 显示现在时间</button>
     <div> 时间显示在这里</div>
     <p>时间一直显示在这里</p>
     <script>
         var btn = document.querySelector('button');
         var div = document.querySelector('div');
         btn.onclick = function(){
             div.innerHTML = getDate();
         }
         function getDate(){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            var week = date.getDay();
            return '今天是'+ year + '年' + month + '月' + day + '日 ' + arr[week] ;
         }
         var p = document.querySelector('p');
         p.innerHTML = getDate();
     </script>

二 常用元素的属性操作

        案例:修改属性src

    <style>
         img{
             height : 300px;
         }
     </style>
     <button id="yh"> 杨花儿</button>
     <button id="fa"> 花儿 </button>
     <br><br>
     <img src="yh.jpg" alt="">
     <script>
         var  yh = document.querySelector('#yh');
         var  fa = document.querySelector('#fa');
         var  img = document.querySelector('img');
        fa.onclick = function(){
            img.src = 'f.png';
        }
        yh.onclick = function (){
            img.src = 'yh.jpg' ;
        }
     </script>

案例:分时显示不同图片 ,显示不同的问候语.

     <style>
         img{
             height: 200px;
         }
     </style>
     <div></div>
     <img src="f.png" alt="">
     <script>
         var div = document.querySelector('div');
         var img = document.querySelector('img');
         var date = new Date();
         var h =  date.getHours();
        
         if ( h <= 12){
            div.innerHTML = '上午好';
            img.src='zao.jpg';
         }else if( h<18){
             div.innerHTML = '下午好';
             img.src='zhong.jpg';
         } else 
         {
            div.innerHTML = '晚上好';
            img.src='wan.jpg';
         }
     </script>

三 表单元素的属性操作 

利用DOM 可以操作如一下表单元素的属性: type value checked selected disabled

案例: 点击按钮 ,表单内容改变.并且禁用按钮

<button> 提交</button>
<input type="text" value="你还没点按钮">
<script>
    var input = document.querySelector('input');
    var btn = document.querySelector('button');
    btn.onclick = function(){
        input.value = '点击过按钮了 + 按钮不能再点了';
        btn.disabled = true ;
    }

案例:显示密码的案例

    <div>亲输入密码</div>
    <input type="password">
    <button>点击</button>
    <script>
        var input = document.querySelector('input');
        var btn = document.querySelector('button');
        var flag = 1;
        btn.onclick = function (){
            if(flag == 1){
                flag = 0;
                input.type = 'text';
            }
            else{
                input.type = 'password';
                flag = 1;
            }
        }
    </script>