当前位置：首页 > news >正文

JS—组成：2分钟掌握什么是ECMAScript操作，什么是DOM操作，什么是BOM操作

news 来源：原创 2025/5/19 4:57:44

个人博客：haichenyi.com。感谢关注

1. 目录

1–目录
2–组成
3–内置对象

2. 组成

一直都在说JS，JS，到底啥是JS有了解过吗？JS由哪几部分组成的呢？
定义： JavaScript是一种轻量级、解释型或即时编译型的编程语言，广泛用于Web开发
3部分组成： ECMAScript，DOM，BOM

ECMAScript：

ECMAScript（简称ES）是由ECMA国际标准化组织制定的一个脚本语言标准，它是JavaScript的核心。它定义了JavaScript语言的基本语法、数据类型、操作符、控制语句、函数、对象等核心概念，以及模块系统、异步编程、异常处理等高级特性。举几个简单的例子

//1.变量声明与赋值
// 使用var声明变量
var name = "John";
console.log(name); // 输出: John
// 使用let声明变量
let age = 30;
console.log(age); // 输出: 30
// 使用const声明常量
const pi = 3.14;
console.log(pi); // 输出: 3.14

//2.函数定义与调用
// 使用function关键字定义函数
function add(a, b) {
    return a + b;
}
console.log(add(2, 3)); // 输出: 5
// 使用函数表达式定义函数
const subtract = function(a, b) {
    return a - b;
};
console.log(subtract(5, 3)); // 输出: 2
// 使用箭头函数定义函数
const multiply = (a, b) => a * b;
console.log(multiply(4, 5)); // 输出: 20

//3.模板字符串
let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // 输出: Hello, Alice!

//4.类与对象
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}
let person1 = new Person("Bob", 25);
person1.greet(); // 输出: Hello, my name is Bob

//5.模块
// module.js
export const name = "John";
export function greet() {
    console.log("Hello, " + name);
}
// main.js
import { name, greet } from './module.js';
console.log(name); // 输出: John
greet(); // 输出: Hello, John

//6.解构赋值
// 数组解构
let [a, b] = [1, 2];
console.log(a); // 输出: 1
console.log(b); // 输出: 2
// 对象解构
let { name, age } = { name: "Alice", age: 30 };
console.log(name); // 输出: Alice
console.log(age); // 输出: 30

/7./数组操作
// 创建数组
let arr = [1, 2, 3, 4, 5];
// 访问数组元素
console.log(arr[0]); // 输出: 1

DOM（Document Object Model，文档对象模型）

允许脚本动态地访问和更新文档的内容、结构和样式。以下是一些DOM操作的例子：

//1.选择元素：
var element = document.getElementById('myElement'); // 根据ID选择元素
var elements = document.getElementsByClassName('myClass'); // 根据类名选择元素集合
var paragraphs = document.getElementsByTagName('p'); // 根据标签名选择元素集合

//2.访问和修改元素内容：
var divContent = document.getElementById('myDiv').innerHTML; // 获取元素的HTML内容
document.getElementById('myDiv').innerHTML = '<p>New Content</p>'; // 设置元素的HTML内容
var text = document.getElementById('myParagraph').textContent; // 获取元素的文本内容
document.getElementById('myParagraph').textContent = 'New Text'; // 设置元素的文本内容

//3.修改元素样式：
var element = document.getElementById('myDiv');
element.style.color = 'red'; // 修改文本颜色
element.style.backgroundColor = 'yellow'; // 修改背景颜色
element.style.fontSize = '20px'; // 修改字体大小

//4.创建和插入元素：
var newDiv = document.createElement('div'); // 创建新的元素节点
newDiv.textContent = 'This is a new div';
document.body.appendChild(newDiv); // 将新元素添加到页面的末尾
var newText = document.createTextNode('Hello, this is a text node'); // 创建新的文本节点
document.body.appendChild(newText); // 将文本节点添加到页面

//5.删除元素：
var parentElement = document.getElementById('parentDiv');
var childElement = document.getElementById('childDiv');
parentElement.removeChild(childElement); // 删除指定的子元素
var element = document.getElementById('myDiv');
element.remove(); // 直接删除元素本身

//6.事件处理：
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Button clicked!');
}); // 为元素添加事件监听器
button.removeEventListener('click', handleClick); // 为元素移除事件监听器（假设handleClick是之前添加的事件处理函数）

BOM（Browser Object Model，浏览器对象模型）

提供了与浏览器窗口进行交互的方法和属性。只要是跟窗口相关的操作，都属于BOM操作。比方说window调用的一些方法，窗口的全屏与非全屏等等。以下是一些BOM操作的例子：

//1.打开新窗口：
window.open('https://www.example.com');

//2.关闭当前窗口：
window.close();

//3.设置当前窗口大小：
window.resizeTo(800, 600);

//4.设置当前窗口大小：
var currentUrl = window.location.href; // 获取当前URL
window.location.href = 'https://www.example.com'; // 设置新的URL

//5.获取和设置当前URL：
var currentUrl = window.location.href; // 获取当前URL
window.location.href = 'https://www.example.com'; // 设置新的URL

//6.前进和后退浏览器历史记录：
history.forward(); // 前进到下一个历史记录
history.back(); // 后退到上一个历史记录

//7.全屏API：
document.documentElement.requestFullscreen(); // 进入全屏状态
document.exitFullscreen(); // 退出全屏状态

PS:整篇文章，精炼一下，如下
JS是一种轻量级、解释型或即时编译型的编程语言，广泛用于Web开发。
由三部分组成：ECMAScript，DOM，BOM
ECMAScript：js的核心，变量的定义，方法的调用等等。
DOM操作：跟element相关的一些方法。如获取元素，修改元素样式，修改元素内容，删减元素之类的。
BOM操作：跟窗口相关的，如window的一些方法open之类的