【前端开发】JavaScript进阶操作

最新推荐文章于 2024-06-02 09:50:22 发布

张林克

最新推荐文章于 2024-06-02 09:50:22 发布

阅读量355

点赞数

分类专栏：【前端开发基础】

本文链接：https://blog.csdn.net/weixin_45292794/article/details/119203125

版权

【前端开发基础】专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文深入探讨了DOM（文档对象模型）和BOM（浏览器对象模型）。通过实例介绍了DOM的基本概念，如获取元素、事件处理、元素操作和节点操作。同时，也讲解了BOM中的关键概念，如location、navigator和history，揭示了JavaScript与网页交互的核心机制。

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

1 Web APIs

在这里插入图片描述

2 DOM 页面文档对象模型

2.1 基本引入

2.1.1 DOM简介

在这里插入图片描述

2.1.2 获取元素

在这里插入图片描述

<body>
    <div id="time">1996.01.29</div>
    <script>
        // get elem by id
        var obj = document.getElementById('time');
        console.log(obj); // 查看内容
        console.log(typeof obj); // 查看类型 object
        console.dir(obj); //查看对象及属性
    </script>
</body>

在这里插入图片描述

2.1.3 事件基础

在这里插入图片描述

事件三要素

<button id="btn">MCY</button>
<script>
    // 1.事件源
    var btn = document.getElementById('btn');
    // 2.事件触发  点击
    // 3.事件执行程序
    btn.onclick = function(){
        alert("点击了MCY ！");
    }
</script>

在这里插入图片描述

2.1.4 操作元素

在这里插入图片描述

<body>
    <button>显示时间</button>
    <div>某个时间</div>
    <script>
        // 1.事件源
        var btn = document.querySelector('button');
        var div = document.querySelector('div')
        // 2.事件触发  点击
        // 3.事件执行程序
        btn.onclick = function (){
            div.innerText = '1996.01.29';
        }
    </script>
</body>