DOM Enlightenment Book

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<ul id="menu-main-menu-primary" class="nav-primary-menu"><li id="menu-item-26232" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-26232 publish"><a href="https://www.openmarket.com/solutions/">Solutions</a><i class="icon icon-chevron-down-lg"></i><ul class="sub-menu"><li id="menu-item-26238" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26238 publish"><a href="https://www.openmarket.com/solutions/customer-onboarding/">Onboarding</a><i class="icon icon-chevron-down-lg"></i></li><li id="menu-item-26233" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26233 publish"><a href="https://www.openmarket.com/solutions/authentication/">Authentication</a><i class="icon icon-chevron-down-lg"></i></li><li id="menu-item-26237" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26237 publish"><a href="https://www.openmarket.com/solutions/notification-alerts/">Notification and alerts</a><i class="icon icon-chevron-down-lg"></i></li><li id="menu-item-26236" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26236 publish"><a href="https://www.openmarket.com/solutions/marketing/">Marketing</a><i class="icon icon-chevron-down-lg"></i></li><li id="menu-item-26234" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26234 publish"><a href="https://www.openmarket.com/solutions/billing-management/">Billing management</a><i class="icon icon-chevron-down-lg"></i></li><li id="menu-item-26235" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26235 publish"><a href="https://www.openmarket.com/solutions/complaints-feedback/">Complaints and feedback</a><i class="icon icon-chevron-down-lg"></i></li><li id="menu-item-30210" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30210 publish"><a...

JavaScript

console.log(document.q('A').innerHTML); //logs '<i>Hi</i>'

console.log(document.getElementById('A').outerHTML); //logs <div id="A">Hi</div>

//notice that all text is returned even if its in child element nodes (i.e. <strong> !</strong>) 
console.log(document.getElementById('B').textContent); //logs 'Dude !'

console.log(document.getElementById('B').innerText); //logs 'Dude !'

console.log(document.getElementById('B').outerText); //logs 'Dude !'