JavaScript进阶第一天——操作元素

01、web-APIS简介导读

02、js基础和web APIs两个阶段的关联性

JavaScript进阶第一天——操作元素_第1张图片
JavaScript进阶第一天——操作元素_第2张图片

03、API和WebAPI

JavaScript进阶第一天——操作元素_第3张图片
JavaScript进阶第一天——操作元素_第4张图片
JavaScript进阶第一天——操作元素_第5张图片

04、DOM导读

05、DOM简介

在这里插入图片描述
JavaScript进阶第一天——操作元素_第6张图片

JavaScript进阶第一天——操作元素_第7张图片

06、getElementByld获取元素

在这里插入图片描述

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

07、getElementsByTagName

在这里插入图片描述
JavaScript进阶第一天——操作元素_第8张图片
1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
3. 如果页面中只有一个li 返回的还是伪数组的形式
4. 如果页面中没有这个元素 返回的是空的伪数组的形式
5. element.getElementsByTagName(‘标签名’); 父元素必须是指定的单个元素
1、

<body>
    <ul>
        <li>知否知否,应是等你好久11</li>
        <li>知否知否,应是等你好久11</li>
        <li>知否知否,应是等你好久11</li>
        <li>知否知否,应是等你好久11</li>

    </ul>
    <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]);

        }
    </script>
</body>

JavaScript进阶第一天——操作元素_第9张图片

2、element.getElementsByTagName(‘标签名’); 父元素必须是指定的单个元素(eg:ol[0])

<body>
    <ol id="ol">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ol>
    
    <script>
        // 3. 如果页面中只有一个li 返回的还是伪数组的形式 
        // 4. 如果页面中没有这个元素 返回的是空的伪数组的形式
        // 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
        var ol = document.getElementsByTagName('ol'); // [ol]
        console.log(ol[0].getElementsByTagName('li')); //父元素必须是指定的单个元素eg:ol[0]
    </script>
</body>

3、

<body>
    <ol id="ol">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ol>
    
    <script>
        // 3. 如果页面中只有一个li 返回的还是伪数组的形式 
        // 4. 如果页面中没有这个元素 返回的是空的伪数组的形式
        // 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>
</body>

08、H5新增获取元素的方式

1\getElementsByClassName根据类名获得某些元素集合
2\querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav
3\querySelectorAll()返回指定选择器的所有元素对象集合
eg:

<!DOCTYPE html>
<html lang="en">

<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>
</head>

<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>

</html>

09、获取body和html元素

    // 1.获取body 元素
    var bodyEle = document.body;
    
    // 2.获取html 元素
    var htmlEle = document.documentElement;

10、事件3要素

(1) 事件源 事件被触发的对象 谁 按钮
即获取元素的过程
(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
(3) 事件处理程序 通过一个函数赋值的方式 完成
具体语法写作

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

11、执行事件的步骤(就是三要素中的内容而已)

eg:

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

        }
    </script>
</body>

JavaScript进阶第一天——操作元素_第10张图片

12、操作元素-修改元素内容

JavaScript进阶第一天——操作元素_第11张图片
点击后再更新时间:

        // 当我们点击了按钮,  div里面的文字会发生变化
        // 1. 获取元素 
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 2.注册事件
        btn.onclick = function() {
            // div.innerText = '2019-6-6';
            div.innerHTML = getDate();
        }

不点击、刷新后直接更新时间:

        // 我们元素可以不用添加事件
        var p = document.querySelector('p');
        p.innerHTML = getDate();

13、innerText和innerHTML的区别

html更常用

    <script>
        // innerText 和 innerHTML的区别 
        // 1. innerText 不识别html标签 非标准  去除空格和换行
        var div = document.querySelector('div');
        div.innerText = '今天是:2019'; //有效
        div.innerText = '今天是: 2019'; //HTML标签无效
        // 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
        div.innerHTML = '今天是: 2019'; //HTML标签有效
        // 3. 这两个属性是可读写的  可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>

14、操作元素-修改元素属性

eg:点击不同按钮,显示不同的图片
(改变图片的 src:img.src = 'images/zxy.jpg';
(title是鼠标经过时的显示文字)

<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>

15、分时问候案例

JavaScript进阶第一天——操作元素_第12张图片
// 根据系统不同时间来判断,所以需要用到日期内置对象
// 利用多分支语句来设置不同的图片
// 需要一个图片,并且根据时间修改图片,就需要用到操作元素src属性
// 需要一个div元素,显示不同问候语,修改元素内容即可

<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>

16、操作元素-修改表单属性

<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; 在函数内使用事件函数的调用者 btn不是个好习惯,所以用this代替!
            this.disabled = true;
            // this 指向的是事件函数的调用者 btn
        }
    </script>
</body>

17、18、仿京东显示隐藏密码明文案例

JavaScript进阶第一天——操作元素_第13张图片
密码可见\不可见的实现思路:
JavaScript进阶第一天——操作元素_第14张图片
重点:一定要用一个flag的变量

HTML部分:

    <div class="box">
        <label for="">
            <img src="images/close.png" alt="" id="eye">
        label>
        <input type="password" name="" id="pwd">
    div>

css部分

    

JavaScript部分:

    <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>

19、操作元素-修改样式属性

我们可以通过JS来修改元素的大小、颜色、位置等样式
在这里插入图片描述
eg:
点击后让粉色变为紫色,宽度变大

<!DOCTYPE html>
<html lang="en">

<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>

</html>

JavaScript进阶第一天——操作元素_第15张图片

20、仿淘宝关闭二维码案例box.style.display = 'none';

html:

    <div class="box">
        淘宝二维码
        <img src="images/tao.png" alt="">
        <i class="close-btn">×i>
    div>

css:

    

js:

    <script>
        // 1. 获取元素 
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        // 2.注册事件 程序处理
        btn.onclick = function() {
            box.style.display = 'none';
        }
    </script>

21、循环精灵图

JavaScript进阶第一天——操作元素_第16张图片
重点:lis[i].style.backgroundPosition = '0 -' + index + 'px';
html:

    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

css:

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .box {
            width: 250px;
            margin: 100px auto;
        }
        
        .box li {
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
            background: url(images/sprite.png) no-repeat;
        }
    </style>

js:

    <script>
        // 1. 获取元素 所有的小li 
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            // 让索引号 乘以 44 就是每个li 的背景y坐标  index就是我们的y坐标
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>

22、显示隐藏文本框内容onfocus和onblur

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<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>
        input {
            color: #999;
        }
    </style>
</head>

<body>
    <input type="text" value="手机">
    <script>
        // 1.获取元素
        var text = document.querySelector('input');
        // 2.注册事件 获得焦点事件 onfocus 
        text.onfocus = function() {
                // console.log('得到了焦点');
                if (this.value === '手机') {
                    this.value = '';
                }
                // 获得焦点需要把文本框里面的文字颜色变黑
                this.style.color = '#333';
            }
            // 3. 注册事件 失去焦点事件 onblur
        text.onblur = function() {
            // console.log('失去了焦点');
            if (this.value === '') {
                this.value = '手机';
            }
            // 失去焦点需要把文本框里面的文字颜色变浅色
            this.style.color = '#999';
        }
    </script>

</body>

</html>

23、使用className修改样式属性

JavaScript进阶第一天——操作元素_第17张图片

给一个标签添加许多属性有些麻烦
可以把这些属性的赋值操作打包给一个类名,
这样只需要在js中给这个标签(元素)添加一个类名即可this.className = 'first change';

<!DOCTYPE html>
<html lang="en">

<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: 100px;
            height: 100px;
            background-color: pink;
        }
        
        .change {
            background-color: purple;
            color: #fff;
            font-size: 25px;
            margin-top: 100px;
        }
    </style>
</head>


<body>
    <div class="first">文本</div>
    <script>
        // 1. 使用 element.style 获得修改元素样式  如果样式比较少 或者 功能简单的情况下使用
        var test = document.querySelector('div');
        test.onclick = function() {
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = '25px';
            // this.style.marginTop = '100px';
            // 让我们当前元素的类名改为了 change

            // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
            // 3. 如果想要保留原先的类名,我们可以这么做 多类名选择器
            // this.className = 'change';
            this.className = 'first change';
        }
    </script>
</body>

</html>

24、密码框验证案例(仿新浪注册页面)

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

JavaScript进阶第一天——操作元素_第18张图片
html:

    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>

css:

    

js:

    <script>
        // 首先判断的事件是表单失去焦点 onblur
        // 如果输入正确则提示正确的信息颜色为绿色小图标变化
        // 如果输入不是6到16位,则提示错误信息颜色为红色 小图标变化
        // 因为里面变化样式较多,我们采取className修改样式
        // 1.获取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //2. 注册事件 失去焦点
        ipt.onblur = function () {
            // 根据表单里面值的长度 ipt.value.length
            if (this.value.length < 6 || this.value.length > 16) {
                // console.log('错误');
                message.className = 'message wrong';
                message.innerHTML = '您输入的位数不对要求6~16位'; //修改元素内容
            } else {
                message.className = 'message right';
                message.innerHTML = '您输入的正确';//修改元素内容
            }
        }
    </script>

25、操作元素及总结

JavaScript进阶第一天——操作元素_第19张图片

你可能感兴趣的:(JS进阶DOM和BOM,js,javascript)