JavaScript基础总结：入门到进阶的全面指南

DOM 常用 API

了解DOM是掌握JavaScript的关键。DOM（文档对象模型）允许通过脚本动态地访问、更新文档内容、结构及样式。

获取元素

• document.getElementById(id)：根据ID获取一个元素。

  let element = document.getElementById('myElement');
  

• document.querySelector(selector)：使用CSS选择器来选择第一个匹配的元素。

  let element = document.querySelector('.class-name');
  

修改元素内容

• 使用innerHTML属性可以更改HTML标签内的文本或HTML代码。

  element.innerHTML = '<p>New Content</p>';
  

null 和 undefined 的区别

在JavaScript中，null和undefined常常容易混淆。

• undefined通常表示变量已经声明但是没有赋值。
• null是用于表示空指针或对象不存在的情况。它是一个明确的值，表示“无”或“空”。

示例

let a; // undefined
console.log(a); // 输出: undefined

a = null;
console.log(a); // 输出: null

事件流与事件处理

JavaScript中的事件流分为两个阶段：捕获和冒泡。大多数现代浏览器默认使用冒泡模型。

添加事件监听器

element.addEventListener('click', function(event) {
    console.log('Element was clicked');
});

在函数体内，可以访问event对象来获取更多关于事件的信息或阻止默认行为。

function handleClick(event) {
    event.preventDefault(); // 阻止默认操作
}
element.addEventListener('click', handleClick);

函数与变量

函数声明

function greet(name) {
    return `Hello, ${name}`;
}
console.log(greet("World")); // 输出: Hello, World

箭头函数（ES6）提供了一种简洁的书写方式。

const greet = (name) => `Hello, ${name}`;
console.log(greet('Earth')); // 输出: Hello, Earth

变量声明

• 使用let和const代替旧式的var，可以避免变量提升等问题。

  let x = 10;
  const y = 20; // y值不能被更改
  

数据类型与运算符

JavaScript是一种动态语言，具有多种数据类型，包括数字、字符串、布尔值等。运算符用于执行操作或产生新值。

• 比较运算符：==, ===, !=, !==
• 算术运算符：+, -, *, /, %

示例

let a = 10;
console.log(a + 2); // 输出: 12

if (a === '10') {
    console.log('Equal');
} else {
    console.log('Not Equal'); // 输出: Not Equal
}

条件语句与循环

条件语句如if-else用于执行不同的代码块，而循环语句允许重复执行一段代码直到满足某个条件。

if-else 语句

let age = 18;
if (age >= 18) {
    console.log('Adult');
} else {
    console.log('Minor'); // 输出: Adult
}

循环语句

• for循环：适用于已知迭代次数的情况。

  for (let i = 0; i < 5; i++) {
      console.log(i); // 输出从0到4的数字
  }
  

• while循环：根据条件持续执行。

  let count = 0;
  while(count < 5) {
    console.log(count++);
  }
  

本文通过详细解释和代码示例，覆盖了JavaScript基础的关键知识点。理解并掌握这些内容将帮助开发者从入门阶段过渡到更高级的开发技能。对于希望进一步提升的人士而言，深入学习异步编程、模块化等主题是下一步的方向。