

## 実現したいこと

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)


CC BY-SA 4.0
2020-04-28T12:32:36.150
66073
2022-08-09T01:40:33.507
2020-05-01T09:21:16.847
32986
39863
question
javascript html dom
n番目のul要素の最後のli要素を取得したい


`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/)


CC BY-SA 4.0
2020-04-28T13:08:35.250
66075
2020-04-29T00:16:15.617
2020-06-17T08:14:45.997
-1
32986
66073
answer


## Selectors API

Selectors APIであれば、下記のセレクタを用いて実装可能です。

  * [:nth-of-type() - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/:nth-of-type)
  * [:last-child - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/:last-child)
  * [Selectors Level 4 （日本語訳）](https://triple-underscore.github.io/selectors4-ja.html)

## コード

[code]

    'use strict';
    console.log(document.querySelector('ul:nth-of-type(1)>:last-child').textContent); // "1-4"
    console.log(document.querySelector('ul:nth-of-type(2)>:last-child').textContent); // "2-4"
    console.log(document.querySelector('ul:nth-of-type(3)>:last-child').textContent); // "3-4"
[/code]

[code]

    <ul>
      <li>1-1</li>
      <li>1-2</li>
      <li>1-3</li>
      <li>1-4</li>
    </ul>
    <ul>
      <li>2-1</li>
      <li>2-2</li>
      <li>2-3</li>
      <li>2-4</li>
    </ul>
    <ul>
      <li>3-1</li>
      <li>3-2</li>
      <li>3-3</li>
      <li>3-4</li>
    </ul>
[/code]


CC BY-SA 4.0
2020-04-29T05:21:50.187
66095
2022-08-09T01:40:33.507
2022-08-09T01:40:33.507
3060
20262
66073
answer