我正在参与掘金创作者训练营第6期

DOM

JS基础学习ECMAScript基础语法为后面做铺垫 Web APIS是JS的应用主要学习DOM和BOM 大量使用JS基础语法做交互效果

文档对象模型(Document Object Model)是W3C组织推荐的处理可扩展标记语言(html)的标准编程接口

W3C已经定义了一系列的DOM接口通过这些接口可以改变网页的内容结构样式

文档：一个页面就是一个文档 DOM中使用document表示
元素：页面中的所有标签都是元素 DOM中使用element表示
节点：网页中的所有内容都是节点(标签属性文本注释等) DOM中使用node表示
$\colorbox{cyan}{DOM把以上内容都看作对象}$

获取元素

根据ID获取

使用getElementById()方法可以获取带有ID的元素对象

<div id="time">2022-9-1</div>
<script>
    var timer = document.getElementById('time');
    console.log(timer);
    //返回的是一个元素对象
    console.log(typeof timer);//Object
    //console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
    console.dir(timer);
</script>

类标签获取

使用getElementsByTagName获取某类标签元素

<ul>
    <li>知否知否应是绿肥红瘦1</li>
    <li>知否知否应是绿肥红瘦2</li>
    <li>知否知否应是绿肥红瘦3</li>
    <li>知否知否应是绿肥红瘦4</li>
    <li>知否知否应是绿肥红瘦5</li>
</ul>
<script>
    // 返回的是 获取过来元素对象的集合 以伪数组的形式存储的
    var lis = document.getElementsByTagName('li');
    console.log(lis);
    console.log(lis[0]);
</script>

$\colorbox{cyan}{根据标签名获取}$
还可以获取某个元素（父元素）内部所有指定标签名的子元素
注意：父元素必须是单个对象（必须指明是哪一个元素对象）获取的时候不包括父元素自己

<ul>
    <li>知否知否应是绿肥红瘦1</li>
    <li>知否知否应是绿肥红瘦2</li>
    <li>知否知否应是绿肥红瘦3</li>
    <li>知否知否应是绿肥红瘦4</li>
    <li>知否知否应是绿肥红瘦5</li>
</ul>
<ol>
    <li>落叶的位置</li>
    <li>谱成一首诗</li>
    <li>啦啦啦</li>
</ol>
<script>
    // 返回的是 获取过来元素对象的集合 以伪数组的形式存储的
    var lis = document.getElementsByTagName('li');
    console.log(lis);
    console.log(lis[0]);

    var ol = document.getElementsByTagName('ol');
    console.log(ol);//返回对象以伪数组形式存储
    console.log(ol[0].getElementsByTagName('li'));//ol[0]父元素必须是确定的一个对象
</script>

H5新增获取元素方式

使用getElementsByClassName根据类名获得某些元素集合
querySelector返回指定选择器的第一个元素对象
querySelectorAll()返回指定选择器的所有元素对象集合

<div class="box">盒子</div>
<div class="box">盒子</div>
<div id="nav">
    <ul>
        <li>首页</li>
        <li>产品</li>
    </ul>
</div>
<script>
    //getElementsByClassName 根据类名获得某些元素集合
    var boxs = document.getElementsByClassName('box');
    console.log(boxs);

    //querySelector返回指定选择器的第一个元素对象
    var firstBox = document.querySelector('.box');//.代表类选择器
    console.log(firstBox);
    var nav = document.querySelector('#nav');// #代表id选择器
    console.log(nav);
    var li = document.querySelector('li');
    console.log(li);

    //querySelectorAll()返回指定选择器的所有元素对象集合
    var allBox = document.querySelectorAll('.box');
    console.log(allBox);
</script>

获取特殊元素

//获取body元素
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);
//获取html元素
var htmlEle = document.documentElement;
console.log(htmlEle);

事件基础

JavaScript使我们有能力创建动态页面而事件是可以被Javascript侦测到的行为
简单理解：触发....响应机制
网页中的每个元素都可以产生某些触发JavaScript的事件例如我们可以在用户点击某按钮时产生一个事件然后执行某些操作

$\colorbox{cyan}{执行事件的步骤}$
获取事件源
注册事件
添加事件处理程序

<button id="btn">好好学习</button>
<script>
    //事件由三部分组成 事件源 事件类型 事件处理程序
    //事件源 事件被触发的对象
    var btn = document.getElementById('btn');
    //事件类型 如何触发 比如鼠标点击 鼠标经过 键盘按下
    //事件处理程序 通过函数赋值的方式完成
    btn.onclick = function() {
        alert('天天向上');
    }
</script>

操作元素

改变元素内容

element.innerText
从起始位置到终止位置的内容但他去除html标签同时空格和换行也会去掉 element.innerHTML
起始位置到终止位置的全部内容包括html标签同时保留空格和换行

<div></div>
<p>
    我是文字
    <span>123</span>
</p>
<script>
    //innerText不识别html标签 非标准 去除空格和换行
    var div = document.querySelector('div');
    //div.innerText = '<strong>今天是：</strong> 2020';
    // innerHTML 识别html标签 W3C标准 保留空格和换行
    div.innerHTML = '<strong>今天是：</strong> 2020';

    //这两个属性是可读写的 可以获取元素里面的内容
    var p = document.querySelector('p');
    console.log(p.innerHTML);
    console.log(p.innerText);
</script>

案例

<button>显示当前系统时间</button>
<div>某个时间</div>
<script>
    //获取元素
    var btn = document.querySelector('button');
    var div = document.querySelector('div');
    //注册事件
    btn.onclick = function () {
        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];
    }
</script>

修改元素属性

修改img的src和title属性

<button id="hat">戴帽子草莓熊</button>
<button id="phone">玩手机草莓熊</button>  
<br>
<img src="./戴帽子草莓熊.jpeg" alt="" title="戴帽子草莓熊"> 

<script>
    //获取元素
    var hat = document.getElementById('hat');
    var phone = document.getElementById('phone');
    var img = document.querySelector('img');
    //注册事件 处理程序
    hat.onclick = function() {
        img.src = './戴帽子草莓熊.jpeg';
        img.title = '戴帽子草莓熊';
    }
    phone.onclick = function() {
        img.src = './玩手机草莓熊.jpeg';
        img.title = '玩手机草莓熊';
    }
</script>

修改样式属性

我们可以通过JS修改元素的大小　颜色　位置等样式

注意：
JS里面的样式采取驼峰命名法比如fontSize backgroundColor
JS修改style样式操作产生的是行内样式 css权重较高

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function() {
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }
    </script>
</body>
</html>

排他思想

如果有同一组元素我们想要某一个元素实现某种样式需要用到循环的排他思想算法：
1.所有元素全部消除样式
2.给当前元素设置样式

<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>

    <script>
        //获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        //btns得到的是伪数组 里面的每一个元素btns[i]
        for(var i=0;i<btns.length;i++){
            btns[i].onclick = function(){
                //首先把所有按钮的背景颜色去掉
                for(var i=0;i<btns.length;i++){
                    btns[i].style.backgroundColor = '';
                }
                //然后让当前的元素背景颜色为pink
                this.style.backgroundColor='pink';
            }
        }
    </script>
</body>

案例--百度换肤效果

$\colorbox{cyan}{案例分析}$
①一组元素注册事件
②利用循环注册事件
③当我们点击了这个图片让我们页面背景改为当前的图片
④核心算法：把当前图片的src路径取过来给body作为背景即可

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: url(./戴帽子草莓熊.jpeg) no-repeat center top;
            background-size: cover;
        }
        li {
            list-style: none;
        }
        .skin {
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 400px;
            padding-top: 3px;
        }
        .skin li {
            float: left;
            margin: 0;
            /* 这个属性定义了鼠标指针放在一个元素边界范围内时所用的光标的形状 */
            /* pointer光标呈现为一只手 */
            cursor: pointer;
        }
        .skin img {
            width: 200px;
        }
    </style>
</head>
<body>
    <ul class="skin">
        <li><img src="./戴帽子草莓熊.jpeg" alt=""></li>
        <li><img src="./玩手机草莓熊.jpeg" alt=""></li>
    </ul>

    <script>
        // 获取元素
        var imgs = document.querySelector('.skin').querySelectorAll('img');
        //循环注册事件
        for (var i=0;i<imgs.length;i++){
            imgs[i].onclick = function (){
                //this.src就是点击图片的路径
                document.body.style.backgroundImage = 'url('+this.src+')';
            }
        }
    </script>
</body>
</html>

案例--表格隔行变色效果

$\colorbox{cyan}{案例分析}$
①用到新的鼠标事件：鼠标经过(onmouseover) 鼠标离开(onmouseout)
②核心思路：鼠标经过tr行当前的行变背景颜色鼠标离开去掉当前的背景颜色
③注意：第一行(thead里面的行不需要变换颜色) 因此我们获取的是tbody里面的行

<!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>
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            /* border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。 */
            border-collapse: collapse;
            font-size: 14px;
        }

        thead tr{
            height: 30px;
            background-color: skyblue;
        }
        tbody tr{
            height: 30px;
        }
        tbody td{
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        .bg {
            background-color: pink;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    <script>
        //获取元素
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        //利用循环绑定注册事件
        for(var i=0;i<trs.length;i++){
            //鼠标经过事件 onmouseover
            trs[i].onmouseover = function(){
                this.className='bg';
            }
            //鼠标离开 onmouseout
            trs[i].onmouseout = function(){
                this.className='';
            }
        }
    </script>
</body>
</html>

自定义属性的操作

获取属性值
element.属性获取属性值
element.getAttribute('属性')

区别
element.属性获取内置属性值（元素本身自带的属性）
element.getAttribute('属性') 主要获得自定义的属性（标准）我们程序员自定义的属性

设置属性值
element.属性 = '值' 设置内置属性
element.setAttribute('属性','值');

移除属性
element.removeAttribute('属性')

H5自定义属性

自定义属性的目的：为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中。
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。H5给我们新增了自定义属性：
设置H5自定义属性
H5规定自定义属性data-开头作为属性名并且赋值。

<div data-index="1"></div>
<script>
    var div=document.querySelector('div');
    div.setAttribute('data-time',20);
    console.log(div.getAttribute('data-time'));
</script>

获取H5自定义属性
1.兼容性获取 element.getAttribute('data-index');
2.H5新增element.dataset.index 或者 element.dataset['index'] ie11才开始支持

dataset是一个集合里面存放了所有以data开头的自定义属性

如果自定义属性中存在多个-链接的单词我们获取的时候采取驼峰命名法

<div data-list-name="andy"></div>
<script>
    var div=document.querySelector('div');
    console.log(div.getAttribute('data-list-name'));
    //驼峰命名法
    console.log(div.dataset.listName);
    console.log(div.dataset['listName']);
</script>

DOM用法

DOM