To manipulate an element, you first need an object that represents it. You can get this object using a query.
Find one or more elements using the top-level functions querySelector() and querySelectorAll(). You can query by ID, class, tag, name, or any combination of these. The CSS Selector Specification guide defines the formats of the selectors such as using a # prefix to specify IDs and a period (.) for classes.
The querySelector() function returns the first element that matches the selector, while querySelectorAll()returns a collection of elements that match the selector.
// Find an element by id (an-id).
Element idElement = querySelector(‘#an-id’)!;
// Find an element by class (a-class).
Element classElement = querySelector(‘.a-class’)!;
// Find all elements by tag (<div>).
List<Element> divElements = querySelectorAll(‘div’);
// Find all text inputs.
List<Element> textInputElements = querySelectorAll(
‘input[type=”text”]’,
);
// Find all elements with the CSS class ‘class’
// inside of a <p> that is inside an element with
// the ID ‘id’.
List<Element> specialParagraphElements = querySelectorAll(‘#id p.class’);