JavaScript基础语法14-DOM code8

BUG_devil

已于 2022-05-05 22:38:40 修改

阅读量471

点赞数

分类专栏： JavaScript 笔记文章标签： javascript 开发语言 ecmascript

于 2022-03-02 23:14:45 首次发布

本文链接：https://blog.csdn.net/BUG_devil/article/details/123241408

版权

JavaScript 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

笔记

4 篇文章 0 订阅

订阅专栏

本文详细介绍了DOM（文档对象模型）的基本概念和操作，包括如何获取页面元素、通过ID、标签名、HTML5新方法等。此外，还探讨了事件的基础知识，如事件源、事件类型和事件处理程序，并展示了事件绑定和执行的步骤。最后，讲解了如何使用JavaScript操作元素的内容、属性、样式，以及自定义属性，并给出了多个实际案例，如切换图片、表单验证、样式修改等。

摘要由CSDN通过智能技术生成

1. DOM简介

1.1 什么是DOM

1.2 DOM 树

2. 获取元素

2.1如何获取页面元素

2.2 根据ID获取

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

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

2.3 根据标签名获取

使用getElementTagName() 方法可以返回带有指定标签名的对象的集合

document.getElementsByTagName('标签名');

注意：

1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历

2. 得到的元素是动态的

还可以获取某个元素（父元素）内部所有指定标签名的子元素

element.getElementsByTagName('标签名');

注意：父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己

    <ul>
        <li>知否知否，应是得你好久</li>
        <li>知否知否，应是得你好久</li>
        <li>知否知否，应是得你好久</li>
    </ul>
    <ol id="ol">
        <li>不知不知</li>
        <li>不知不知</li>
        <li>不知不知</li>
    </ol>   
 <script>
        // 1. 返回的是  获取过来元素对象的集合 以伪数组的形式存储的
        var list = document.getElementsByTagName('li');
        console.log(list);
        console.log(list[0]);
        // 2. 想要依次打印里面的元素对象 我们可以采取遍历的方式
        for(var i = 0; i < list.length; i++){
            console.log(list[i]);
        }
        // 3. 如果页面中只有一个li 返回的还是伪数组的形式
        // 4. 如果页面中没有这个元素，返回的是空的伪数组[] 
        // 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
        // 方法一
        // var ol = document.getElementsByTagName('ol');
        // console.log(ol[0].getElementsByTagName('li'));
        // 方法二（一般情况） 通过id获取父元素
        var ol = document.getElementsByTagName('ol');
        console.log(ol[0].getElementsByTagName('li'));
    </script>

2.4 通过HTML5 新增的方法获取（推荐）

1. document.getElementsByClassName('类名'); // 根据类名返回元素对象集合

2. document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象

3. document.querySelectorAll('选择器'); //返回指定选择器的所有元素对象的集合

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

        // 切记 里面的选择器需要加符号 .box #nav
        // 2. querySelector('选择器');  返回指定选择器返回第一个元素对象
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nva = document.querySelector('#nav');
        console.log(nva);
        var li = document.querySelector('li'); //获取第一个li
        console.log(li);
        // 3. querySelectorAll('选择器'); 返回指定选择器的所有元素对象的集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>
</body>

2.5 获取特殊元素（body , html ）

获取body元素

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

获取html元素

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

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

3. 事件基础

3.1 事件概述

3.2 事件三要素

1. 事件有三部分组成事件源事件类型事件处理程序我们称为事件三要素

（1）事件源事件被触发的对象

（2）事件类型如何触发什么事件比如鼠标点击(onclick) 还是鼠标经过

（3）事件处理程序 通过一个函数赋值的方式完成

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

3.3 执行事件的步骤

1. 获取事件源

2. 注册事件(绑定事件)

3. 添加事件处理程序(采取函数赋值形式)

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

3.4 常见的鼠标事件

4. 操作元素

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

4.1 改变元素内容

element.innerText

从起始位置到终止位置的内容，但它除去html标签，同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

<body>
    <div></div>
    <p>
        我是p里面的文字
        <span>123</span>
    </p>
    <script>
        // innerText 和 innerHTML 的区别 
        // 1.innerText 不识别html标签 非标准 去除空格和换行
        var div = document.querySelector('div');
        div.innerText = '<strong>今天是：</strong>2022';

        // 2. innerHTML  识别html标签 W3C标准 保留空格和换行
        div.innerHTML = '<strong>今天是：</strong>2022';

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

4.2 常用元素的属性操作

1. innerText、innerHTML 改变元素内容

2. src、href

3. id、alt、title

<body>
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button>
    <img src="images/a.png" 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/b.png';
            img.title = '张学友';
        }
        ldh.onclick = function(){
            img.src = 'images/a.png';
            img.title = '刘德华';
        }
    </script>
</body>

案例：根据事件切换问候语和图片

<body>
    <img src="images/a.png" alt="">
    <p>上午好</p>
    <script>
        // 1. 获取元素
        var img = document.querySelector('img');
        var p = document.querySelector('p');
        // 2.得到当前小时数
        var date = new Date();
        var h = date.getHours();
        // 3. 判断小时数改变图片和文字信息
        if( h < 12){
            img.src = 'images/a.png';
            p.innerHTML = '上午好';
        }else if(h < 18){
            img.src = 'images/b.png';
            p.innerHTML = '中午好';
        }else{
            img.src =  'images/a.png';
            p.innerHTML = '晚上好';
        }
    </script>
</body>

4.3 表单元素的属性操作

利用DOM可以操作如下表单元素的属性:

type、value、checked(选择属性)、selected、disabled(是否被禁用)

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2. 注册事件 处理程序
        btn.onclick = function(){
            // 表单里面的值 文字内容是通过 value 来修改的
            input.value = '';
            // 某个表单元素被禁用 disabled
            // btn.disabled = true ;
            this.disabled = true;
            // this 指向的是事件函数的调用者 
        }
    </script>
</body>

重要案例：密码框切换

<body>
    <div class="box">
        <label for="">
            <img src="images/colse.png" alt="" id="eye">
        </label>
        <input type="password" id="pw"> 
    </div>

    <script>
        // 1. 获取元素
        var eye = document.getElementById('eye'); 
        var pw = document.getElementById('pw'); 
        // 2. 注册事件 处理程序
        var flag = 0;
        eye.onclick = function(){
            // 点击一次之后，flag 一定要变化
            if(flag == 0){
                pw.type = 'text';
                eye.src = 'images/open.png';
                flag = 1; // 赋值操作
            }else{
                pw.type = 'password';
                eye.src = 'images/colse.png';
                flag = 0;
            }
        }
    </script>
</body>

案例：搜索框焦点操作

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

4.4 样式属性操作

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

1. element.style 行内样式操作

2. element.className 类名样式操作

注意：

1. JS 里面的样式采取驼峰命名法比如fontSize、 backgroundColor

2. JS修改style样式操作，产生的是行内样式，css权重比较高

3. 如果样式修改比较多，可以采用操作类名方式更改元素样式

4. class因为是个保留字，因此使用className来操作元素类名属性

5. className 会直接更改元素的类名，会覆盖原先的类名

案例：样式属性操作

    <style>
        .first{
            width: 200px;
            height: 200px;
            background-color: bisque;
        }
        .change{
            background-color: blueviolet;
            color: #fff;
            font-size: 25x;
            margin-top:100px;
        }
    </style>
</head>
<body>
    <div class="first">文本</div>
    <script>
        // 1 使用elemnt.style 获得修改元素样式 
        var test = document.querySelector("div");
        test.onclick = function() {
            // this.style.backgroundColor ="pink";
            // this.style.color='#fff';
            // this.style.fontSize ='25px';
            // 让当前元素的类名 改为了 change


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

案例：注册密码验证

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

    <script>
        // 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){
                //输入错误  显示内容
                message.className = "message wrong";
                message.innerHTML = "输入位数错误，6-16位"
            }else{
                message.className = "message right";
                message.innerHTML = "正确";
            }
        }
    </script>
</body>

操作元素总结

4.5 排他思想

案例：按钮切换 code8-19

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

案例：百度换肤 code8-20

<body>
    <ul class="baidu">
        <li><img src="images/1.png" alt=""></li>
        <li><img src="images/2.png" alt=""></li>
        <li><img src="images/3.png" alt=""></li>
        <li><img src="images/4.png" alt=""></li>
    </ul>
    <script>
        // 1. 获取元素
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // 2. 循环注册事件
        for(var i=0; i< imgs.length; i++) {
            imgs[i].onclick=function(){
                // 把当前路径 this.src 给body
               document.body.style.backgroundImage='url('+this.src+')' ;
            }
        }
    </script>
</body

案例：表格隔行变色案例 code8-21

<script>
    // 1. 获取元素 获取的是 tbody 里面的行
    var trs = document.querySelector('tbody').querySelectorAll('tr');
    // 2. 利用循环 绑定注册事件
    for(var i=0; i< trs.length; i++){
        // 3. 鼠标经过事件 onmouserover
        trs[i].onmouseover = function(){
            this.className = 'bg';
        }
        // 4.鼠标离开事件 onmouseout
        trs[i].onmouseout = function(){
            this.className = '';
        }
    }
</script>

4.6 自定义属性的操作

1.获取属性值

2.设置属性值

3. 移除属性

element.removeAttribute('属性')

<body>
    <div id="demo" index="1" class="dd"></div>
    <script>
        // 1. 获取元素的属性值
        // （1）element.属性
        var div = document.querySelector('div');
        console.log(div.id);
        // (2) element.getAttribute('属性') Attribute：属性
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
        // 2. 设置元素属性值
        // （1） element.属性 = '值'
        div.id = 'test';
        div.className = 'cc';
        // （2）element.setAttribute('属性','值')  主要针对自定义属性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'aa');
        // 3. 移除属性 removeAttribute('属性')
        div.removeAttribute('index');
    </script>
</body>

4.7 自定义属性的操作

1.获取属性值

element.属性

<body>
    <div id="demo"></div>
    <script>
        var div = document.querySelector('div');
        //1.获取元素的属性值
        //(1)element.属性
        console.log(div.id);
    </script>
</body>

element.getAttribute('属性')；

<body>
    <div id="demo"></div>
    <script>
        var div = document.querySelector('div');
        //1.获取元素的属性值
        //(1)element.属性
        console.log(div.id);
        //(2)element.getAttribute('属性');
        console.log(div.getAttribute('id'));
    </script>
</body>

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

2.设置属性值


element.属性值 = ‘值’

 div.id = 'test';

 element.setAttribute('属性‘，’值‘)；

div.setAttribute('index','2');
div.setAttribute('class','footer');//class 特殊 这里面写的就是class，不是className

3.移除属性

 div.removeAttribute('属性');

5.节点操作

6.DOM重点核心

关于dom操作我们主要针对于元素的操作，主要有创建、增、删、改、查、属性操作、事件操作。

6.1 创建

1. document.write

2. innerHTML

3.createElement

6.2 增

1. appendChild

2. insertBefore

6.3 删

1. removeChild

6.4 改

主要修改dom的元素属性，dom元素的内容、属性、表单的值等

修改元素属性：src、href、title 等
修改普通元素内容：innerHTML、innerText
修改表单元素：value、type、disabled
修改元素样式：style、className

6.5 查

主要获取查询dom的元素

DOM提供的API方法：getElementById、getElementsByTagName (古老用法，不推荐)
H5提供的新方法：querySelector、querySelectorAll (提倡)
利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡