Home / Questions / 91639
Accepted
Ivan Botero
Asked: 2020-07-31 08:32:50 +0800 CST 2020-07-31 08:32:50 +0800 CST

Get <body> tag elements individually

  • 772

I have the following code:

function obtener(){

  var contador = 1;

  $("body").each(function(){
  
    console.log(contador + " " + $(this).text() + "\n");
    console.log("----------------------------------\n");
  
    contador++;
  
  });

}
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

  <ul class="level-1">
    <li class="item-i">I</li>
    <li class="item-ii">II
      <ul class="level-2">
        <li class="item-a">A</li>
        <li class="item-b">B
          <ul class="level-3">
            <li class="item-1">1</li>
            <li class="item-2">2</li>
            <li class="item-3">3</li>
          </ul>
        </li>
        <li class="item-c">C</li>
      </ul>
    </li>
    <li class="item-iii">III</li>
  </ul>

<input type="submit" onclick="obtener();" value="Obtener">

</body>

</html>

The code first shows an organized list, with certain texts and bullets, in short, the one in this example is only demonstrative.

What I intend to do is get the text of each of the elements contained within the tag individually.

I have tried with .each function , as follows:

$("body").each(function(){

    console.log(contador + " " + $(this).text() + "\n");
    console.log("----------------------------------\n");

});

But, when the message is printed console.log, everything is displayed as a single text, that is, instead of being printed like this:

I
---------
II
---------
A
---------
B
---------

It is printing like this:

I
II

    A
    B

        1
        2
        3
---------------------

I haven't found documentation about it, other than jQuery and the handling of the .each function , but I don't understand why it prints everything as a single text, since it "goes through" each of the elements contained in the selector.

javascript

2 Answers

  1. Best Answer

    It sounds like you want to read all the independent text nodes on a page, without the need for them to be grouped together; for this you can use pure JavaScript and TreeWalker. The object TreeWalkerrepresents the nodes of a subtree of the document and their position.

    So what you could do is create a TreeWalkerand go through all the nodes of the bodyleaving only the text nodes. That is something that can be defined when you create the TreeWalkerwith createTreeWalker:

    treeWalker = document.createTreeWalker(raiz, queMostrar, filtro, expansionEntidadferencia);

    where:

    • raizis the node that will be used as the source to create the TreeWalker (only the subtree will be explored from that element), in your case you want it to be the body.
    • queMostraris an optional parameter to indicate what types of nodes you want to get. It can have different values ​​that will show some values ​​or others, in your case you want only text nodes to be shown so you should use NodeFilter.SHOW_TEXT. You can see the full list at the link above.
    • filtrois an optional parameter to pass a filter to the nodes found by queMostrar.
    • expansionEntidadReferenciais an optional boolean parameter indicating that if one is dropped EntityReferencethen the entire subtree coming out of it will also be dropped at the same time.

    One problem with using TreeWalkerit is that it is not supported by all browsers. It's not available for versions of Internet Explorer prior to 9, and support is basic for Edge... but since you say you want it for a Chrome plugin, you shouldn't have a problem.

    Here is an example with your code:

    function obtener(){

  var raiz = document.querySelector("ul.level-1");
  var queMostrar = NodeFilter.SHOW_TEXT;
  var filtro = { acceptNode: function(node) { 
    if ( !/^\s*$/.test(node.data) ) { 
      return NodeFilter.FILTER_ACCEPT; 
    } } };
  var expansion = false;
  
  var treeWalker = document.createTreeWalker(raiz, queMostrar, filtro, expansion);

  var nodos = [];

  while(treeWalker.nextNode()) 
    nodos.push(treeWalker.currentNode.data.trim());
    
  console.log(nodos);
  return nodos;
}
    <body>
  <ul class="level-1">
    <li class="item-i">I</li>
    <li class="item-ii">II
      <ul class="level-2">
        <li class="item-a">A</li>
        <li class="item-b">B
          <ul class="level-3">
            <li class="item-1">1</li>
            <li class="item-2">2</li>
            <li class="item-3">3</li>
          </ul>
        </li>
        <li class="item-c">C</li>
      </ul>
    </li>
    <li class="item-iii">III</li>
  </ul>
  <input type="submit" onclick="obtener();" value="Obtener">
</body>

    Note: the filter is to prevent "false positives" from being inserted into the array. What it does is that it doesn't accept the node if it's just made up of separators and whitespace. It is not mine, I have taken it from this MDN page. .

    • 5

  2. To iterate through all the elements inside the tag bodyyou need to use the universal selector *like so:

    function obtener() {
  $('body *').each(function(indice, elementoHTML) {
    console.log(indice + " " + $(elementoHTML).text() + "\n");
    console.log("----------------------------------\n");
  });
}
    <html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

  <ul class="level-1">
    <li class="item-i">I</li>
    <li class="item-ii">II
      <ul class="level-2">
        <li class="item-a">A</li>
        <li class="item-b">B
          <ul class="level-3">
            <li class="item-1">1</li>
            <li class="item-2">2</li>
            <li class="item-3">3</li>
          </ul>
        </li>
        <li class="item-c">C</li>
      </ul>
    </li>
    <li class="item-iii">III</li>
  </ul>

  <input type="submit" onclick="obtener();" value="Obtener">

</body>

</html>

    Note that it is not necessary to handle a counter outside the function each, since it includes the index as the first parameter, and the element being treated as the second.

    • 1