JS笔记 APIS和DOM

最新推荐文章于 2025-12-04 17:20:28 发布

原创最新推荐文章于 2025-12-04 17:20:28 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

这篇博客详细介绍了WebAPIs和DOM的相关概念及实际应用。WebAPIs是JavaScript中用于操作浏览器功能和页面元素的接口，包括DOM和BOM。DOM作为文档对象模型，提供了操作HTML或XML文档的标准接口。博客内容涵盖了DOM的基本概念，如获取元素、事件处理和元素操作，并通过实例演示了如何使用JavaScript进行DOM操作，如根据ID、标签名获取元素，以及事件监听和元素内容的修改。

2022.7.15 周五学习记录博客。学习时长：3h。学习内容：APIs简介和DOM（未完）

Web APIs

1.Web APIs 和 JS 基础关联性

Web APIs

复习target

能够说出Web APIs 阶段与 JS语法阶段的关联性
能够说出什么是API
能够说出什么是Web API

Web APIs 和 JS 基础关联性
API 和 Web API

1.Web APIs 和 JS 基础关联性

1.1 Web APIs 阶段

Web APIs 是 W3C组织的标准
Web APIs 中主要学习 DOM 和 BOM
Web APIs 是JS 所独有的部分
主要学习页面交互功能
需要使用 JS 基础的课程内容做基础

2. API 和 Web APIs

2.1 API

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

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

2.2 Web API

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

Web API 一般都有输入和输出（函数的传参和返回值），Web API很多都是方法（函数）。

DOM

复习target

能够说出什么是DOM
能够获取页面元素
能够给元素注册事件
能够操作DOM 元素的属性
能够创建元素
能够操作DOM节点

DOM 简介
获取元素
事件基础
操作元素
节点操作

1.DOM简介

1.1 什么是DOM

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

通过DOM接口可以改变网页的内容、结构和样式。

1.2 DOM树

文档：一个页面就是一个文档，DOM中用 document 表示

元素：页面中的所有标签都是元素，DOM中使用element表示

节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

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

2.获取元素

2.1 如何获取页面元素

根据 ID 获取
根据标签名获取
根据 HTML5 新增的方法获取
特殊元素获取

2.2 根据 ID 获取

使用 getElementById（）方法可以获取带有 ID 的元素对象

get 获得 element 元素 by 通过。元素名是驼峰命名法
参数 id 是大小写敏感的字符串
返回的是一个元素对象

2.3 根据标签名获取元素

getElementsByTagName（）方法可以返回带有指定标签名的对象的集合。

无论页面中返回的元素是什么标签，这个元素是否存在，返回的都是一个伪数组。（元素不存在则返回空的伪数组）

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

element.getElementsByTagName(' 标签名 ')

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

//示例
<ul id='ol'>
    <li>知否知否，应是等你好久1</li>
    <li>知否知否，应是等你好久2</li>
    <li>知否知否，应是等你好久3</li>
    <li>知否知否，应是等你好久4</li>
    <li>知否知否，应是等你好久5</li>
</ul>
<script>
        //1. 返回的是，获取过来元素对象的集合，以伪数组的形式存储
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        //2.依次打印里面的元素对象可以采取遍历的方式
        for(var i =0; i < lis,length; i++){
            console.log(lis);                                                              
        }
</script>
//方法2   element.getElementsByTagName('标签名')
<script>
      var ol =document.getElementById('ol');
      console.log(ol.getElementsByTagName('li'));
</script>

2.4 通过HTML 5新增的方法获取

<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');
    //2. querySelector 返回指定选择器的第一个元素对象  注意里面的选择器要加符号 例如 .box #nav
    var firstBox = document.querySelector('.box');
    console.log(firstBox);
    var nav = document.querySelector('#nav');
    console.log(nav);
    var li = document.querySelector('li');
    console.log(li);
    3. querySelectorAll() 返回指定选择器的所有元素对象集合
    var allBox = document.querySelectorAll('.box');
    console.log(allBox);
    var lis = document.querySelectorAll('li');
    console.log(lis);
    
</script>

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

获取body元素：document.body
获取html元素：document.documentElement

<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 概述

JS 使我们有能力创建动态页面，而事件则是可以被 JS 侦测到的行为

简单理解：触发——响应机制。

事件有三部分组成事件源、事件类型、事件处理程序。

事件源：事件被触发的对象
事件类型：如何触发，是什么事件？鼠标点击还是鼠标经过
事件处理程序：通过一个函数赋值的方式来完成

示例点击一个按钮，弹出对话框
<button id="btn">唐伯虎</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function(){
        alert('点秋香')；    
    }
</script>

3.2 执行事件的步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）

4.操作元素

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

4.1改变元素内容

element.innerText

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

element.innerHTML

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

<button>显示当前系统时间</button>
<div>某个时间</div>
<p>1123</p>
<script>
//案例1：点击按钮，div里面的文字发生变化，替换成当前日期
    //1.获取元素
    var btn = document.querySelector('button');
    var div = document.querySelector('div');
    //2.注册事件
    btn.onclick = function(){
        div.innerText = getDate();    
    }
    function getDate(){
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        var day = date.getDay();
        return '今天是:' + year + '年' + month + '月' + dates + '日' + arr[day];  
    }
//案例2:元素可以不添加时间   
var p = document.querySelector('p');
p.innerText = getDate(); 
</script>


//innerText 和 innerHTML 区别
<div></div>
<p>
    我是文字
    <span>123</span>
</p>
<script>
//1.innerText 不识别HTML标签，非标准，去除空格和换行
    var div = document.querySelector('div');
    div.innerText = '<strong>今天是：</strong>2019'
//2.innerHTML 识别HTML标签，w3c标准
    var div = document.querySelector('div');
    div.innerHTML = '<strong>今天是：</strong>2019'
//3.读写区别
var p = document.querySelector('p');
console.log(p.innerText);    //输出 “我是文字123”
console.log(p.innerHTML);    //输出“我是文字 <span>123</span>” 并且保留空格和换行
</script>