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>
参考
- DOM Standard