了解JavaScript DOM核心思想：nodeList与HTMLElement对象 [英] Understanding javascript DOM core ideas: nodeList vs HTMLElement objects

问题描述

我一直在努力去理解DOM。目前我正在走过DOM树，我似乎发现了一些不一致。

• 在一个nodeList上，我可以使用索引来迭代列表


• 在HTMLElement上，我无法使用索引

看到这个小提琴为例： http://jsfiddle.net/AmhVk/4/

所以问题是，为什么nodeList有一个可索引列表，如element [0]，元素 1 ，HTMLElement还没有？

有人可以彻底地向我解释一下吗？ Thx ...

 < ul id =jow> 
< li>< a href => Item< / a>< / li> 
< li>< a href => Item< / a>< / li> 
< li class =active>< a href => Item< / a>< / li> 
< li class =active>< a href => Item< / a>< / li> 
< li>< a href => Item< / a>< / li> 
< li>< a href => Item< / a>< / li> 
< / ul> 
 
< div id =ieps>< / div> 
  

  function simple（） 
 
 var li = document.querySelectorAll（。active）; 
 var ul = li [0] .parentNode; 
 var getULchild = ul.children [0]; 
 
 var ieps = document.getElementById（ieps）; 
 
 ieps.innerHTML + =ul will return =+ ul +< br>; 
 ieps.innerHTML + =li will return =+ li +< br>< br>; 
 
 ieps.innerHTML + =ul [0]将返回：+ ul [0] +< br>; 
 ieps.innerHTML + =li [0]将返回：+ li [0] +< br>< br>; 
 
} 
  

另外，在小提琴中，如果我删除1李先生的课程活跃。这仍然会返回一个nodeList而不是一个HTMLElement： jsfiddle.net/AmhVk/5

解决方案

所以我做了一些研究，现在我完全了解DOM遍历文档树时返回的对象。因为我没有在网上找到任何真正的答案，我将给出自己的问题的答案，希望这也有助于别人。

---

检索元素节点

您可以通过这些选项之一检索元素节点。这将返回一个 HTMLElement 或 nodeList 。

检索元素节点的方法：

• HTMLElement document.getElementById（） li>
  
• nodeList document.getElementsByTagName（）


• nodeList document.getElementsByName（）


• nodeList document.getElementsByClassName（）


• HTMLElement document.querySelector（）


• nodeList document.querySelectorAll（） li>
  

nodeList与HTMLElement

• nodeList 可以包含 1或更多元素


• HTMLElement 可以包含只有1 元素

它们在你和他们一起工作的方式在nodeList中，您必须使用带有索引值的括号[]才能获取列表nodeList [2]中的项目。而对于HTMLElement，您已经与项目本身一起工作。

示例

  var linkClass = document.getElementsByClassName（。active）; 
 var linkID = document.getElementById（id）; 
 
 var parentFromLinkClass = linkClass [0] .parentElement; 
 var parentFromLink = linkID.parentElement; 
 
 document.write（linkClass [0]）; //返回链接的url 
 document.write（linkID）; //返回链接的URL 
 
 document.write（parentFromLinkClass）; // HTMLLIElement（not a nodeList）
 document.write（parentFromLink）; // HTMLLIElement（not a nodeList）
  

• linkClass 使用 nodeList选择器函数（getElementsByClassName）


• linkID 使用单元素选择器函数（getElementByID）

DOM语义

DOM语义具有非常微妙的方式，告诉您将返回什么类型的对象。请记住，返回的对象类型取决于您可以最大选择的元素数量。

• getElementsByClassName - 元素（元素）的复数形式） - 返回nodeList


• getElementByID - 元素的单一形式或名词 - 返回HTMLElement


• querySelectorAll - 选择'all' - 返回nodeList


• querySelector - 单个' - 返回HTMLElement


• linkID.parentElement - 元素的单一形式或名词 - 返回HTMLElement



我将在需要时更新此答案...

I have been working towards understanding the DOM very thoroughly. At the moment i'm making my way trough traversing the DOM tree and i seem to be finding some inconsistencies.

• On a nodeList i can use an index to iterate trough the list
• On a HTMLElement i can't use an index

See this fiddle for an example: http://jsfiddle.net/AmhVk/4/

So the question is, why is it that the nodeList has an indexable list like element[0], element1 and the HTMLElement has not?

Could someone explain this to me very thoroughly? Thx...

<ul id="jow">
    <li><a href="">Item</a></li>    
    <li><a href="">Item</a></li>
    <li class="active"><a href="">Item</a></li> 
    <li class="active"><a href="">Item</a></li> 
    <li><a href="">Item</a></li>
    <li><a href="">Item</a></li>
</ul>

<div id="ieps"></div>

function simple(){

    var li = document.querySelectorAll(".active");
    var ul = li[0].parentNode;
    var getULchild = ul.children[0];

    var ieps = document.getElementById("ieps");

    ieps.innerHTML += "ul will return = " + ul + "<br>";
    ieps.innerHTML += "li will return = " + li + "<br><br>";        

    ieps.innerHTML += "ul[0] will return: " + ul[0] + "<br>";
    ieps.innerHTML += "li[0] will return: " + li[0] + "<br><br>";

}

Also, in the fiddle, if i remove 1 of the li's containg the class "active". This will still return a nodeList and not a single HTMLElement: jsfiddle.net/AmhVk/5

解决方案

So i did some research and i now have a full understanding of what objects the DOM returns when traversing the document tree. Since i didn't find any real answers on the net i'm going to give the answer to my own question, hope this helps someone else too.

---

Retrieving element nodes

You can retrieve element nodes via 1 of these options. This will either return a HTMLElement or a nodeList.

Methods to retrieve element nodes:

• HTMLElement document.getElementById()
• nodeList document.getElementsByTagName()
• nodeList document.getElementsByName()
• nodeList document.getElementsByClassName()
• HTMLElement document.querySelector()
• nodeList document.querySelectorAll()

nodeList vs HTMLElement

• nodeList can contain 1 or more elements
• HTMLElement can contain only 1 element

They are different in the way you work with them. In the nodeList you have to use brackets [] with an index value to get to items in the list nodeList[2]. Whereas with the HTMLElement you allready work with the item itself.

Example

var linkClass = document.getElementsByClassName(".active");
var linkID = document.getElementById("id");

var parentFromLinkClass = linkClass[0].parentElement;
var parentFromLink = linkID.parentElement;

document.write(linkClass[0]); //returns the url of the link
document.write(linkID); //returns the url of the link

document.write(parentFromLinkClass); //HTMLLIElement (not a nodeList)
document.write(parentFromLink); //HTMLLIElement (not a nodeList)

• linkClass selects elements using a nodeList selector function (getElementsByClassName)
• linkID selects an element using an single element selector function (getElementByID)

DOM semantics

The DOM semantics have a very subtle way of telling you what type of object it will return. Remember that the type of object returned depends on the number of elements you can 'maximum' select.

• getElementsByClassName - plural form of Element (Elements) - returns nodeList
• getElementByID - single form or noun of Element - returns HTMLElement
• querySelectorAll - selects 'all' - returns nodeList
• querySelector - selects 'single' - returns HTMLElement
• linkID.parentElement - single form or noun of Element - returns HTMLElement

I will update this answer when needed...

这篇关于了解JavaScript DOM核心思想：nodeList与HTMLElement对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！