Navigating through the structure of DOM by using Selectors API

Оne of the most common things you'll want to do is manipulate the document structure in some way. This is usually done by using the Document Object Model (DOM), a set of APIs for controlling HTML and styling information that makes heavy use of the Document object. DOM introduces objects that represent HTML elements and their properties. For example:

document.DocumentElement is <html>
document.Body is the body of the page

The DOM Selectors API supports methods that can be used to locate HTML elements in the DOM tree by either: ID, name, class or tag type. For example, we can use:

GetElementById or QuerySelector to select single element:


        var elementById = _document.GetElementById("Listfriends");
        var elementBySelector = _document.QuerySelector("#Listfriends");
        Console.WriteLine($"Listfriends is {elementById.TagName}");
        Console.WriteLine($"Listfriends is {elementBySelector.TagName}");

GetElementsBy... or querySelectorAll to select a collection of elements we can us:


        var inputs = _document.GetElementsByTagName("input");
        Console.WriteLine($"We have {inputs.Length} inputs");
        //var radiosGroup = _document.GetElementsByName("rr");
        //Console.WriteLine($"We have {radiosGroup.Length} radio");
        var unorderedList = _document.QuerySelectorAll("ul");
        Console.WriteLine($"We have {unorderedList.Length} ULs");

predefined collections of elements like Links , Forms etc.


        var links = _document.Links;
        Console.WriteLine($"We have a {links.Length} links.");
        var forms = _document.Forms;            
        Console.WriteLine($"We have a {forms.Length} forms.");

DOM API contains methods for selecting elements based on some characteristic

By Id


    var elementById = _document.GetElementById("Listfriends");

By Class


    var elementByClassName = _document.GetElementsByClassName("intro");

By Tag Name


    var elementsByTagName = _document.GetElementsByTagName("h4");

By Name


    var elementsByName = document.getElementsByName("genders");

Please, note that GetElementsByName is only announced and will be implemented in version 17.11

The querySelector() and querySelectorAll() methods let you enter a CSS selector as a parameter and return the selected elements as DOM elements:

querySelector returns the first element that matches the selector
querySelectorAll querySelectorAll returns a collection of all elements that match the selector

Both methods take as a string parameter. This parameter often named as CSS selectors. A number of CSS selector categories exist:

Selector	Description	Example
Element	Select by matching elements	input
Class	Select by matching 'class' attributes	.newsletter
ID	Select by matching 'id' attributes	#listfriends
Child	Select by finding direct children	ul>li
Descendent	Select by finding all decedents	ul li
Sibling	Selects nearest next sibling	h1+p
Attribute	Selects based on an attribute and or its value	input[type='button']
Pseudo	Selects based on a CSS selector:psuedo class	ul:first-child
Grouping	Selects based on a group of selectors	h1, p, ul
Combining	Select based on a combined 'complex' selector	ul#listfriend>li:last-child

A number of CSS selector categories exist:

The following examples make use of this sample HTML5 document:

In first two examples we trying to set class attribute of element with id='listfriends' to 'newsletter' value and do the same with all p-elements.

Using GetElementById Using QuerySelector


var element1 = document.GetElementById("Listfriends");            
element1.SetAttribute("class", "newsletter");


var element1 = document.QuerySelector("#Listfriends");
element2.SetAttribute("class", "newsletter");

Using GetElementById Using QuerySelector


    var elements2 = document.GetElementsByTagName("p");
    foreach (var element in elements2)
    {
        element.SetAttribute("class", "newsletter");
    }


    var elements2 = document.QuerySelectorAll("p");
    foreach (var element in elements2)
    {
        element.SetAttribute("class", "newsletter");
    }

The following code fragment shows various Selector API queries.


        // Select by matching 'class' attributes.intro
        var element3 = _document.QuerySelector(".intro");
        Console.WriteLine(element3.TagName); // DIV

        //Select by matching 'id' attributes Lastname
        var element4 = _document.QuerySelector("#Lastname");
        Console.WriteLine(element4.TagName); //SPAN

        //Select by finding direct children 
        var collection5 = _document.QuerySelectorAll("ul>li");
        Console.WriteLine(collection5.Length); //4

        //Descendent Select by finding all decedents div p
        var collection6 = _document.QuerySelectorAll("div p");
        Console.WriteLine(collection6.Length); //4

        //Sibling Selects nearest next sibling h1+p
        var collection7 = _document.QuerySelectorAll("ul+h3");
        Console.WriteLine(collection7.Length); //1

        //Attribute Selects based on an attribute and or its value  input[type = 'button']
        var collection8 = _document.QuerySelectorAll("input[type = 'checkbox']");
        foreach (var element in collection8)
        {
            Console.WriteLine(element.Id); //cc1 cc2 cc3
        }
        Console.WriteLine(collection8.Length); //3

        //Selects based on a CSS selector: psuedo class ul : first-child
        var collection9 = _document.QuerySelector("p:first-child");
        Console.WriteLine(collection9.TextContent); // My name is Donald Duck

Here is full example code: