Lightning Components Developer’s Guide

Getting Started
Creating Components
Communicating with Events
Creating Apps
App Basics
Styling Apps
Using JavaScript
Accessing the DOM
Using External JavaScript Libraries
Working with Attribute Values in JavaScript
Working with a Component Body in JavaScript
Sharing JavaScript Code in a Component Bundle
Client-Side Rendering to the DOM
Modifying Components Outside the Framework Lifecycle
Validating Fields
Throwing and Handling Errors
Making API Calls
JavaScript Cookbook
Using Apex
Using Object-Oriented Development
Using the AppCache
Controlling Access
Distributing Applications and Components
Debugging
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Accessing the DOM

The Document Object Model (DOM) is the language-independent model for representing and interacting with objects in HTML and XML documents. The framework’s rendering service takes in-memory component state and updates the component in the DOM.

The framework automatically renders your components so you don't have to know anything more about rendering unless you need to customize the default rendering behavior for a component.

There are two very important guidelines for accessing the DOM from a component or app.

  • You should never modify the DOM outside a renderer. However, you can read from the DOM outside a renderer.
  • Use expressions, whenever possible, instead of trying to set a DOM element directly.

Using Renderers

The rendering service is the bridge from the framework to update the DOM. If you modify the DOM from a client-side controller, the changes may be overwritten when the components are rendered, depending on how the component renderers behave. Modify the DOM only in afterRender() and rerender(). If you need to modify the DOM outside of the renderers, use utilities like $A.util.addClass(), $A.util.removeClass(), and $A.util.toggleClass(). Modify the DOM that belongs to the context component only.

Using Expressions

You can often avoid writing a custom renderer by using expressions in the markup instead. See Dynamically Showing or Hiding Markup for more information.