DOM、BOM、计算时间机器案例（包括正反）

最新推荐文章于 2024-10-18 17:51:23 发布

初闻女人香

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量396

点赞数 9

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_70251011/article/details/135599427

版权

作用分类

在这里插入图片描述

<body>
    <div>123</div>
    <script>
        const div = document.querySelector('div')
        //打印对象
        console.dir(div)
    </script>
</body>

把网页标签当作对象来处理
在这里插入图片描述

获取DOM对象

根据CSS选择器来获取
其他获取DOM方法

 <div class="box">123</div>
    <div class="box">456</div>

    <script>
        const box = document.querySelector('div')
        console.log(box);
    </script>

在这里插入图片描述

document：表示整个文档对象，用于访问和操作整个网页文档的内容和结构。
getElementById()：通过元素的 ID 获取对应的 DOM 对象。
querySelector()：通过 CSS 选择器获取对应的 DOM 对象。
innerHTML：表示元素内部的 HTML 内容，可以读取或修改元素的 HTML 内容。
textContent：表示元素的文本内容，可以读取或修改元素的纯文本内容。
style：表示元素的样式属性对象，可以读取或修改元素的样式。
addEventListener()：用于向元素添加事件监听器，以响应特定的事件。
appendChild()：将一个元素作为子元素添加到另一个元素中。

DOM和BOM区别

DOM 文档对象模型
1.DOM 就是把「文档」当做一个「对象」来看待
2.DOM 的顶级对象是 document
3.DOM 主要学习的是操作页面元素
4.DOM 是 W3C 标准规范
BOM 浏览器对象模型

把「浏览器」当做一个「对象」来看待
2.BOM 的顶级对象是 window
3.BOM 学习的是浏览器窗口交互的一些对象
4.BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差BOM 比 DOM 更大，它包含 DOM它是 JS 访问浏览器窗口的一个接口。。
DOM是文档对象模型，他的对象是document，就是把文档看做对象，对文档进行操作，由此可推出， DOM 的顶级对象是 document

计算机案例（正反）

正

  <script>

        let all = +prompt('请tmd输入总秒数')//弹出输入框 +prompt取数字

        function getTimes(t) {            //定义一个时间函数赋值给参数t
            let h = parseInt(t / 3600 ).toString().padStart("0")
            let m = parseInt(t / 60 % 60).toString().padStart(2,"0")
            let s = parseInt(t % 60).toString().padStart(2,"0")       //三元运算符 parseInt用于取整数          
            return `转换后的时间为${h}:${m}:${s}`
        }
        let num = getTimes(all)
        alert(num)
    </script>

反

<script>
        
        let h = +prompt('请输入小时数');
        let m = +prompt('请输入分钟数');
        let s = +prompt('请输入秒数');

        let totalSeconds = h * 3600 + m * 60 + s;

        alert(`总秒数为：${totalSeconds}`);
    </script>