Found 57 Articles for DOM

To write javascript advanced code you can run across instances where you need to convert a DOM (Document Object Model) NodeList to a more adaptable data structure like an array. Although nodelist is just like an array in any programming language. However, it does not contain fever characteristics than an array. You can use Javascript to convert a nodelist into an array to work more appropriately. Example 1 This example provides code to convert a nodelist into an array using javascript. The code uses the nodeListToArray function to perform the conversion. Algorithm Step 1 :Create an array ... Read More

Both SAX and DOM are a type of XML parser APIs. Here, API stands for Application Programming Interface and Parser is used to read and extract content from an XML document in desired format. From this line, it is clear that SAX and DOM are used to read XML documents. APIs are a modern way to migrate real time information on the Web. In this article, we will discuss the difference between SAX and DOM Parser in Java. Type of XML Parser Before going further in this article, let’s briefly discuss XML and its type. XML Its full form is ... Read More

Fluent wait is a dynamic wait which makes the driver pause for a condition which is checked at a frequency before throwing an exception. The element is searched in DOM not constantly but at a regular interval of time.For example, if the wait is for 5 seconds, FluentWait monitors the DOM at regular intervals (defined by polling during time). In FluentWait, customized wait methods based on conditions need to be built.Syntax −Wait w = new FluentWait< WebDriver >(driver) .withTimeout (10, SECONDS) .pollingEvery (2, SECONDS) .ignoring (NoSuchElementException.class)Exampleimport org.openqa.selenium.By; import org.openqa.selenium.Keys; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import java.util.concurrent.TimeUnit; import org.openqa.selenium.support.ui.Wait; import ... Read More

findElement() and findElements() method tries to search an element in DOM.The differences between them are listed below −sl.no.findElement()findElements()1It returns the first web element which matches with the locator.It returns all the web elements which match with the locator.2Syntax − WebElement button = webdriver.findElement(By.name(""));Syntax − List buttons = webdriver.findElements(By.name(""));3NoSuchElementException is thrown if there are no matching web elementsEmpty list is returned if there are no matching elements.ExampleUsing findElements ().import org.openqa.selenium.By; import org.openqa.selenium.Keys; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import java.util.concurrent.TimeUnit; public class RowFindElements {    public static void main(String[] args) {       System.setProperty("webdriver.chrome.driver", "C:\Users\ghs6kor\Desktop\Java\chromedriver.exe");       WebDriver driver ... Read More

We can identify the nth sub element using xpath in the following ways −By adding square brackets with index.By using position () method in xpath.Exampleimport org.openqa.selenium.By; import org.openqa.selenium.Keys; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import java.util.concurrent.TimeUnit; public class SubElement {    public static void main(String[] args) {       System.setProperty("webdriver.chrome.driver", "C:\Users\ghs6kor\Desktop\Java\chromedriver.exe");       WebDriver driver = new ChromeDriver();       String url = "https://www.tutorialspoint.com/index.htm";       driver.get(url);       driver.manage().window().maximize();       driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);       // xpath using position() targeting the first element with type text       driver.findElement(By.xpath("//input[@type='text'][position()=1]"))     ... Read More

The text inside a tag inside class="text" inside with class="main" can be obtained with the following code −Example$html = nodeValue)); }OutputThis will produce the following output −string ‘This is text 1’ (length=14) string ‘This is text 2' (length=14)

We can use the Node.contains method to do this check. The Node.contains() method returns a Boolean value indicating whether a node is a descendant of a given node, i.e. the node itself, one of its direct children (childNodes), one of the children's direct children, and so on.ExampleFor example, you are looking for an element with id test, you can use the following −const elem = document.querySelector('#test'); console.log(document.body.contains(elem));This will log true or false based on whether the element is present in the visible DOM.

The HTML DOM Aside Object represent the element of an HTML document.Create aside object−SyntaxFollowing is the syntax −document.createElement(“ASIDE”);Let us see an example of aside object−Example Live Demo    body {       text-align: center;       background-color: #fff;       color: #0197F6;    }    h1 {       color: #23CE6B;    }    .btn {       background-color: #fff;       border: 2px solid #0197F6;       height: 2rem;       width: 40%;       margin: 2rem auto;       display: block;       color: #0197F6; ... Read More

The HTML DOM KeyboardEvent altKey property returns whether an ALT key was pressed or not when a key event was triggered in an HTML document.SyntaxFollowing is the syntax −event.altKeyLet us see an example of HTML KeyboardEvent altKey property−Example Live Demo    body {       color: #000;       height: 100vh;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;       text-align: center;    }    input {       border: 2px solid #fff;       padding: 8px;       background: transparent;       width: 310px;       border-radius: ... Read More

The HTML DOM Variable Object represent the element of an HTML document.Create var object−SyntaxFollowing is the syntax −document.createElement(“VAR”);Let us see an example of var object−Example Live Demo    body {       text-align: center;       background-color: #fff;       color: #0197F6;    }    h1 {       color: #23CE6B;    }    .btn {       background-color: #fff;       border: 2px solid #0197F6;       height: 2rem;       width: 40%;       margin: 2rem auto;       display: block;       color: #0197F6; ... Read More