DOMWalker Demo

by actualwave

HTML

<link rel="stylesheet" href="https://unpkg.com/@actualwave/[email protected]/console.css">
<script src="https://unpkg.com/@actualwave/[email protected]/console.js"></script>
<script src="https://unpkg.com/@actualwave/[email protected]/index.min.js"></script>
<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
      <p>Ut enim ad..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
      <p>Ut enim ad..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3> 
      <p>Lorem ipsum dolor..</p>
      <p>Ut enim ad..</p>
    </div>
  </div>
</div>

JavaScript

const { create } = DOMWalker;

/*
	Look into HTML tab for source data
*/
const body = create(document.body);

// lets hide test data to see console
body.children('div').map((item) => {
	item.$style.display = 'none';
});

// ok, now we can proceed with the demo
const { log, info } = DOMConsole.create(document.body);

// root now contains tree walker instance and ready to go
info('Body contains two test DIVs:');
log(body.div[0].$className, 'and', body.div[1].$className);

info('How many H3 we have?');
log(body.descendants('H3').length());

info('What text they have?');
log(body.descendants('h3').map((header) => header.text()));