Net-informations.com
SiteMap  | About    

Accessing DOM Elements

The DOM model represents a document with a logical tree . The tree structure is called a node-tree. Each branch of the tree ends in a node, and each node contains objects. All nodes can be accessed through the tree. Their contents can be modified or deleted , and new elements can be created.

Document Object

The Document Object represents the HTML document itself. It describes the objects (or nodes) that make up the document structure, and the interfaces that enable document objects to be accessed and manipulated by scripts and programs. It gives developers a way of representing everything on a web page so that the contents of the web page is accessible via a common set of properties and methods.

DOM Methods

The most common way to select an element is the document.getElementById method. Each element in a HTML document can have an optional ID attribute, which must be unique. This method takes a ID string and returns the reference to the element with the ID, or null if there is no such element. The getElementById() and getElementsByTagName() were the two methods from DOM standard and the HTML5 specification adds three new methods for accessing elements, getElementsByClassName(), querySelector(), and querySelectorAll().

  1. getElementById() - Finding by ID
  2. getElementsByClassName()- Finding by Class
  3. getElementsByTagName() - Finding by Tag
  4. querySelector() - Finding by Selector (single)
  5. querySelectorAll() - Finding by Selector (all)

getElementById()

Javascript provides a document.getElementById() method, which is the easiest way to access an element from the DOM tree structure. It will return the element that has the ID attribute with the specified value.

Document Object Model

Source

getElementsByTagName()

The getElementsByTagName() method returns a collection of an elements' child elements with the specified tag name, as a NodeList object.

Paragraph 1

Paragraph 2

Source

getElementsByClassName()

The getElementsByClassName() returns an array-like object of all child elements which have all of the given class names.

Paragraph 1

Paragraph 2

Source

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 !!".

Modern browsers have APIs called querySelector() and querySelectorAll() . They find one or more elements matching a CSS selector. These methods queries a HTML document for DOM elements that match a CSS selector. It is built-in browser support for the selector query features that made javascript libraries so popular.

querySelector() example

querySelector() returns the first element within the document that matches the specified group of selectors, or null if no matches are found.

Paragraph 1

Paragraph 2

Source

querySelectorAll() example

querySelectorAll() returns a list of the elements that match the specified group of selectors in source order. Since it is a static collection, the modification of the document has no effect on the collection.

div content 1

Paragraph 2

Source









net-informations.com (C) 2017    Founded by raps mk
All Rights Reserved. All other trademarks are property of their respective owners.