Question

在下面的代码中，Lynda Essential Js Training我无法理解为什么在我们已经调用arrray的第0个成员时调用firstChild。

xhr.responseXML.getElementsByTagName（ “标题”）[0] .firstChild.nodeValue;

以下完整代码：

 (function() {

        var link = document.getElementsByTagName("a")[0];
        link.onclick = function() {
    // Request
    var xhr = new XMLHttpRequest();

    // Handle on readystate
    xhr.onreadystatechange = function() {
        if((xhr.readyState ==4) && (xhr.status == 200 || xhr.status == 304)) {
            var body = document.getElementsByTagName("body")[0];
            var heading = xhr.responseXML.getElementsByTagName("heading")[0].firstChild.nodeValue;
            var h2 = document.createElement("h2");
            var h2Text = document.createTextNode(heading);
            h2.appendChild(h2Text);
            body.appendChild(h2);

            body.removeChild(link); 
        }
    };
    // Open the request
    xhr.open("GET","files/ajax.xml",true);
    //send
    xhr.send(null)

        return false;
    };

    }) ();

Answer 1

getElementsByTagName本身会返回HTMLCollection。因此，

xhr.responseXML.getElementsByTagName("heading")[0].firstChild.nodeValue;

说要获取第一个heading元素。然后，获取第一个标题元素的第一个孩子。

Answer 2

这意味着它正在调用第一个孩子 OF 第一个heading元素（虽然我假设你只有一个）。

xhr.responseXML.getElementsByTagName("heading")返回响应中所有标题元素的数组（或更准确的nodeList）

xhr.responseXML.getElementsByTagName("heading")[0]返回上面数组中的第一个元素

最后：

xhr.responseXML.getElementsByTagName("heading")[0].firstChild返回上面第一个标题元素的第一个子元素

想象一下这样的结构：

<heading>      <---- this is the getElementsByTagName("heading")[0]
   <child/>    <---- and this is its first child
   <child/>
</heading>
<heading>
   <child/>
   <child/>
</heading>
<heading>
   <child/>
   <child/>
</heading>

在数组的第0个成员上使用第一个子节点

2 个答案: