Question

JavaScript通过getelementsByName和getElementsClassName获取的类数组类型不一样[Chrome 72.0.3626.121]

注释是我在Chrome中获得的信息，但我在浏览某些论坛或文章时得到的答案却不相同。某些文章说通过getElement_获取到的类数组在旧的浏览器上一般是Nodelist，而在新浏览器上得到的是HTMLCollection，很显然，和我实践得到的有差错。
主要疑问：
1.Nodelist和HTMLCollection的区别？
2.insertBefore() 方法为什么对Nodelist起作用，而对HTMLCollection不起作用？
3.HTMLCollection有没有类似insertBefore() 方法？





Answer 1

<input type="text" name="username" class="username1" id="username2" />

// id要唯一，要是有多个相同的id，会取第一个
document.getElementById("username2") 
// 通过class
document.getElementsByClassName("username1")
// 通过name
document.getElementsByName("username")

insertBefore() 方法在您指定的已有子节点之前插入新的子节点。

希望能帮到你

追问

你只是换了皮，得到的答案和我一模一样，图片有说明。另外对于insertBefore() 方法我也查过了，也实践了。
我的主要疑问是：
1.Nodelist和HTMLCollection的区别？
2.insertBefore() 方法为什么对Nodelist起作用，而对HTMLCollection不起作用？3.HTMLCollection有没有类似insertBefore() 方法？

追答

看右边的链接吧，描述的比较详细：网页链接

Answer 2

1. Nodelist 和 HTMLCollection 都是存放 DOM 节点的集合。但是，Nodelist  可以包含任何类型（文本、元素、注释等等）的节点，HTMLCollection 只能包含元素节点。

2. insertBefore 是 Node 对象上的方法。所以, Nodelist 和 HTMLCollection 不能直接调用 insertBefore，只能通过它们当中的元素调用 insertBefore。

var new_node_1 = document.createElement('div');
new_node_1.innerHTML = "foo";
var new_node_2 = document.createElement('div')；
new_node_2.innerHTML = "bar";

document.getElementsByName("pic")[0].parentNode.insertBefore(new_node_1, document.getElementsByName("pic")[1]);
document.getElementsByClassName("pic")[0].parentNode.insertBefore(new_node_2, document.getElementsByClassName("pic")[3]);