前端学习打卡第九周（3.21-3.27）

1 dom 获取元素

element.style行内样式操作

element.classname类名样式操作

</script>

<div class="first" id="demo" index="1">12345</div>

<script>

var divs = document.querySelector('div');

divs.onclick = function () {

// this.className = 'change';

     //覆盖之前的类名

     //如果想保留原先的类名

this.className = 'first change'

/getElementById

        //1 因为文档从上向下加载，script 写在下面

        //2 get 获得 element 元素 用驼峰命名法

        //参数 id 是大小写敏感的字符串

       var timer= document.getElementById('time');

       console.log(timer);

       console.log( typeof timer);

       console.dir(timer);

    </script>

    <ul>

        <li>12345</li>

        <li>12345</li>

        <li>12345</li>

        <li>12345</li>

        <li>12345</li>

    </ul>

    <script>

        var lis = document.getElementsByTagName('li');

        console.log (lis);//以伪数组的形式输出

    </script>

    <div class="box">盒子</div>

    <div class="box">盒子</div>

    <script>

        var box = document.getElementsByClassName('box');

        console.log(box);//类名选择器

        //queryselector 返回指定选择器的第一个元素对象 切记要加符号 .box #nav

    </script>

    <script>

        //获取body 元素

        var body1=document.body;

        console.log(body1);

        //获取html 元素

        var html1= document.documentElement;

        console.log(html1);

    </script>

    <button id="btn">唐伯虎</button>

    <script>

        //事件源 事件类型 事件处理程序  三要素

        //点击按钮弹出对话框

        var btn = document.getElementById('btn');//事件源

        btn.onclick = function(){

            alert('点秋香');

        }

    </script>

    <button id="showTime">显示时间</button>

    <div id="timer">某个时间</div>

    <script>

        var showTime = document.getElementById('showTime');

        var timer= document.getElementById('timer');

        showTime.onclick = function(){

            var date = new Date();

            timer.innerText = date;

        }

案例 关闭图片

切换背景图

案例全选反选