JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts（2）

最新推荐文章于 2022-07-15 12:41:50 发布

CalvadosAsheng

最新推荐文章于 2022-07-15 12:41:50 发布

阅读量707

点赞数

分类专栏：前端学习笔记文章标签： js javascript css css3 html

本文链接：https://blog.csdn.net/weixin_43200099/article/details/114581073

版权

DOM、BOM

Web APIs

Web APIs

Web APIs和JS基础关联性

在这里插入图片描述

API和Web API

API:应用程序编程接口
Web API：浏览器提供的一套操作浏览器功能和页面元素的API（BOM DOM）
在这里插入图片描述

DOM

DOM即文档对象模型，处理HTML或XML的标准编程接口。通过DOM接口可以改变样式内容结构。如可以做轮播图、倒计时…

DOM树

在这里插入图片描述
DOM把以上内容都看作对象。

获取元素

ID、标签名、H5新方法、特殊

getElementByld()返回一个匹配的ID元素
getElementsByTagName(）返回标签的集合

<ol id="ol">
    <li>hi</li>
    <li>hi</li>
</ol>
<ul>
    <li>你好呀</li>
    <li>你好呀</li>
    <li>你好呀</li>
    <li>你好呀</li>
    <li>你好呀</li>
</ul>
<div id="time">2019-9-9</div>
<script>
    // 因为文档页面从上往下加载，所以现有标签
    // 驼峰命名法
    //id是字符串 ()里面是字符串
    // 返回的timer类型是对象
    var timer = document.getElementById('time');
    console.log(timer);//2019-9-9
    console.dir(timer);//可以查看各种属性

    var lis = document.getElementsByTagName('li')
    console.log(lis);//返回的是 获取过来元素对象的集合 以伪数组的形式储存 
    console.log(typeof lis);//object
    console.log(lis[0]);
    // 依次打印
    for (var i = 0; i < lis.length; i++) {
        console.log(lis[i]);
    }
    // 如果页面中仅有一个li返回的还是伪数组的形式
    // 如果页面中没有li返回的是空的伪数组的形式
    // element.getElementsByTagName('标签名')父元素必须是指定的单个元素
    var ol = document.getElementById('ol')
    var lis = ol.getElementsByTagName('li')
    console.log(lis);

getElementsByClassName和H5新方法：

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<ul id="name">
    <li>1</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    var boxs = document.getElementsByClassName('box')//根据类名返回元素对象集合 伪数组形式存储
    console.log(boxs);
    console.log(document.querySelector('.box'));//返回指定选择器的第一个元素对象 里面要加符号
    console.log(document.querySelector('#name'));//返回ul
    console.log(document.querySelector('li'));
    var allBoxs = document.querySelectorAll('.box')//返回指定选择器的所有元素对象的集合 为数组形式储存
    console.log(allBoxs);
</script>

获取特殊元素对象：

<script>
    var bodyEle = document.body;
    console.dir(bodyEle);
    var htmlEle = document.documentElement;
    console.dir(htmlEle);
</script>

事件基础

事件三要素和执行步骤：
在这里插入图片描述

1.获取事件源 2.注册事件 3.事件处理程序

操作元素

js的DOM操作可以改变网页的内容、结构和样式，我们可以利用DOM操作元素改变元素里面的内容、属性等，注意以下都是属性。

改变元素内容

在这里插入图片描述

<button>显示当前系统时间</button>
<div>某个时间</div>
<p>123</p>
<script>
    //获取元素
    var btn = document.querySelector('button');
    var div = document.querySelector('div');
    //注册事件
    btn.onclick = function fn() {
        div.innerText = getDate();
    }
    function getDate() {
        //格式化日期 年月日
        var date = new Date();
        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];
    }
    //我们元素可以不用添加事件,这叫做操作DOM
    var p = document.querySelector('p');
    p.innerText = getDate();
</script>

innerText和innerHTML的区别：
1.innerText不识别html标签非标准去除空格和换行
1.innerHTML识别html标签 W3C标准保留空格和换行
两者都可以读写：

<div></div>
<p>你好
    <span>我是刘德华</span>
</p>
<script>
    var p = document.querySelector('p');
    var div = document.querySelector('div')
    console.log(p.innerHTML);
    console.log(p.innerText);
    div.innerText = '<em>今天</em>';//无法识别em会直接显示出来
    // div.innerHTML = '<em>今天</em>';//会把今天变成斜体
</script>

在这里插入图片描述

修改元素属性

实例为修改图片的src属性
在这里插入图片描述

表单属性设置

案例，password可见隐藏，多次改变恢复的方法

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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;
            right: 2px;
            top: 2px;
            width: 24px;
        }
    </style>
</head>

<body>
    <div class="box">
        <label for="">
            <img src="images/close.png" alt="" id="eye">
        </label>
        <input type="password" id="pwd">
    </div>
    <script>
        //获取元素
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        //注册事件 处理程序
        var flag = 0;
        eye.onclick = function () {
   
            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>

</html>

修改样式属性

在这里插入图片描述

    <style>
        div {
   
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var box = document.querySelector('div');
        box.onclick = function () {
   
            //注意style里的属性和css里的写法不一样，是驼峰命名法
            this.style.backgroundColor = 'blue';
            this.style.width = '250px';
        }
    </script>
</body>

修改完样式属性后新的样式是以行内样式插入的

循环精灵图

适用于精灵图中的小图标排列有规律的情况

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

<body>
    <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>
    <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';
            //注意写法 0后面有空格和负号
        }
    </script>

表单onfocus/onblur/显示隐藏文本框内容

<body

最低0.47元/天解锁文章

CalvadosAsheng

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts（2）

Web APIsWeb APIs和JS基础关联性API和Web APIAPI:应用程序编程接口Web API：浏览器提供的一套操作浏览器功能和页面元素的API（BOM DOM）DOMDOM即文档对象模型，处理HTML或XML的标准编程接口。通过DOM接口可以改变样式内容结构。如可以做轮播图、倒计时…DOM树DOM把以上内容都看作对象。获取元素ID、标签名、H5新方法、特殊getElementByld()返回一个匹配的ID元素getElementsByTagName(）返回标签
复制链接

扫一扫