JavaScript必须掌握的三大器件：基础语法、BOM和DOM

冷不防 2024-03-08 06:38 111阅读 0赞

**目录**

一、什么是 JavaScript

二、JavaScript 的基础语法

三、什么是JavaScript的BOM

四、什么是JavaScript的DOM

--------------------

![c8ea2b6eef3344eda3c5e398aefdb01e.png][]

## 一、什么是 JavaScript ##

JavaScript是一种广泛用于网页上实现交互功能的编程语言。它是一种脚本语言，可以嵌入到HTML页面中，并在浏览器中执行。JavaScript可以用来实现动态网页效果，操作网页元素，响应用户的交互行为，以及与服务器进行数据交互等功能。它具有简单易学的语法和灵活的特性，很受开发者欢迎，并广泛应用于前端开发、移动应用开发和服务器端开发等领域。

![1b5db661c2a94efcad948d35e3e1dc0b.png][]

## 二、JavaScript 的基础语法 ##

下面是JavaScript的一些基础语法示例：

变量声明和赋值：

var name = "Mental AI";
    var age = 20;

条件语句：

if (age >= 18) {
       console.log("成年");
    } else {
       console.log("未成年");
    }

循环语句：

for (var i = 0; i < 5; i++) {
       console.log(i);
    }

函数定义和调用：

function greet(name) {
       console.log("Hello, " + name + "!");
    }
    
    greet("Mental");

数组操作：

var fruits = ["apple", "banana", "orange"];
    console.log(fruits[0]); // 输出 "apple"
    
    fruits.push("grape"); // 在数组末尾添加元素
    console.log(fruits.length); // 输出 4

对象操作：

var person = {
       name: "Mental AI",
       age: 20,
       gender: "male"
    };
    
    console.log(person.name); // 输出 "Mental AI"
    person.age = 21; // 修改属性值

这些只是JavaScript语言的一部分基础语法示例，可以帮助你入门。JavaScript还有更多的语法和功能，可以根据需要学习和使用。

![5aa0d3ed84564401be7e9972a31632e4.png][]

## 三、什么是JavaScript的BOM ##

BOM（Browser Object Model）指的是浏览器对象模型，它是JavaScript中与浏览器交互的API集合。BOM提供了一组对象和方法，用于操作浏览器窗口、文档、历史记录、定时器等浏览器相关的功能。

BOM的核心对象是window对象，它代表浏览器窗口或框架。通过window对象，我们可以访问和操作浏览器的各种属性和方法。下面是一些常见的BOM对象：

1.  navigator：提供有关浏览器的信息，如浏览器名称、版本、用户代理等。
2.  location：提供有关当前URL的信息，并可以用于重定向到新的URL。
3.  history：提供浏览器历史记录的访问和操作。
4.  screen：提供关于用户屏幕的信息，如屏幕分辨率、颜色深度等。

除了上述对象，BOM还提供了一些其他的对象和方法，用于处理浏览器窗口的打开、关闭、大小调整，处理浏览器事件（如点击、滚动等），以及与浏览器的通信等功能。

通过BOM，JavaScript可以与浏览器进行交互，实现各种网页的交互功能和操作。BOM的功能丰富，为开发者提供了强大的工具，使得 JavaScript 在网页开发中具有广泛的应用。

![c60d8283cbb74e75be6e8d5b972f4ebe.png][]

## 四、什么是JavaScript的DOM ##

DOM（Document Object Model）指的是文档对象模型,它是JavaScript中用于访问和操作HTML文档的编程接口。DOM将HTML文档表示为一棵树状结构,其中每个HTML元素都是一个节点,每个节点都可以通过JavaScript进行访问和操作。通过DOM,我们可以使用JavaScript来动态地创建、修改、删除HTML元素,以及获取和修改元素的属性、样式和内容等。DOM提供了一组对象和方法,用于操作HTML文档的各个部分。下面是一些常见的DOM对象：

1.  document：代表整个HTML文档,通过它可以访问和操作文档的各个部分。
2.  element：代表HTML元素,通过它可以获取和修改元素的属性、样式和内容等。
3.  event：代表事件,通过它可以处理用户的交互行为,如点击、滚动、输入等。
4.  node：代表文档中的节点,包括元素节点、文本节点、注释节点等。DOM提供了一套API,通过这些API可以对HTML文档进行增删改查的操作。

通过DOM,我们可以通过JavaScript来实现动态的网页效果和交互功能,使得网页变得更加生动和有趣。DOM是JavaScript中非常重要的一部分,它与BOM一起为JavaScript提供了与浏览器进行交互的能力,是前端开发的基础之一。

![c26fd3718e574629a416bf765cfa9531.png][]

[c8ea2b6eef3344eda3c5e398aefdb01e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/55a88d3057214799870ed53b27e1c86d.png
[1b5db661c2a94efcad948d35e3e1dc0b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/d009d5fd97c140b7bbecc16852d192ea.png
[5aa0d3ed84564401be7e9972a31632e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/8e7eda89049d4e60903db1287c4daa11.png
[c60d8283cbb74e75be6e8d5b972f4ebe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/fc6cf2bb51b0470b803d4806b0ef2fcb.png
[c26fd3718e574629a416bf765cfa9531.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/575cd1e4272d430db397572dc6832bf2.png