DOM学习中

一.getElementById获取元素

    <div id="123">2022-2-20</div>
    <script>      
    var numr= document.getElementById('123') ;
    // 1.script写在标签下面
    // 2.参数id是大小写敏感的字符串
    // 3.返回的是一个元素对象
    console.log(numr);
    console.log(typeof numr);
    console.dir(numr);
  </script>

 二. 根据标签名获取元素

一：
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<script>
//    getElementsByTagName()  获取某类标签元素

var numr= document.getElementsByTagName('li');
console.log(numr);
console.log(numr[0]);  //返回的是 获取过来元素对象的集合 以为数组的形式存储

</script>

二：
<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
 </ul>
 <ol id="OL">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
 </ol>
 <!-- 这样获取ol中的li用: element.getElementsByTagName('标签名')   父元素必须是指明的一个元素 ，获取的时候不包括父元素自己 -->
<script>
    // 第一种方法
     var ol = document.getElementsByTagName('ol')
     var numr = ol[0].getElementsByTagName('li');
     console.log(numr);
    // 第二种方法
    var ol = document.getElementById('OL');
    var numr = ol.getElementsByTagName('li');
    console.log(numr);
</script>

三.根据类名获取元素

<div class="box"> 1</div>
<div class="box">2 </div>
<div id="nav">
    <ul id="ul">
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script>
 
// 1. getElementsByClassName()
var nmur = document.getElementsByClassName('box');
console.log(numr);


// 2. querySelector('选择器')  返回指定选择器的第一个元素对象， 里面选择器需要加符号  .box #nav 
var box = document.querySelector('.box')
console.log(box);

var nav = document.querySelector('#nav');
console.log(nav);

var li = document.querySelector('li');
console.log('li');


// 3.querySelectorAll  返回指定选择器的所有对象
var box = document.querySelectorAll('.box')
console.log(box);
</script>

四.获取获取body标签  获取html标签

<script>
    // 1. 获取body标签 document.body
   var bodya = document.body
   console.log(bodya);
    // 2. 获取html标签 document.documentElement 
   var htmla=  document.documentElement 
   console.log(htmla);
</script>

五.事件基础

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


    <!-- 操作元素：
    1.改变元素内容  
    （1） element.innerText  不识别html标签 去除空格和换行 
     (2)  element.innerHTML  识别html标签   更常用
  -->
   <button>显示系统时间</button>
    <div>2022-1-1 17：00</div>
    <script>
        var btu = document.querySelector('button');
        var div = document.querySelector('div');
        btu.onclick = function(){
            div.innerText = getTimer(); 
        }
        function getTimer() {
            var time = new Date();
            var y = time.getFullYear();
            var mh = time.getMonth() + 1;
            var d = time.getDate();
            var nday = time.getDay();
            var arr  = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',];
            nady = arr[nday];
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            return y + '年' + mh + '月' + d + '日 ' + nady+'  ' + h + ':' + m + ':' + s;
        }

    </script>