也是元素节点。

Hello

element 元素对象

节点都是单个对象，有时会需要一种数据结构，能够容纳多个节点。DOM提供两种集合对象，用于实现这种节点的集合：NodeList和HTMLCollection。

• HTMLCollection 是表示 HTML 元素的集合。
• NodeList 对象代表一个有顺序的节点列表

以下方法获取的为element 元素对象

• document.getElementById("id属性")
• document.querySelector('css选择器')

示例

// getElementById返回元素
element1 = document.getElementById('user');
console.log(element1) // 返回整个div 元素
Hello
element2 = document.getElementById('demo');
console.log(element2) // 
Hello
// querySelector返回元素
element1 = document.querySelector('#user');
console.log(element1) // 返回整个div 元素
Hello
element2 = document.querySelector('#demo');
console.log(element2) // 
Hello
element3 = document.querySelector('p');
console.log(element3) // 
Hello
element4 = document.querySelector('.text-info');
console.log(element4) // 
Hello
element5 = document.querySelector('p.text-info');
console.log(element5) // 
Hello

HTMLCollection 对象

HTMLCollection只能包含 元素节点(ElementNode)类型的节点, 以下方法返回HTMLCollection对象

• document.getElementsByClassName("className")
• document.getElementsByTagName("tag名称")
• document.forms // 对象选择器查找 HTML 对象

    

        
Hello
        
Hello
    

使用示例

elements = document.getElementsByClassName("text-info");
console.log(elements);  // HTMLCollection
console.log(elements.length); // 获取个数
// 索引取值
console.log(elements[0]); // 下标取值 
Hello
// item 根据下标取值
console.log(elements.item(0));
// namedItem 根据id 或name属性取值
console.log(elements.namedItem('demo'));

HTMLCollection 对象中的属性和方法：

namedItem() 方法返回 HTMLCollection 对象中指定 ID 或 name 的元素。

HTMLCollection.namedItem(name)
或
HTMLCollection[name]

使用示例，以下两种方法都可以

// namedItem 根据id 或name属性取值
console.log(elements.namedItem('demo'));
// 也可以直接中括号里面传id或name属性
console.log(elements['demo']);

NodeList 对象

NodeList 是表示节点的集合。

NodeList 对象中的属性和方法：

以下方法获取的为NodeList对象

• document.getElementsByName("name名称")
• document.querySelectorAll("css选择器")
• element.childNodes // 获取元素的子节点

    

        用户名
        
    
    

        
Hello
        
Hello
    

使用示例

nodes = document.getElementsByName('username');
console.log(nodes)  // NodeList [input#user-id]
// length 属性
console.log(nodes.length)  //1
// 索引取值
console.log(nodes[0]) // 
// item索引取值
console.log(nodes.item(0))  // 

document.querySelectorAll()也一样

nodes = document.querySelectorAll('#user');
console.log(nodes);  // NodeList [div#user]
console.log(nodes.length);  // 1
// 索引取值
console.log(nodes[0]) // 
// item索引取值
console.log(nodes.item(0))  // 

element.childNodes 是获取元素的子节点

element = document.getElementById('user');
// childNodes 所有的子节点
console.log(element.childNodes);
console.log(element.childNodes.length);  // 5

HTMLCollection与NodeList区别

HTMLCollection 是表示 HTML 元素的集合，元素也是节点的一种，也就是元素节点，NodeList 是表示节点的集合
我们可以理解为 HTMLCollection 是 Nodelist 集合的一种。

HTMLCollection 不是一个数组！HTMLCollection 看起来可能是一个数组，但其实不是。
你可以像数组一样，使用索引来获取元素。
HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join()

NodeList节点列表不是一个数组！NodeList节点列表看起来可能是一个数组，但其实不是。
你可以像数组一样，使用索引来获取元素。
节点列表无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。