JavaScript WebAPI学习 demo4

最新推荐文章于 2023-03-11 17:04:32 发布

菜鸟小铭

最新推荐文章于 2023-03-11 17:04:32 发布

阅读量710

点赞数

分类专栏： JavaScript学习文章标签： javascript js css

本文链接：https://blog.csdn.net/weixin_46170034/article/details/104932590

版权

JavaScript学习专栏收录该内容

15 篇文章 18 订阅

订阅专栏

JavaScript WebAPI学习

这篇笔记主要讲了获取元素方法，事件，修改操作元素内容 / 链接 / 表单属性 / 元素CSS样式
初学者写下的笔记，如有错误，欢迎前来指正！

API 与 WebAPI

API：应用程序编程接口 (实现某种功能的接口)
WebAPI：操作浏览器功能的接口 (BOM，DOM)

DOM

DOM 是一种接口
DOM把以下这些都看作对象：
- 文档(document)：整个页面
- 元素(element)：标签
- 节点(node)：标签，属性，文本，注释

获取元素

注意：id选择器只能选择第一个符合条件的，而类名选择器和标签名选择器都是选择所有复合条件的

根据ID获取

方法名：getElementById()

<body>
    <div id = "time">2020 / 03 / 13</div>
    <script>
        var timer = document.getElementById('time');
        // 文档下搜索指定id，函数参数是字符串
        console.log(timer);
        // 输出整个div标签
        console.log(typeof timer);
        // 输出object
        console.dir(timer);
        // 打印元素对象，能看到里面的属性和方法
    </script>
</body>

注意：id大小写敏感并且是字符串，返回一个 DOM 对象，找不到返回 null
文档页面从上往下加载所以先声明标签，后执行 js
console.dir 输出对象的属性和方法

根据标签名获取

选择方法：getElementsByTagName()
代码示例：

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <ol>
        <li>一</li>
    </ol>
    <script>
        var lis = document.getElementsByTagName('li');
        console.log(lis[0]);
        // 输出1

        // 想要获取ol标签下的li
        var ol = document.getElementsByTagName('ol');
        ol[0].getElementsByTagName('li');
    </script>
</body>

同样方法里面放的是字符串
返回一个伪数组 (对象的集合)
- 即使只剩一个元素返回的也是伪数组形式
- 没有这个元素时返回的是空的伪数组

通过类名获取元素 (H5新特性)

方法名：getElementsByClassName();
代码示例：

<body>
    <div class = "box"></div>
    <script>
        var boxs = documents.getElementsByClassName('box');
        console.log(boxs);
    </script>
</body>

获取的是所有符合条件的类名 (但是也没有人给一大堆标签起相同的类名吧)

querySelector选择器 (H5新特性)

方法名：querySelector();
代码示例：

<body>
    <div id="test"></div>
    <ul>
        <li></li>
        <li></li>
    </ul>
    <div class="boxs"></div>
    <script>
        // 类选择器
        var firstBox = document.querySelector('.boxs');
        // id选择器
        var idBox = document.querySelector('#test');
        // 选择标签
        var li = document.querySelector('li');
    </script>
</body>

注意：只能选择第一个元素对象

querySelectorAll 选择器 (H5新特性)

可以选择所有复合条件的标签
代码示例：

<body>
    <div class="box"></div>
    <div class="box"></div>
    <script>
        // 选择所有的box属性的标签
        var allBox = document.querySelectorAll('.box');
    </script>
</body>

返回的仍然是伪数组

获取html和body标签

获取body元素

document.body;
// 返回body元素对象

获取html元素

document.documentElement;
// 返回html元素对象

事件基础

事件是JavaScript能侦测到的行为，并作出响应机制
事件由三部分组成：事件源，事件类型，事件处理程序
- 事件源：触发事件的对象
- 事件类型：如何触发事件 (鼠标点击，鼠标经过)
- 事件处理程序：通过函数赋值的操作完成
代码示例：

<body>
    <button id="btn"></button>
    <script>
        // 事件源
        var btn = document.getElementById('btn');
        // 事件类型 (绑定事件)
        btn.onclick = function() {
            // 事件处理程序
            alert('test');
        }
    </script>
</body>

事件处理三部曲：
- 1.获取元素
- 2.注册事件
- 3.程序处理
鼠标事件：

鼠标事件	说明
onclick	左键单击触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得焦点触发
onblur	失去焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标抬起触发
onmousedown	鼠标按下触发

操作元素属性

包括更改元素内容，修改元素路径

修改元素内容

修改元素内容两种方法：
- .innerText 和 .innerHTML (推荐使用.innerHTML)
代码示例：

<!-- 点击button按钮，div变成当前时间 -->
<body>
    <button>当前时间</button>
    <div><div>
    <p>当前时间</p>
    <script>
        var btn = document.getElementsByTagName('button');
        var div = document.getElementsByTagName('div');
        btn.onclick = function() {
            div.innerText = '2020/3/15';
        }

        // 元素可以不用添加事件，直接显示在网页上
        var p = document.querySelector('p');
        p.innerText = '2020/3/15';
    </script>
</body>

这两个属性是可读写的，可以获取元素里面的内容
innerText和innerHTML的区别
- innerText不识别HTML标签，但innerHTML可以识别
- innerText在读取时会去除空格和换行

修改herf和src

可以修改链接的地址或者图片的地址
代码示例：

<!-- 实现点击按钮更改图片的效果 -->
<body>
    <button class="btn"></button>
    <button class="btn"></button>
    <img src="#" alt="">
    <script>
        var button1 = document.getElementsByClassName('btn');
        var img = document.querySelector('img');
        button1[0].onclick = function() {
            img.src = '';
        }
        button1[1].onclick = function() {
            img.src = '';
        }
    </script>
</body>

修改内容实例：不同时间的问候语

代码示例：

<body>
    <div>上午好</div>
    <script>
        var div = document.querySelector('div');
        var date = new Date();
        var hh = date.getHours();
        if (h < 12) {
            div.innerHTML = '上午好';
        } else if (h < 18) {
            div.innerHTML = '下午好';
        } else {
            div.innerHTML = '晚上好';
        }
    </script>
</body>

修改表单属性

代码示例：

<!-- 单击按钮后表单里的文字被清空 -->
<body>
    <button></button>
    <input type="text" value="请输入内容">
    <script>
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        btn.onclick = function() {
            input.value = '';
            // 想要某个表单被禁用 disabled
            btn.disabled = true;
            // == this.disabled = true;
        }
    </script>
</body>

显示密码的案例

登录框时的显示密码明文
代码示例：

<style>
    .passwd {
        width: 400px;
        margin: 0 auto;
    }
    .passwd input {
        width: 370px;
        height: 30px;
        border: 0;
        outline: none;
    }
    .passwd button {
        position: absolute;
        width: 20px;
        top: 10px;
        right: 30px;
    }
</style>
<body>
    <div class="passwd">
        <button></button>
        <input type="password" value="请输入密码">
    </div>
    <script>
        var flag = 0;
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        btn.onclick = function() {
            if (flag == 0) {
                input.type = text;
                flag = 1;
            } else {
                input.type = password;
                flag = 0;
            }
        }
    </script>
</body>

使用一个 flag 来确定是应该显示密码还是隐藏密码

操作元素样式

两种操作方法：
- .style行内样式操作 (修改元素较少)
- .className 类名样式操作 (修改样式较多)

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        div.onclick = document() {
            div.style.backgroundColor = 'purple';
        }
    </script>
</body>

注意！属性用小驼峰命名法
产生的样式是行内样式 (写在标签名里的样式，优先级最高)

.style操作样式实例：循环精灵图

图片地址：淘宝精灵图
代码实例：

<style>
    ul li {
        width: 24px;
        height: 24px;
        background: url(images/spirit.png);
    }
</style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var ul = document.getElementsByTagName('ul');
        var lis = ul[0].getElementsByTagName('li');
        for (var i = 0; i < lis.length; i++) {
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
            // 注意这里属性值的写法
        }
    </script>
</body>

优点：不用每个 li 都要设置一个css样式了

表单操作案例：搜索框提示词

两个新事件：失去焦点 onblur，获得焦点 onfocus
代码示例：

<style>
    input {
        color: #999;
    }
</style>
<body>
    <input type="text" value="手机">
    <script>
        var text = document.querySelector('input');
        text.onfocus = function() {
            if (text.value === '手机') {
                text.value = '';
            }
            // 获得焦点时文字颜色变深
            text.style.color = '#333';
        }
        text.onblur = function() {
            if (text.value === '') {
                text.value = '手机';
            }
            text.style.color = '#999';
        }
    </script>
</body>

注意：修改 value 时不用加 style，因为他不是css里面的样式

className改变样式

给标签修改类名 (class)
代码示例：更改盒子样式

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .change {
        width: 200px;
        height: 200px;
        background-color: purple;
    }
</style>
<body>
    <div><div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function() {
            this.className = 'change';
        }
    </script>
</body>