Skip to main content
Home
  • Tutorials
    • Quality Assurance
    • Software Development
    • Machine Learning
    • Data Science
  • About Us
  • Contact
programsbuzz facebook programsbuzz twitter programsbuzz linkedin
  • Log in

Main navigation

  • Tutorials
    • Quality Assurance
    • Software Development
    • Machine Learning
    • Data Science
  • About Us
  • Contact

Understand DOM Terminology

Profile picture for user devraj
Written by devraj on 05/04/2021 - 11:54

A Web page is a document. This document can be either displayed in the browser window or as the HTML source. 

What is DOM?

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. The DOM represents the document as nodes and objects. 

When a web page is loaded, the browser creates a Document Object Model of the page. The HTML DOM model is constructed as a tree of Objects:

HTML Tree

According to the W3C HTML DOM standard, everything in an HTML document is a node: The entire document, Every HTML element, The text inside HTML, Every HTML attribute and even the comments.
 

Element, Tag and Attributes

HTML elements: Elements enclose the contents in between the tags. They consist of some kind of structure or expression. It generally consists of a start tag, content and an end tag.

<p>This is the content</p>

HTML Tags: Tags are the starting and ending parts of an HTML element. They begin with < symbol and end with > symbol. Whatever written inside < and > are called tags. In above example <p> is starting tag and </p> is ending tag. Not all elements have starting and ending tags like <br/> and <hr/>.

HTML Attributes: HTML attributes provide additional information about the HTML elements. It always placed in the opening tag of an element. It generally provides additional styling (attribute) to the element. Different elements has some common and unique attributes. Like ID and Class are most commonly used tags. In below example img has src, width and height attribute.

<img src="img_girl.jpg" width="500" height="600">

Node Relationships

The nodes in the node tree have a hierarchical relationship to each other. The terms parent, child, and sibling are used to describe the relationships.

  • Root Node: In a node tree, the top node is called the root (or root node). Example HTML tag.
  • Parent Node: Every node has exactly one parent, except the root (which has no parent)
  • Child Node: A node can have a number of children
  • Siblings: are nodes with the same parent

parent node

 siblings

Ancestor and Descendant

An ancestor refers to any element that is connected but further up the document tree - no matter how many levels higher. A descendant refers to any element that is connected but lower down the document tree - no matter how many levels lower.

ancestor

descendant

A parent is the immediately direct ancestor.

Tags
Selenium
  • Log in or register to post comments

Choose Your Technology

  1. Agile
  2. Apache Groovy
  3. Apache Hadoop
  4. Apache HBase
  5. Apache Spark
  6. Appium
  7. AutoIt
  8. AWS
  9. Behat
  10. Cucumber Java
  11. Cypress
  12. DBMS
  13. Drupal
  14. GitHub
  15. GitLab
  16. GoLang
  17. Gradle
  18. HTML
  19. ISTQB Foundation
  20. Java
  21. JavaScript
  22. JMeter
  23. JUnit
  24. Karate
  25. Kotlin
  26. LoadRunner
  27. matplotlib
  28. MongoDB
  29. MS SQL Server
  30. MySQL
  31. Nightwatch JS
  32. PactumJS
  33. PHP
  34. Playwright
  35. Playwright Java
  36. Playwright Python
  37. Postman
  38. Project Management
  39. Protractor
  40. PyDev
  41. Python
  42. Python NumPy
  43. Python Pandas
  44. Python Seaborn
  45. R Language
  46. REST Assured
  47. Ruby
  48. Selenide
© Copyright By iVagus Services Pvt. Ltd. 2023. All Rights Reserved.

Footer

  • Cookie Policy
  • Privacy Policy
  • Terms of Use