JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支

页面加载事件

window.onload

window.onload事件是在文档（包括图像、CSS和其他资源）全部加载完成时触发的事件，用于在页面加载完成后执行一些初始化操作，比如加载一些需要资源的模块或者初始化一个需要在页面加载完毕后才能使用的插件。

window.onload = function() {
  // 在页面加载完毕后执行一些初始化操作
  console.log('页面全部加载完成！');
};

DOMContentLoaded

DOMContentLoaded事件是在文档的DOM树构建完成后立即触发的事件，不待图像、CSS和其他资源完成加载。因此，和window.onload事件相比，DOMContentLoaded事件能够更早地完成页面的初始化操作。

document.addEventListener('DOMContentLoaded', function() {
  // 在DOM树构建完成后立即触发的事件
  console.log('DOM树构建完成！');
});

需要注意的是，DOMContentLoaded事件的触发并不会等待图片等资源的加载完成。

数组操作

push

push()方法用于向数组的末尾添加一个或多个元素，并返回新的长度。

let arr = ['apple', 'banana', 'cherry'];
arr.push('date');
console.log(arr); // ['apple', 'banana', 'cherry', 'date']

pop

pop()方法用于移除数组末尾的元素，并返回被移除的元素。

let arr = ['apple', 'banana', 'cherry'];
let last = arr.pop();
console.log(last); // 'cherry'
console.log(arr); // ['apple', 'banana']

DOM节点操作

createElement

createElement()方法用于创建一个新的HTML元素。

let p = document.createElement('p');
p.textContent = 'Hello world!';
document.body.appendChild(p);

removeChild

removeChild()方法用于从DOM树中移除指定的子节点。

let p = document.getElementsByTagName('p')[0];
document.body.removeChild(p);

循环和分支

for循环

for循环用于重复执行一段代码，可以通过初始化、循环条件和增量来控制循环行为。

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

if语句

if语句用于在代码中添加分支逻辑，根据条件来执行不同的代码分支。

let a = 5;
if (a > 0) {
  console.log('a是一个正数');
} else {
  console.log('a是一个负数或者0');
}

示例

在页面加载完成后初始化一个轮播插件

window.onload = function() {
  let carousel = new Carousel('.carousel');
  carousel.start();
};

遍历一个数组，并将其中的元素添加到DOM树中

let data = ['apple', 'banana', 'cherry'];
let list = document.createElement('ul');
for (let i = 0; i < data.length; i++) {
  let item = document.createElement('li');
  item.textContent = data[i];
  list.appendChild(item);
}
document.body.appendChild(list);