Accessing DOM Elements
The DOM model symbolizes a document through a coherent tree structure known as a node-tree. This structure comprises branches that culminate in nodes, each housing objects. Accessible via the tree, all nodes are subject to manipulation—content can be edited, removed, and new elements can be introduced. This hierarchical arrangement empowers developers to dynamically modify and enhance the document's content.
The Document Object encapsulates the HTML document, delineating the constituent objects or nodes forming the document's structure, along with the interfaces that empower scripts and programs to interact with and modify these document objects. It furnishes developers with a standardized approach to depict all elements within a webpage, ensuring uniform accessibility through a shared repertoire of properties and methods. This unifying framework simplifies the process of retrieving and manipulating the contents of a web page, thereby streamlining web development tasks.
The prevalent technique for selecting an element involves utilizing the document.getElementById method. Within an HTML document, each element can possess an optional ID attribute, which necessitates uniqueness. This method requires an ID string as input and furnishes a reference to the element bearing the specified ID; if no such element exists, it returns null. Historically, the DOM standard introduced two fundamental methods for element retrieval: getElementById() and getElementsByTagName(). In tandem, the HTML5 specification introduces three supplementary methods: getElementsByClassName(), querySelector(), and querySelectorAll(), further enhancing the array of techniques available for accessing elements.
- getElementById() - Finding by ID
- getElementsByClassName()- Finding by Class
- getElementsByTagName() - Finding by Tag
- querySelector() - Finding by Selector (single)
- querySelectorAll() - Finding by Selector (all)
Document Object Model
The getElementsByTagName() method retrieves a collection of child elements belonging to a specific parent element, identified by the specified tag name. This collection is encapsulated as a NodeList object, facilitating convenient traversal and manipulation of the retrieved elements.
The getElementsByClassName() function furnishes an object akin to an array, encompassing all child elements that possess all of the specified class names. This method acts as a convenient means to gather elements based on their assigned classes, streamlining the process of handling elements with specific styling or functionality requirements.
The above program first alert 2, the number of p elements, and then it change the first p element's text to "First Paragraph changed !!".
The querySelector() function retrieves the initial element within the document that aligns with the provided group of selectors. In cases where no matches are detected, the function returns null. This method's primary purpose is to facilitate the targeted selection of elements based on specified criteria, providing enhanced precision when working with complex or specific DOM structures.
The querySelectorAll() function yields a list comprising elements that correspond to the provided group of selectors, arranged in the order they appear within the source. Notably, this collection remains static, impervious to any subsequent alterations made to the document. This characteristic ensures that changes enacted within the document do not influence the elements contained within the collection, thereby preserving the integrity and consistency of selected elements.