I want to get the last li element of the nth ul element

I want to get the text of the last child element of the nth ul element.

Currently, we are able to retrieve the text of the last child element of the ul element.

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

I understand that the nth tag can be retrieved in this way.

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

I can't get to the ul part of the querySelector method.
If you try to insert ul=nthTag, the child element of the first ul will be retrieved, so it doesn't seem to connect well.

Could you give me an answer or a hint?

javascript html dom

2022-09-30 16:51

2 Answers

document.getElementsByTagName('ul')[2] provides the Element node.[1]

4 4.2.10.2.Interface HTMLCollection^[1]

^[1]

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

The Element node implements the ParentNode mix-in, so it returns directly to its getElementsByTagName value.[2]

4 4.2.6.Mixin ParentNode^[2]

^[2]

interface mixin ParentNode{
  SameObject readonly attribute HTMLCollection children;
  readonly attributeElement?firstElementChild;
  readonly attributeElement?lastElementChild;
  readonly attribute unsigned long childElementCount;

  CERreactions, Unscopable void prepend ((Node or DOMSstring)...nodes);
  CERreactions, Unscopable void append (Node or DOMSstring...nodes);
  CERreactions, Unscopable void replaceChildren ((Node or DOMSstring)...nodes);

  Element?querySelector (DOMSstring selectors);
  NewObject NodeList querySelectorAll (DOMSstring 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>

Alternatively, since the parentNode mix-in is implemented, the same can be done simply by using the lastElementChild attribute of that Element node.

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>

Reference

2022-09-30 16:51

Selectors API can be implemented using the following selectors:

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

2022-09-30 16:51