List of elements from an HTML document Tree structure - Yash-777/SeleniumDriverAutomation GitHub Wiki

List of DOM Elements:

The DOM is a programming interface for HTML and XML documents, which represents a document as a tree structure. The Document interface describes the common properties and methods for any kind of document. Depending on the document's type (e.g. HTML, XML, SVG, …)

HTML is the language that describes the structure and the semantic content of a web document. Content within a web page is tagged with HTML elements.

DOM Tree HTML Tree Structure

The HTML document gets [rendered](rendered http://taligarsiel.com/Projects/howbrowserswork1.htm) from browser engine as a Web-Page to represent visually on the browser's window, when the load event is fired.

console.log('Document Type : ', window.document.doctype );
 « Document Type :  <!DOCTYPE html>

console.log('Document loading state : ', window.document.readyState );
 « Document loading state :  complete

DOM Nodes: The idea of DOM is that every node is an object.

var nodes = document.querySelectorAll( '*' ); // for all elements in a page.
console.log('Object Type : ', typeof(nodes) );

Searching elements in DOM:

document.all is a proprietary Microsoft extension to the W3C standard. Which returns collection of HTML elements:

function typeOfVar (obj) {
      return {}.toString.call(obj).split(' ')[1].slice(0, -1).toLowerCase();
}
console.log('Return type: ', typeOfVar (document.all)); // Return type:  htmlallcollection

document.getElementById( id ):

The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Which return the first occurred element as an object (HTMLElement) from the document tree.

var elem = document.getElementById("js-repo-pjax-container"); // htmldivelement
if(elem != null) elem.style.color = 'green';

function uniqueDOMID(){
	var elms = document.body.querySelectorAll('*[id]'), ids = new Array();
	for (var i = 0, len = elms.length; i < len; i++) {
		var string = Array.prototype.slice.call(ids).join("~");
		if (string.indexOf("~"+elms[i].id+"~") == -1) {
			ids.push(elms[i].id);
		} else {
			console.log('Multiple IDs #' + elms[i].id);
		}
	}
}

document/node.getElementsByTagName( element-Name ): If you specify any element-Name then it will return all similar tags from the document tree as an array-like object of all child elements (HTMLCollection). You can use the special string "*" represents get all elements,

The HTMLCollection interface represents a generic collection (array-like object similar to arguments) of elements (in document order) and offers methods and properties for selecting from the list.

Note: getElementsByTagName can be called on a document, but also on a DOM element.

var similarTags = document.getElementsByTagName('body'); // For all Tags use '*'
console.log('First Tag : ', similarTags[0]);

var htmlelements_element = similarTags[0].getElementsByTagName('div')[0];
console.log('Dom Elements Element : ', htmlelements_element);

An HTMLCollection in the HTML DOM is live; it is automatically updated when the underlying document is changed.

Ex: Adding new element to live DOM

addElement( similarTags );
function addElement( arguments ){
    var elemDiv = document.createElement('div');
    elemDiv.style.cssText = 'width:100%;height:10%;background:rgb(192,192,192);';
    elemDiv.innerHTML = 'Added element with some data'; 
    arguments[0].insertBefore(elemDiv, window.document.body.firstChild);
    // arguments[0].appendChild(elemDiv); // appends last of that element
}

document.getElementsByName(String name): Returns a nodelist collection with a given name from the document.

var nameElem = document.getElementsByName('twitter:card');
console.log('Node List collection : ', nameElem );
console.log('Object Type : ', typeOfVar(nameElem) ); // Elements :  nodelist
console.log('Object Type : ', typeof(nameElem) ); // Elements :  object

document/node.getElementsByClassName()

Returns list of elements as a HTMLCollection for the given class names, class names are separated by whitespace

Given the following XHTML fragment:
		<div id="example">
		  <p id="p0" class="aaa"> aaa </p>
		  <p id="p1" class="aaa bbb"> aaa bbb </p>
		  <p id="p2" class="aaa ccc"> aaa ccc </p>
		  <p id="p3" class="bbb ccc"> bbb ccc </p>
		</div>
A call to document.getElementById("example").getElementsByClassName("aaa") would return a HTMLCollection with the three paragraphs p0, p1 and p2 in it.

document/element.querySelector(String selector)

Returns the first Element node(HTMLElement) within the document, in document order, that matches the specified selectors.

var bodyElem = document.querySelector( 'body' );
console.log('Return type: ', typeOfVar (bodyElem)); // Return type:  htmlbodyelement

var img = bodyElem.querySelector('div.markdown-body p img');
alert(img.src);

document/element.querySelectorAll(String selector)

Returns a list of all the Element nodes(NodeList objects are collections of nodes) within the document that match the specified selectors.

var elem = document.querySelectorAll( 'body' );
console.log('Return type: ', typeOfVar (elem)); // Return type:  nodelist

For an element and its nested elements.
 var bodyElements = document.querySelectorAll( 'body *' );

For an element and its immediate child nodes
 var bodyElement_ChildTags = document.querySelectorAll( 'body > * ' );

console.log('Slice Recusive call ', Array.prototype.slice.call(bodyElement_ChildTags) );
console.log('Array.from() lets you create Arrays from :', Array.from(bodyElement_ChildTags));

To get list of array form DOM Tree:

var domTree = ['body > *'];  
var allelems = document.querySelectorAll( domTree );
console.log('The DOM(Document Object Model) represents a document as a tree.- Element and its children');
var Array_like_to_array = [];
for(i = 0, j = 0; i < allelems.length; i++) {
	//console.log(allelems[i].tagName , ' : ', allelems[i].children.length);
	var nodeinfo =  allelems[i].tagName; 
	var css = Array.prototype.slice.call(allelems[i].className).join("");
	css = css.replace(/\s/g, '.');
	
	var id = Array.prototype.slice.call(allelems[i].id).join("");
	//console.log('ID: ',id);
	if(typeof(id) === 'string' && id.length != 0 ) nodeinfo = nodeinfo+'#'+id;
	if(typeof(css) === 'string' && css.length != 0 ) nodeinfo = nodeinfo+'.'+css;
    
	Array_like_to_array.push(nodeinfo);
}
console.log('Only Array of Element Names : ', Array_like_to_array);

List of elements from an HTML document Tree structure - Yash-777/SeleniumDriverAutomation GitHub Wiki

List of DOM Elements:

Searching elements in DOM:

To get list of array form DOM Tree:

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️