JavaScript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异

在JavaScript中，有一些常用的方法和属性可以帮助我们更好的开发和操作网页，其中包括了NodeList 和 HTMLCollection两个常见的对象类型。然而，它们在不同的浏览器中可能会存在一些差异，需要我们谨慎使用。本篇攻略将详细讲解这些内容。

JavaScript常用方法、属性集合

JavaScript中常用的方法和属性集合主要包括：字符串方法、数组方法、对象方法、事件相关方法、DOM操作相关方法等。

字符串方法

常用的字符串方法包括：charAt()、concat()、indexOf()、replace()、slice()、split()、substring()、toLowerCase()、toUpperCase()等。这些方法可以实现字符串的截取、替换、大小写转换等操作。

示例一：使用substring()方法截取字符串

let str = "hello world";
let subStr = str.substring(3, 7);
console.log(subStr); // lo w

数组方法

常用的数组方法包括：push()、pop()、shift()、unshift()、join()、slice()、splice()、sort()、reverse()等。这些方法可以实现数组的添加、删除、截取、排序、反转等操作。

示例二：使用sort()方法对数组进行排序

let arr = [2, 5, 1, 8, 4];
arr.sort();
console.log(arr); // [1, 2, 4, 5, 8]

对象方法

常用的对象方法包括：hasOwnProperty()、toString()、valueOf()等。这些方法可以实现对象的属性判断、转换为字符串和值转换等操作。

事件相关方法

常用的事件相关方法包括：addEventListener()、removeEventListener()等。这些方法可以实现DOM元素的事件绑定和解绑操作。

DOM操作相关方法

常用的DOM操作相关方法包括：getElementById()、getElementsByClassName()、getElementsByTagName()、querySelector()、querySelectorAll()等。这些方法可以实现DOM元素的查找和获取操作。

NodeList 和 HTMLCollection 的浏览器差异

在DOM操作中，我们经常会用到NodeList和HTMLCollection两个对象类型，它们代表了一组DOM元素。但是在不同的浏览器中，它们有一些差异。

NodeList

NodeList代表了一组DOM元素，它是一个类数组对象，可以使用下标操作符[index]访问其中的元素。在大多数浏览器中，NodeList的元素是动态的，也就是说，如果DOM树中的元素发生了改变，NodeList中的元素也会随之改变。但是在某些浏览器中，NodeList是静态的，也就是说，它们只会在获取时进行一次快照，之后即使DOM树发生了改变，NodeList中的元素也不会随之改变。

示例三：获取页面中所有h1元素并输出它们的innerHTML

let h1List = document.querySelectorAll("h1");
for (let i = 0; i < h1List.length; i++) {
  console.log(h1List[i].innerHTML);
}

HTMLCollection

HTMLCollection也代表了一组DOM元素，它也是一个类数组对象，可以使用下标操作符[index]访问其中的元素。但是与NodeList不同的是，HTMLCollection中的元素总是动态的，也就是说，如果DOM树中的元素发生了改变，HTMLCollection中的元素也会随之改变。

示例四：获取页面中所有input元素并输出它们的value

let inputList = document.getElementsByTagName("input");
for (let i = 0; i < inputList.length; i++) {
  console.log(inputList[i].value);
}

综上所述，以上是JavaScript常用方法、属性集合及NodeList和HTMLCollection的浏览器差异的详细讲解。我们在开发中使用时需要注意它们的特性，以免造成不必要的麻烦。