Skip to main content
Commonmark migration
ソース リンク

§ 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);
};

§ 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;


  [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;

§ 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);
};

§ 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;

§ 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);
};

§ 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;
追記
ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41

document.getElementsByTagName('ul')[2] によって得られるのは Element ノードです[1][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 ミックスインを実装している[1][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>
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>

document.getElementsByTagName('ul')[2] によって得られるのは Element ノードです[1]Element ノードは ParentNode ミックスインを実装している[1]ため、当該 getElementsByTagName メソッドの返り値に直接 querySelector メソッドを用いることが出来ます。

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>

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>
本文に 167 文字追加
ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41

document.getElementsByTagName('ul')[2] によって得られるのは Element ノードです[1]Element ノードは ParentNode ミックスインを実装している[1]ため、当該 getElementsByTagName メソッドの返り値に直接 querySelector メソッドを用いることが出来ます。

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>


参考

  1. DOM Standard

document.getElementsByTagName('ul')[2] によって得られるのは Element ノードです。Element ノードは ParentNode ミックスインを実装しているため、当該 getElementsByTagName メソッドの返り値に直接 querySelector メソッドを用いることが出来ます。

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>

document.getElementsByTagName('ul')[2] によって得られるのは Element ノードです[1]Element ノードは ParentNode ミックスインを実装している[1]ため、当該 getElementsByTagName メソッドの返り値に直接 querySelector メソッドを用いることが出来ます。

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>


参考

  1. DOM Standard
ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41
読み込んでいます