JS前端开发基础：页面加载事件、数组方法与DOM操作完整指南

JavaScript 前端核心基础概述

本文旨在系统梳理JavaScript前端开发中的关键知识点，重点介绍页面加载事件、数组常用操作方法、DOM节点操作以及基础的循环与分支结构，供读者参考学习。

页面加载事件机制

在Web开发中，理解不同页面加载事件的执行时机至关重要。

window.onload 事件会在页面所有资源（包括图片、样式表等）加载完成后触发。
jQuery 提供的 document.ready 方法则是在DOM结构解析完成后即可执行，通常比 window.onload 更早触发。


document.ready = function (callback) {
  // 兼容FF,Google
  if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', function () {
      document.removeEventListener('DOMContentLoaded', arguments.callee, false);
      callback();
    }, false)
  }
  // 兼容IE
  else if (document.attachEvent) {
    document.attachEvent('onreadystatechange', function () {
       if (document.readyState == "complete") {
            document.detachEvent("onreadystatechange", arguments.callee);
            callback();
        }
    })
  }
  else if (document.lastChild == document.body) {
    callback();
  }
}
window.onload = function () {
  alert('onload'); // 后执行
};
document.ready(function () {
  alert('ready'); // 先执行
});

其内部实现机制涉及对不同浏览器事件监听器的兼容处理，具体代码逻辑见下文。

数组常用操作方法

数组是JavaScript中常用的数据结构，掌握其常用操作方法有助于高效处理数据。

push 方法用于从数组末尾追加一个或多个元素，并返回新数组的长度。
unshift 方法用于从数组开头追加一个或多个元素，同样返回新数组的长度。
pop 方法用于删除并返回数组的最后一个元素。
shift 方法用于删除并返回数组的第一个元素。
concat 方法用于连接两个或多个数组，并返回一个新的数组，原数组不变。
join 方法用于将数组中的所有元素连接成一个字符串，参数指定分隔符，默认为逗号“,”。
split 方法用于将字符串分割为数组，默认分割符为逗号，可通过 howmany 参数指定返回数组的最大长度。

JavaScript 构成与DOM节点

JavaScript主要由三部分组成，理解其构成有助于更好地进行前端开发。

ECMAScript 定义了JavaScript的语法和基本对象。
DOM（文档对象模型）提供了文档的结构化表示，并定义了如何通过脚本访问和操作文档内容。
BOM（浏览器对象模型）提供了与浏览器交互的方法和接口，如窗口控制、导航等。

在DOM树中，节点是构成文档的基本单元，主要分为以下几类。

标签节点代表HTML或XML中的元素标签。
文字节点包含标签内的文本内容。
属性节点存储元素的属性信息。
注释节点包含HTML中的注释内容。

DOM节点获取与访问

获取DOM节点是操作页面的前提，不同浏览器支持的方法有所差异。


document.getElementById(“id”)
document.getElementByTagName(“div”)
document.getElementsByClassName(“classname”) ie 678 不支持
document.querySelector(); // 返回第一个匹配的dom元素
document.querySelectorAll(); // 返回所有dom元素匹配的集合

可以通过判断浏览器是否支持特定方法来编写兼容代码。


if(document.querySelector){
 // do your business
}

获取节点后，可以访问其父节点、兄弟节点和孩子节点，以实现更复杂的DOM操作。

父节点通常只有一个，可通过 parentNode 属性获取。


dom.parentNode

兄弟节点的获取需要考虑浏览器兼容性，特别是IE浏览器的特殊写法。


// nextSibling 和 previousSibling 是IE的写法
var next = (dom.nextElementSibling) || (dom.nextSibling);
var pre = (dom.previousElementSibling) || (dom.previousSibling);

孩子节点的获取同样需要处理兼容性问题，确保在不同浏览器中正常工作。


// firstChild, lastChild 是IE的写法
var first = father.firstElementChild || father.firstChild;
var last = father.lastElementChild || father.lastChild;

childNodes 和 children 属性可用于获取孩子节点，但二者在节点类型和兼容性上存在差异。


// childNodes 是w3c推荐使用， 但谷歌等浏览器把换行也看成一个节点
// 用下面的方式实现，比较麻烦
var demo = document.getElementById("demo");
var nodes = demo.childNodes;
for(var i=0;i<nodes.length;i++) {
 if(nodes[i].nodeType == 1) {
  nodes[i].style.display = "none";
 }
}
// children 在ie678里面包含注释节点， 注意在编码时避开使用注释
var demo = document.getElementById("demo");
var child = demo.children;
child[0].style.backgroundColor = "red";  // 第一个孩子
child[child.length-1].style.backgroundColor = "red";  // 最后一个孩子

DOM节点操作与属性设置

DOM节点操作包括创建、添加、删除和克隆等常见操作，是前端开发中的基本技能。

创建节点通常使用 document.createElement 方法。


var dom = document.createElement(“div”);

添加节点可以通过 appendChild 或 insertBefore 方法实现。


// appendChild 将dom追加到dom1的最后面
dom1.appendChild(dom) ;
// insertBefore 将newDom 插入到 ReferencedDom 的前面, 返回值为新插入的值, dom1 为父节点
dom1.insertBefore(newDom, ReferencedDom)

删除节点使用 removeChild 方法，指定要删除的子节点。


removeChild() eg: domA.removeChild(domB); // 删除domA里面的孩子节点domB

克隆节点使用 cloneNode 方法，接受一个布尔值参数：true表示深复制（复制节点及其内部所有节点），false表示浅复制。


// 深复制
demo.cloneNode(true);
// 浅复制
demo.cloneNode(false);

属性设定是DOM操作中的重要环节，不同浏览器对属性操作的支持程度不同。

非兼容IE6、7的写法如下： - 获取：dom.getAttribute(“属性”); - 设置：dom.setAttribute(“属性”,”值”); - 删除：dom.removeAttribute(“属性”);

兼容写法举例： - 获取：var cn = dom.className - 设置：dom.className = “dcl” - 删除：dom.className = null;

特殊样式属性提供了更灵活的样式控制方式。

cssText 属性用于一次性更改多个样式属性，提高代码效率。


dom.style.cssText = "width:30px;height:10px;"

循环与分支语句应用

常用的循环结构包括for、while和do while，适用于不同场景。

for 循环是最常用的循环结构，适用于已知循环次数的场景。
while 循环在条件为真时重复执行代码块。
do while 循环至少执行一次代码块，然后检查条件。

switch 多分支语句用于根据变量值执行不同的代码块，适用于多条件判断场景。


var str = "abc";
switch(str) {
 case "a"
  // ...
  break;
 case "b"
  // ...
  break;
 case "c"
  // ...
  break;
 case "abc"
  // ...
  break;
 default:
  // ...
}

更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JavaScript 前端核心基础：页面加载、数组操作与 DOM 节点详解