n番目のul要素の最後のli要素を取得したい


## 実現したいこと

n番目の `ul` 要素の最後の子要素のテキストを取得したいです。

現状では `ul` 要素の最後の子要素のテキストを取得までできています。

* * *

## 該当のソースコード

[code]

    var lastChild = document.querySelector('ul:last-child');
    console.log(lastChild);
    console.log(lastChild.textContent);
    
[/code]

n番目のタグは、このように取得できることまではわかりました。

[code]

    var nthTag = document.getElementsByTagName('ul')[2];
    
[/code]

これを `querySelector` メソッドの `ul` 部分に繋げる方法に辿り着けずにいます。  
`ul = nthTag` を挿入して繋げようとしても、最初のulの子要素が取得されてしまうので、うまく繋がっていないようです。

答えもしくはヒントをいただけないでしょうか。

* * *

## 参考にしたサイト

  * [要素の取得方法まとめ - Qiita](https://qiita.com/amamamaou/items/25e8b4e1b41c8d3211f4)
  * [getElementsByTagName() タグ名から要素を取得 | JavaScript中級編 - ウェブプログラミングポータル](https://wp-p.info/tpl_rep.php?cat=js-intermediate&fl=r3)




`document.getElementsByTagName('ul')[2]` によって得られるのは **`Element`
ノード**です[[1]](https://dom.spec.whatwg.org/#interface-htmlcollection)。

> ### § 4.2.10.2. Interface
> HTMLCollection[[1]](https://dom.spec.whatwg.org/#interface-htmlcollection)
[code]

>     interface HTMLCollection {
>       readonly attribute unsigned long length;
>       getter Element? item(unsigned long index);
>       getter Element? namedItem(DOMString name);
>     };
>  
[/code]

`Element` ノードは **`ParentNode`
ミックスインを実装している**[[2]](https://dom.spec.whatwg.org/#interface-parentnode)ため、当該
`getElementsByTagName` メソッドの返り値に直接 `querySelector` メソッドを用いることが出来ます。

> ### § 4.2.6. Mixin ParentNode[[2]](https://dom.spec.whatwg.org/#interface-
> parentnode)
[code]

>     interface mixin ParentNode {
>       [SameObject] readonly attribute HTMLCollection children;
>       readonly attribute Element? firstElementChild;
>       readonly attribute Element? lastElementChild;
>       readonly attribute unsigned long childElementCount;
>  
>       [CEReactions, Unscopable] void prepend((Node or DOMString)... nodes);
>       [CEReactions, Unscopable] void append((Node or DOMString)... nodes);
>       [CEReactions, Unscopable] void replaceChildren((Node or DOMString)...
> nodes);
>  
>       Element? querySelector(DOMString selectors);
>       [NewObject] NodeList querySelectorAll(DOMString selectors);
>     };
>     Document includes ParentNode;
>     DocumentFragment includes ParentNode;
>     Element includes ParentNode;
>  
[/code]

[code]

    var lastChild = document.getElementsByTagName('ul')[2].querySelector(":last-child").textContent;
    
    console.log(lastChild);
[/code]

[code]

    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <ul>
      <li>6</li>
      <li>7</li>
    </ul>
    <ul>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
[/code]

もしくは、 `parentNode` ミックスインが実装されていることから、単に当該 `Element` ノードの `lastElementChild`
属性を用いることでも同様のことが行えます。

[code]

    var lastChild = document.getElementsByTagName('ul')[2].lastElementChild;
    
    console.log(lastChild);
[/code]

[code]

    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <ul>
      <li>6</li>
      <li>7</li>
    </ul>
    <ul>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
[/code]

* * *

**参考**

  1. [DOM Standard](https://dom.spec.whatwg.org/)

