JavaScript基础学习 DOM

最新推荐文章于 2024-04-26 16:47:03 发布

柠檬味小发糕

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量490

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_43537319/article/details/121930805

版权

JavaScript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

JavaScript基础学习 DOM

DOM获取元素
获取特殊元素 html与body
事件三要素
innerText与innerHTML的区别
分时间问候案例

DOM获取元素

<!DOCTYPE html>
<html>

<head>
    <title>DOM开始学习</title>
</head>

<body>


    <div id="time">2021-12-13</div>


    <ul>
        <li>DOM学习1</li>
        <li>DOM学习2</li>
        <li>DOM学习3</li>
    </ul>
    <ol id='ol'>
        <li>JS one</li>
        <li>JS two</li>
        <li>JS three</li>
    </ol>


    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

    <script>
        //  文档页面从上往下加载，所以先得有标签，需要将script写到标签的下面


        //  1.根据id获取元素
        //  参数 id是大小写敏感的字符串
        // 返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer); //object类型
        //console.dir   打印我们返回的元素对象  更好的查看里面的属性和方法
        console.dir(timer);

        console.log('-------------------------------------------------1');

        // 2.根据标签名获取元素
        // 返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis); // [li, li, li]
        console.log(lis[0]);
        //  我们想要依次打印里面的元素对象可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }

        // 如果页面当中只有一个li 返回的还是伪数组的形式

        // 如果页面当中没有这个元素 返回的是空的伪数组


        console.log('-------------------------------------------------2');
        // 如何获取某个父元素内部所有指定标签名的子元素  例如：获取ol标签当中的所有li标签
        //  方法一
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));

        // 方法二
        var num = document.getElementsByTagName('ol');
        console.log(num[0].getElementsByTagName('li')); //  父元素要是哪个指定具体的元素


        // 3.  通过HTML5 新增方法来获取元素
        // 3(1)getElementsByClassName  根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);

        // 3(2)querySelector 返回指定选择器的第一个元素对象
        var firstBox = document.querySelector('.box');
        console.log(firstBox);

        var nav = document.querySelector('#nav');
        console.log(nav);

        var divs = document.querySelector('div');
        console.log(divs); // 输出<div id="time>2021-12-13</div>

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


</body>

</html>

在这里插入图片描述

获取特殊元素 html与body

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devcie-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


</head>

<body>
    <script>
        // 1. 获取body  元素对象
        var bodyN = document.body;
        console.log(bodyN);
        console.dir(bodyN); // body类型

        // 2.  获取html  元素对象
        var htmlN = document.documentElement;
        console.log(htmlN);
    </script>

</body>

</html>

在这里插入图片描述

事件三要素

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devcie-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


</head>

<body>

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

</body>

</html>

innerText与innerHTML的区别

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devcie-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


</head>

<body>

    <div></div>
    <div class="a"></div>
    <p>
        2021年12月14日
        <span>6666</span>
    </p>
    <script>
        // innerText不识别HTML标签  非标准  去除空格和换行
        var divs = document.querySelector('div');
        divs.innerText = '<storge>今天是: </storge> 周三';

        // innerHTML识别HTML标签  W3C标准
        var divss = document.querySelector('.a');
        divss.innerHTML = '<strong>今天是: </strong> 周三';


        //  这两个属性是可读写的   可以获取元素当中的内容  
        //innerText只显示内容， 不保留格式
        //innerHTML会将html当中的标签与格式保留一起显示
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>

</body>

</html>

在这里插入图片描述

分时间问候案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devcie-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        img {
            width: 300px;
            height: 200px;
        }
    </style>

</head>

<body>
    <img src="image/morning.jpeg">
    <div>早上好呀</div>
    <script>
        // 根据不同时间，页面显示不同图片，同时显示不同的问候语
        var img = document.querySelector('img');
        var divs = document.querySelector('div');

        var date = new Date();
        var h = date.getHours();
        if (h < 12) {
            divs.innerHTML = '早上好呀，程序猿，好好写代码';
            img.src = 'image/morning.jpeg';

        } else if (h < 18) {
            divs.innerHTML = '下午好呀，程序猿，好好写代码';
            img.src = 'image/noon.jpeg';
        } else {
            divs.innerHTML = '晚上好呀，程序猿，还是好好写代码';
            img.src = 'image/night.jpeg';
        }
    </script>


</body>

</html>

在这里插入图片描述

柠檬味小发糕

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
JavaScript基础学习 DOM

JavaScript基础学习 DOMDOM获取元素获取特殊元素 html与body事件三要素innerText与innerHTML的区别分时间问候案例DOM获取元素<!DOCTYPE html><html><head> <title>DOM开始学习</title></head><body> <div id="time">2021-12-13</div>
复制链接

扫一扫