了解JavaScript DOM核心思想：nodeList与HTMLElement对象

本文介绍了了解JavaScript DOM核心思想：nodeList与HTMLElement对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

在HTMLElement上，我无法使用索引

看到这个小提琴为例：

所以问题是，为什么nodeList有一个可索引列表，如element [0]，元素，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：

解决方案

所以我做了一些研究，现在我完全了解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对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

nodelist