Is there a way to bypass the initial result when using document.querySelectorAll?

Question

Is there a way to bypass the initial result when using document.querySelectorAll?

this is my own unique html content

<div class="content-body">
<table style="text-align:center;" class="table table-bordered">
<tbody>
<tr>
<th>Text Line</th>
</tr>
<tr>
<td>1111111<br>2222222<br>3333333</td>
</tr>
</tbody>
</table>
</div>

about this issue :

var text = document.querySelectorAll('.content-body');

will display the output in the following form :

Text Line
1111111
2222222
3333333

If you aim to exclude the title line: Text Line

and only retain the resulting lines as follows:

1111111
2222222
3333333

got any solutions?

javascript html css

Answer 1

Answer №1

If you want to target all the <td> elements, you can use the following code snippet:

document.querySelectorAll('.modal-body tr td').forEach(item => console.log(item.innerText.split('\n')))

<div class="modal-body">
  <table style="text-align:center;" class="table table-bordered">
    <tbody>
      <tr>
        <th>Line</th>
      </tr>
      <tr>
        <td>aaaaaaaaa<br>bbbbbbbbbb<br>cccccccccc</td>
      </tr>
      <tr>
        <td>aaaaaaaaa<br>bbbbbbbbbb<br>cccccccccc</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

If you want to target all the <td> elements, you can use the following code snippet:

document.querySelectorAll('.modal-body tr td').forEach(item => console.log(item.innerText.split('\n')))

<div class="modal-body">
  <table style="text-align:center;" class="table table-bordered">
    <tbody>
      <tr>
        <th>Line</th>
      </tr>
      <tr>
        <td>aaaaaaaaa<br>bbbbbbbbbb<br>cccccccccc</td>
      </tr>
      <tr>
        <td>aaaaaaaaa<br>bbbbbbbbbb<br>cccccccccc</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 3

Answer №2

Here is just one of the many strategies you can use to complete this task, while also gaining valuable coding knowledge.

let doc, html, bod, M, I, S, Q; // for use on other loads
addEventListener('load', ()=>{
doc = document; html = doc.documentElement; bod = doc.body;
M = tag=>{ // make element
  return doc.createElement(tag);
}
I = id=>doc.getElementById(id); // get by id
S = (selector, within)=>{ // get first by selector
  let w = within || doc;
  return w.querySelector(selector);
}
Q = (selector, within)=>{ // get all by selector
  let w = within || doc;
  return w.querySelectorAll(selector);
}
// magic under here - tiny Library above
const tdWithText = S('.modal-body>table>tbody>tr>td');
const resArray = tdWithText.innerText.split(/\n/);
console.log(resArray);
// resArray[0] is a line - resArray[1] is b line - resArray[2] is c line
}); // end load

table{
  text-align:center;
}

<div class='modal-body'>
  <table class='table table-bordered'>
    <tbody>
      <tr><th>Line</th></tr>
      <tr><td>aaaaaaaaa<br>bbbbbbbbbb<br>cccccccccc</td></tr>
    </tbody>
  </table>
</div>

Answer 4

Here is just one of the many strategies you can use to complete this task, while also gaining valuable coding knowledge.

let doc, html, bod, M, I, S, Q; // for use on other loads
addEventListener('load', ()=>{
doc = document; html = doc.documentElement; bod = doc.body;
M = tag=>{ // make element
  return doc.createElement(tag);
}
I = id=>doc.getElementById(id); // get by id
S = (selector, within)=>{ // get first by selector
  let w = within || doc;
  return w.querySelector(selector);
}
Q = (selector, within)=>{ // get all by selector
  let w = within || doc;
  return w.querySelectorAll(selector);
}
// magic under here - tiny Library above
const tdWithText = S('.modal-body>table>tbody>tr>td');
const resArray = tdWithText.innerText.split(/\n/);
console.log(resArray);
// resArray[0] is a line - resArray[1] is b line - resArray[2] is c line
}); // end load

table{
  text-align:center;
}

<div class='modal-body'>
  <table class='table table-bordered'>
    <tbody>
      <tr><th>Line</th></tr>
      <tr><td>aaaaaaaaa<br>bbbbbbbbbb<br>cccccccccc</td></tr>
    </tbody>
  </table>
</div>

Is there a way to bypass the initial result when using document.querySelectorAll?

Answer №1

Answer №2

Similar questions

The child component's useEffect is not triggered when rendering the parent component with the <Link> element

What is preventing d3.json from including cookies in the request?

css table cells with overflow

Transaction response for embedded iFrame with Accept.js on Authorize.net

Tips on building a blog using solely index.html, style.css, and script.js files

Is it possible to derive the language code without using the Common Locale Data Repository from a rough Unicode text

Is there a way for me to discover the identity of the victor?

The div structure generated through JavaScript appears distinct from its representation in the live DOM

What is the best way to align an equal number of divs in each row?

What is the process for retrieving tags and attributes from a website using nodejs?

Having trouble getting the Vue.js framework to function properly on a basic HTML page with a CDN implementation

The "results per page" ajax dropdown in Yii stops working after other ajax content is loaded on the page

The initial state in NextJS fails to update when routing to the same page with different parameters

Resolving Problems with Ion-Split-pane in the Latest Versions of Angular and Ionic

Preventing parent requests from being triggered when a child element is clicked in Angular 2

Is there a way to handle the completion event of jQuery's .tmpl() method?

Is your Ajax jQuery live search not functioning properly with JSON data?

The feature in DataTables that allows users to choose how many items to display per page is not functioning correctly

Leverage CSS styling for database values within a PHP framework

Animating CSS when closing a modal box