小白能看懂的JavaScript内容（三）

11月8日 <div class="box">盒子</div> <div class="box">盒子</div> <div id="nav"> <ul> <li>首页</li> <li>产品</li> </ul> </div>

<script>
    //1. getElementByClassName 根据类名获得某些元素集合
    var boxs = document.getElementsByClassName('box');
    console.log(boxs);
    //2. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号#nav  .box
        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.querySelector('.box');
        console.log(allbox);
        var allli = document.querySelectorAll('li');
        console.log('allli'); 

        //获取body和HTML元素
        //获取body
        var bodyEle =document.body;
        console.log(bodyEle);
        console.dir(bodyEle);
        //获取html元素
        //var htmlEle =document.html 是错误写法
        var htmlEle = document.documentElement;
        console.log(htmlEle);
</script>
<div id="time">2022-11-4</div>
<ul>
    <li>使用getElementByTagName</li>
    <li>使用getElementByTagName</li>
    <li>使用getElementByTagName</li>
    <li>使用getElementByTagName</li>
    <li>使用getElementByTagName</li>
</ul>
<ol>
    <li>使用一切顺利</li>
    <li>使用一切顺利</li>
    <li>使用一切顺利</li>
    <li>使用一切顺利</li>
</ol>
<script>
    //get获得element元素by通过 驼峰命名法
    //参数 id 是大小写敏感的字符串
    //返回的是一个元素对象 
    var timer = document.getElementById('time');
    console.log(timer);
    console.log(typeof timer);
    //console.dir打印我们返回的元素对象 更好的查看里面的属性和方法
    console.dir(timer);


    //getElementsByTagName
    //返回的是 获取过来元素对象的集合 以伪数组的形式存储的
    var lis = document.getElementsByTagName('li');
    console.log(lis);
    console.log(lis[0]);
    //我们想要打印里面元素对象 我们采用遍历的方式
    for (var i = 0; i < lis.length; i++ ) {
        console.log(lis[i]);
    }
    //element.getElementByTagName('标签名');父元素必须是指定的单个元素
    var ol = document.getElementById('ol');
    console.log(ol.getElementsByTagName('li'));
                                   
                                   
                                    //点击按钮，div里面的时间会发生变化
        //1获取元素
        var btn = document.querySelector('#butt');
        var div = document.querySelector('div');
        var p = document.querySelector('p');
        //2注册事件
        btn.onclick = function () {
            //div.innerText = '2022-10-5';
            div.innerText = getDate();
        }

        p.innerText = getDate();

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