关于javascript:202211-JS-DOM前小插曲

4次阅读

共计 7270 个字符，预计需要花费 19 分钟才能阅读完成。

写在前头

在我决定走前端时，大略是 21 年寒假，那时加入了学校的 ACM 集训，在保持了一个寒假期间，我也意识到本人不是“小镇做题家”。当然也没那做题的脑子。之前都是始终偶然趣味来了学学前端。

大一折腾了很多其余的玩意 (钱，嘻嘻嘻)，也赚到没几个硬币。当初大二开始好好筹备春招。每天公众号打卡，没人看也无所谓。

春招倒计时

明天是 2022 年的第一天。

每日小结

无效学习工夫

6h

学习内容

DOM 的局部操作、将某马的 HTML 后面 2 个大节温习敲完了一遍（表单，列表，文本域等等）具体就不细说了

目前程度

HTML,CSS：看了某马的 html，css 网课，全敲完了一遍。菜鸟教程也看了一遍。

JavaScript：还在上着某马的课

2022.1.1

代码毛糙笔记 — 晓得本人每天学了啥就行，哈哈哈。
目录

DOM：P194～210

01-getElementById 获取元素 

<body>
    <div id="time">2019-9-9</div>
    <script>
        // 1. 因为咱们文档页面从上往下加载，所以先得有标签 所以咱们 script 写到标签的上面
        // 2. get 取得 element 元素 by 通过 驼峰命名法 
        // 3. 参数 id 是大小写敏感的字符串
        // 4. 返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // 5. console.dir 打印咱们返回的元素对象 更好的查看外面的属性和办法
        console.dir(timer);
    </script>

02-getElementsByTagName 获取某些元素 

 <body>
    <ul>
        <li> 知否知否，应是等你良久 11</li>
        <li> 知否知否，应是等你良久 11</li>
        <li> 知否知否，应是等你良久 11</li>
        <li> 知否知否，应是等你良久 11</li>

    </ul>
    <ol id="ol">
        <li> 生僻字 </li>
        <li> 生僻字 </li>
        <li> 生僻字 </li>
        <li> 生僻字 </li>

    </ol>

    <script>
        // 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. 如果页面中只有一个 li 返回的还是伪数组的模式 
        // 4. 如果页面中没有这个元素 返回的是空的伪数组的模式
        // 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
        // var ol = document.getElementsByTagName('ol'); // [ol]
        // console.log(ol[0].getElementsByTagName('li'));
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>
</body>

03-H5 新增获取元素形式 (1)

<body>
    <div class="box"> 盒子 1 </div>
    <div class="box"> 盒子 2 </div>
    <div id="nav">
        <ul>
            <li> 首页 </li>
            <li> 产品 </li>
        </ul>
    </div>
    <script>
        // 1. getElementsByClassName 依据类名取得某些元素汇合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        // 2. querySelector 返回指定选择器的第一个元素对象  切记 外面的选择器须要加符号 .box  #nav
        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>
</body>

04- 获取非凡元素 

<body>
    <script>
        // 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);
    </script>
</body>

事件

05- 事件三要素 

 <body>
    <button id="btn"> 唐伯虎 </button>
    <script>
        // 点击一个按钮，弹出对话框
        // 1. 事件是有三局部组成  事件源  事件类型  事件处理程序   咱们也称为事件三要素
        //(1) 事件源 事件被触发的对象   谁  按钮
        var btn = document.getElementById('btn');
        //(2) 事件类型  如何触发 什么事件 比方鼠标点击 (onclick) 还是鼠标通过 还是键盘按下
        //(3) 事件处理程序  通过一个函数赋值的形式 实现
        btn.onclick = function() {alert('点秋香');
        }
    </script>
</body>

06- 执行事件步骤 

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

        }
    </script>
</body>

07- 操作元素之扭转元素内容 

 <head>
    <style>
        div,
        p {
            width: 300px;
            height: 30px;
            line-height: 30px;
            color: #fff;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button> 显示以后零碎工夫 </button>
    <div> 某个工夫 </div>
    <p>1123</p>
    <script>
        // 当咱们点击了按钮，div 外面的文字会发生变化
        // 1. 获取元素 
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 2. 注册事件
        btn.onclick = function() {
            // div.innerText = '2019-6-6';
            div.innerHTML = getDate();}

        function getDate() {var date = new Date();
            // 咱们写一个 2019 年 5 月 1 日 星期三
            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];
        }
        // 咱们元素能够不必增加事件
        var p = document.querySelector('p');
        p.innerHTML = getDate();
    </script>
</body>

08-innerText 和 innerHTML 的区别 

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        // innerText 和 innerHTML 的区别 
        // 1. innerText 不辨认 html 标签 非标准  去除空格和换行
        var div = document.querySelector('div');
        // div.innerText = '<strong> 明天是：</strong> 2019';
        // 2. innerHTML 辨认 html 标签 W3C 规范 保留空格和换行的
        div.innerHTML = '<strong> 明天是：</strong> 2019';
        // 这两个属性是可读写的  能够获取元素外面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

09- 操作元素之批改元素属性 

 <body>
    <button id="ldh"> 刘德华 </button>
    <button id="zxy"> 张学友 </button> <br>
    <img src="images/ldh.jpg" alt=""title=" 刘德华 ">

    <script>
        // 批改元素属性  src
        // 1. 获取元素
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        // 2. 注册事件  处理程序
        zxy.onclick = function() {
            img.src = 'images/zxy.jpg';
            img.title = '张学友思密达';
        }
        ldh.onclick = function() {
            img.src = 'images/ldh.jpg';
            img.title = '刘德华';
        }
    </script>
</body>

10- 分时问候并显示不同图片案例 

<body>
    <img src="images/s.gif" alt="">
    <div> 上午好 </div>
    <script>
        // 依据零碎不同工夫来判断，所以须要用到日期内置对象
        // 利用多分支语句来设置不同的图片
        // 须要一个图片，并且依据工夫批改图片，就须要用到操作元素 src 属性
        // 须要一个 div 元素，显示不同问候语，批改元素内容即可
        // 1. 获取元素
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        // 2. 失去以后的小时数
        var date = new Date();
        var h = date.getHours();
        // 3. 判断小时数扭转图片和文字信息
        if (h < 12) {
            img.src = 'images/s.gif';
            div.innerHTML = '亲，上午好，好好写代码';
        } else if (h < 18) {
            img.src = 'images/x.gif';
            div.innerHTML = '亲，下午好，好好写代码';
        } else {
            img.src = 'images/w.gif';
            div.innerHTML = '亲，早晨好，好好写代码';

        }
    </script>
</body>

11- 操作元素之表单属性设置 

<body>
    <button> 按钮 </button>
    <input type="text" value="输出内容">
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2. 注册事件 处理程序
        btn.onclick = function() {
            // input.innerHTML = '点击了';  这个是 一般盒子 比方 div 标签外面的内容
            // 表单外面的值 文字内容是通过 value 来批改的
            input.value = '被点击了';
            // 如果想要某个表单被禁用 不能再点击 disabled  咱们想要这个按钮 button 禁用
            // btn.disabled = true;
            this.disabled = true;
            // this 指向的是事件函数的调用者 btn
        }
    </script>
</body>

12- 仿京东显示暗藏明码 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        
        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        
        .box img {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }
    </style>
</head>

<body>
    <div class="box">
        <label for="">
            <img src="images/close.png" alt=""id="eye">
        </label>
        <input type="password" name=""id="pwd">
    </div>
    <script>
        // 1. 获取元素
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        // 2. 注册事件 处理程序
        var flag = 0;
        eye.onclick = function() {
            // 点击一次之后，flag 肯定要变动
            if (flag == 0) {
                pwd.type = 'text';
                eye.src = 'images/open.png';
                flag = 1; // 赋值操作
            } else {
                pwd.type = 'password';
                eye.src = 'images/close.png';
                flag = 0;
            }

        }
    </script>
</body>

13- 操作元素之批改款式属性 

head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 1. 获取元素
        var div = document.querySelector('div');
        // 2. 注册事件 处理程序
        div.onclick = function() {
            // div.style 外面的属性 采取驼峰命名法 
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }
    </script>
</body>

14- 敞开淘宝二维码案例 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            /* display: block; */
        }
        
        .box img {
            width: 60px;
            margin-top: 5px;
        }
        
        .close-btn {
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        淘宝二维码
        <img src="images/tao.png" alt="">
        <i class="close-btn">×</i>
    </div>
    <script>
        // 1. 获取元素 
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        // 2. 注册事件 程序处理
        btn.onclick = function() {box.style.display = 'none';}
    </script>
</body>
正文完
javascript
发表至： javascript
2022-01-01
 0
JavaScript高级程序设计笔记变量作用域内存问题
关于javascript:使用-verdaccio-搭建私有的-npm-registry
Vue面试题精选：Vue与React的区别，分别在哪些场景下使用更合适？
关于javascript:微信小程序基础开发二模板语法

站内搜索

-「」