TreeWalker BrowserDOM Tree 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]/dist/tree-walker.min.js"></script>
<script src="https://rawgit.com/burdiuz/js-walker-browserdom-augmentations/master/index.min.js"></script>
<script src="https://rawgit.com/burdiuz/js-walker-browserdom-adapter/master/index.min.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,
  addAugmentations,
  nodeAugmentations,
  listAugmentations,
  setNamePrefix,
} = TreeWalker;

const {
  eventAugmentations,
  elementAugmentations,
} = BrowserDOMAugmentations;

const {
  createHandlers,
} = WalkerPropertyHandlers;

console.log(BrowserDOMAdapter);

// add node augmentations
addAugmentations(nodeAugmentations);

// add list augmentations
addAugmentations(listAugmentations);

// add DOM events augmentations
addAugmentations(eventAugmentations);

// add DOM elements augmentations
addAugmentations(elementAugmentations);

/*
  add a name prefix for node fields to access them easier
  before: node.valueOf().label
  after: node.$label
*/
setNamePrefix('$', createHandlers());

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

// 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?');
// FIXME make search for nodes case insensitive
log(body.descendants('H3').map((header) => header.text()));