【前端】JavaScript-DOM基础1

目录

一、Web APIs

Web APIs和JS基础关联性

API和Web API

 二、DOM

DOM简介

DOM树

获取元素

1.根据ID获取

2.根据标签名获取

3.根据HTML5新增的方法获取

4.获取特殊元素（body,html)

事件基础

---

一、Web APIs

Web APIs和JS基础关联性

JS基础学习ECMAScript基础语法为后面作铺垫，Web APIs是JS的应用，大量使用JS基础语法做交互效果。

API和Web API

API（应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源代码，或理解内部工作机制的细节。

简单理解：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

Web API是浏览器提供的一套操作浏览页面和页面元素的API（BOM和DOM）。

详细API：Web API 接口参考 | MDN (mozilla.org)

 二、DOM

DOM简介

文档对象模型（简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

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

DOM树

• 文档：一个页面就是一个文档，DOM中使用document表示
• 元素：页面中所有标签都是元素，DOM中使用element表示
• 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

DOM把以上内容都看做是对象

获取元素

1.根据ID获取

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

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

2.根据标签名获取

根据getElementsByTagName()方法可以返回带有指定标签名的对象集合。

    <ul>
        <li>知否知否，应是绿肥红瘦1li>
        <li>知否知否，应是绿肥红瘦2li>
        <li>知否知否，应是绿肥红瘦3li>
        <li>知否知否，应是绿肥红瘦4li>
        <li>知否知否，应是绿肥红瘦5li>
    ul>
    <script>
        //1.返回的是获取过来的元素对象的集合，以伪数组的形式存储的。
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        //2.想要依次打印里面的元素对象可以采取遍历的方式
        for (let i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        //3.如果页面中只有一个li，返回的还是伪数组的形式
        //4.如果页面中没有这个元素，返回的是空的伪数组的形式
    script>

注意：

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

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

父元素.getElementsByTagName('标签名');

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

3.根据HTML5新增的方法获取

1.getElementsByClassName根据类名获得某些元素

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

2.querySelector返回指定选择器的第一个元素对象

document.querySelector('选择器');//选择器需要加符号书写方式.box #nav

3.querySelectorAll返回指定选择器的所有元素对象集合

document.querySelectorAll('选择器');

4.获取特殊元素（body,html)

获取body元素

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

获取html元素

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

事件基础

JavaScript使我们有能力创建动态页面，而时间是可以被JavaScript侦测到的行为。

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

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

执行事件的步骤：

1.获取事件源

2.注册事件（绑定事件）

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

常见的鼠标事件：