1

実現したいこと

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

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


該当のソースコード

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

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

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

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

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


参考にしたサイト

2 件の回答 2

1

document.getElementsByTagName('ul')[2] によって得られるのは Element ノードです[1]

§ 4.2.10.2. Interface HTMLCollection[1]

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

Element ノードは ParentNode ミックスインを実装している[2]ため、当該 getElementsByTagName メソッドの返り値に直接 querySelector メソッドを用いることが出来ます。

§ 4.2.6. Mixin ParentNode[2]

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;

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

console.log(lastChild);
<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>

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

var lastChild = document.getElementsByTagName('ul')[2].lastElementChild;

console.log(lastChild);
<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>


参考

  1. DOM Standard
2
  • ありがとうございます。進展しました。 理解が追いつくにはもう少しかかりそうです。 querySelectorのほうは、CodePen上では思い通りに取得できることが確認取れました。 ChromeでfirstChildとlastChildはうまく取得できずにいます。 nthChildなら最初も最後もうまく取得できました。 lastElementChildのほうは、これから実感してみます。
    – voco
    Commented 2020年4月30日 12:27
  • @voco さん> firstChild, lastChild は最初 (または最後) のノードを取得します。一方で firstElementChild, lastElementChild は最初 (または最後) の要素ノードを取得します。よって、今回の場合 firstChild, lastChild を使用しても目的の動作は達成出来ない可能性があります。firstElementChild, lastElementChild を使ってください。
    – supa
    Commented 2020年5月1日 5:32
1

Selectors API

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

コード

'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"
<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>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。