JavaScripts API（应用程序编程接口）-CSDN博客

本文链接：https://blog.csdn.net/2401_83708850/article/details/148211593

变量声明

变量声明有三个 var、let 和 const
我们应该用那个呢？
首先 var 先排除，老派写法，问题很多，可以淘汰掉...
let or const？
建议：const 优先，尽量使用 const，原因是：
- const 语义化更好
- 很多变量我们声明的时候就知道他不会被更改了，那为什么不用 const 呢？
- 实际开发中也是，比如 react 框架，基本 const
如果你还在纠结，那么我建议：
- 有了变量先给 const，如果发现它后面是要被修改的，再改为 let

为什么 const 声明的对象可以修改里面的属性？

因为对象是引用类型，里面存储的是地址，只要地址不变，就不会报错
建议数组和对象使用 const 来声明

以下是对图中几点的讲解：

作用和分类

作用：Web API（Web 应用程序编程接口）允许 JavaScript 等脚本语言操作网页内容和浏览器功能。比如通过 Web API，能实现网页元素的增删改查、响应用户交互（像点击按钮、滚动页面），还能操作浏览器相关功能（如获取地理位置、设置本地存储）。
分类：常见分为 DOM（文档对象模型）和 BOM（浏览器对象模型）。DOM 专注于网页文档内容的操作，像访问和修改 HTML 元素；BOM 则侧重于浏览器本身功能的控制，例如操作浏览器窗口（打开新窗口、调整窗口大小）、获取浏览器导航信息等。

什么是 DOM

DOM（Document Object Model—— 文档对象模型）是用来呈现以及与任意 HTML 或 XML 文档交互的 API
白话文：DOM 是浏览器提供的一套专门用来操作网页内容的功能
DOM 作用
- 开发网页内容特效和实现用户交互

DOM 树

将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
描述网页内容关系的名词
作用：文档树直观的体现了标签与标签之间的关系

DOM 对象

浏览器依据 HTML 标签生成的 JavaScript 对象就是 DOM 对象。每个 HTML 元素在 DOM 中都对应一个对象，这些对象拥有属性（如元素的id、class、src 等）和方法（如addEventListener 用于添加事件监听）。开发者操作 DOM 对象的属性和方法，就能实现对网页元素的控制，比如使用document.getElementById 方法获取指定id 的 DOM 对象，再修改其样式属性来改变元素外观

DOM 的核心思想
- 把网页内容当做对象来处理
document 对象
- 是 DOM 里提供的一个对象
- 所以它提供的属性和方法都是用来访问和操作网页内容的
  - 例：document.write ()
- 网页所有内容都在 document 里面

获取 DOM 对象

在网页开发中，要操作某个 HTML 元素，首先得获取到对应的 DOM 对象。获取方式有多种

    <div class="box">123</div>
    <p id="nav">导航栏</p>
    <ul>
        <li>测试1</li>
        <li>测试2</li>
    </ul>
    <script>
        // const box =document.querySelector('div')
        const box =document.querySelector('.box')
        // console.log([box])
        console.dir(box)
        const nav=document.querySelector('#nav')
        console.dir(nav)
        const li=document.querySelector('ul li')
        console.dir(li)
    </script>

CSS 选择器语法规则

document.querySelector方法接收的参数是 CSS 选择器。在 CSS 选择器中，# 是用来表示通过id属性选取元素的符号。如果一个 HTML 元素设置了id属性，就可以用#加上id值来精准定位该元素
在图中代码里，<p id="nav">导航栏</p> ，id值为nav ，用document.querySelector('#nav') ，就是利用 CSS 选择器语法，通过id属性来获取这个<p> 元素对应的 DOM 对象。
与之相对的，如果是通过class名来选取元素，CSS 选择器用. 表示，比如有<div class="box"> ，要获取它就可以用document.querySelector('.box') ；如果是通过标签名选取，直接写标签名即可，像document.querySelector('p') 会获取页面中第一个<p> 标签元素。

修改对象

  nav.style.color='red'

获取多个元素

 //选择所有小li
        const lis=document.querySelectorAll('ul li')
        console.log(lis)
        // console.dir(lis)

<body>   
 <ul class="nav">
        <li>我的首页</li>
        <li>产品介绍</li>
        <li>联系方式</li>
    </ul>
  <script>
        // const nav=document.querySelector('.nav')
        // console.dir(nav)
        // const lis=document.querySelectorAll('ul li')
        // console.dir(lis)

        //获取每一个li
        const lis =document.querySelectorAll('.nav li')
        for(let i=0;i<lis.length;i++){
            console.dir(lis[i])
        }
    </script>
</body>

操作元素内容

获取 DOM 对象后，可对元素内容进行操作

1.设置 / 修改 DOM 元素内容有哪 2 种方式？

元素.innerText 属性元素.innerHTML 属性

2.二者的区别是什么？

元素.innerText 属性只识别文本，不能解析标签元素.

innerHTML 属性能识别文本，能够解析标签

如果还在纠结到底用谁，你可以选择 innerHTML

通过sytle修改样式属性

要通过 style 对象修改 CSS 样式属性，需要使用驼峰命名法（camelCase）来表示 CSS 中的连字符属性。以下是正确的用法示例：

const img = document.querySelector('img');

// 修改内联样式（使用 style 对象）
img.style.width = '300px';        // CSS: width: 300px;
img.style.height = 'auto';        // CSS: height: auto;
img.style.marginTop = '20px';     // CSS: margin-top: 20px;（连字符属性转为驼峰）
img.style.backgroundColor = 'red'; // CSS: background-color: red;
img.style.borderRadius = '10px';  // CSS: border-radius: 10px;