Computer Science
Javascript Selecting Elements
JavaScript Selecting Elements refers to the process of identifying and manipulating specific elements within a web page using JavaScript. This is commonly done using methods such as getElementById, getElementsByClassName, and querySelector. By selecting elements, developers can dynamically update content, apply styles, and respond to user interactions, enhancing the functionality and interactivity of web applications.
Written by Perlego with AI-assistance
Related key terms
3 Key excerpts on "Javascript Selecting Elements"
eBook - ePub- Adam Boduch, Jonathan Chaffer, Karl Swedberg(Authors)
- 2017(Publication Date)
- Packt Publishing(Publisher)
Selecting Elements
The jQuery library harnesses the power of Cascading Style Sheets (CSS ) selectors to let us quickly and easily access elements or groups of elements in the Document Object Model (DOM ).In this chapter, we will cover:- The structure of the elements on a web page
- How to use CSS selectors to find elements on the page
- What happens when the specificity of a CSS selector changes
- Custom jQuery extensions to the standard set of CSS selectors
- The DOM traversal methods, which provide greater flexibility for accessing elements on the page
- Using modern JavaScript language features to iterate over jQuery objects efficiently
Passage contains an image
Understanding the DOM
One of the most powerful aspects of jQuery is its ability to make selecting elements in the DOM easy. The DOM serves as the interface between JavaScript and a web page; it provides a representation of the source HTML as a network of objects rather than as plain text.This network takes the form of a family tree of elements on the page. When we refer to the relationships that elements have with one another, we use the same terminology that we use when referring to family relationships: parents, children, siblings, and so on. A simple example can help us understand how the family tree metaphor applies to a document:<html> <head> <title>the title</title> </head> <body> <div> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <p>This is yet another paragraph.</p> </div> </body> </html>Here, <html> is the ancestor of all the other elements; in other words, all the other elements are descendants of <html>. The <head> and <body> elements are not only descendants, but children of <html> as well. Likewise, in addition to being the ancestor of <head> and <body>, <html> is also their parent. The <p> elements are children (and descendants) of <div>, descendants of <body> and <html>, and siblings of each other.
eBook - ePub- Richard York(Author)
- 2015(Publication Date)
- Wrox(Publisher)
Chapter 2 Selecting and FilteringThis chapter talks about jQuery's sophisticated implementation of the Selectors API, which provides the ability to select elements in the DOM using CSS selectors. jQuery's Selectors API allows you to select one or more elements from the DOM using a selector; then either you can use that result set, or you can pass those elements on to be filtered down to a more specific result set.If you've never heard of a selector before, then I recommend that you have a look at my book Beginning CSS: Cascading Style Sheets for Web Design, 3rd Edition, which has extensive coverage of selectors.In CSS, you can apply style to one or more elements by writing a style sheet. You choose which elements to style based on the syntax that appears in the first part of a CSS rule, before the first curly brace, which is known as the selector. Here is a sample CSS selector:div#exampleFormWrapper form#exampleSummaryDialog { display : block ; position : absolute ; z-index : 1 ; top : 22px ; left : 301px ; right : 0 ; bottom : 24px ; width : auto ; margin : 0 ; border : none ; border-bottom : 1px solid rgb(180, 180, 180) ; }Using markup and CSS, you can assign id and class names to elements, and you can control the presentational aspects of elements specifically using selectors. In jQuery, the concept of selectors as applied to CSS is also applied to the concept of the Document Object Model (DOM). In the DOM, you have available to you every element that exists in the markup of your document, and you can traverse the DOM and select the elements you want to work with using selectors, just like you use in your CSS style sheets.After you select elements from the DOM, you can apply behavior to them. You can listen to events and make something happen when a user clicks an element, for example. You can make something happen when the user's mouse cursor comes over or leaves an element. Basically, you can make your web documents look and behave more like desktop applications. You are no longer limited to static content as you are with markup and CSS alone—you can apply behavior as well.
eBook - ePubLearn Chart.js
Create interactive visualizations for the Web with Chart.js 2
- Helder da Rocha(Author)
- 2019(Publication Date)
- Packt Publishing(Publisher)
CSS selectors are expressions used to select elements by type, class, ID, wildcards, attributes, context, state, and position. The result of a selection expression may consist of none, one, or more elements. JavaScript libraries use selectors to obtain objects that can be manipulated programmatically via DOM. A result set can be formed from a list of comma-separated selection expressions. Elements may also be selected from context with combinator selectors. The following table lists some of the main selectors and some examples:Selector Syntax Description Example (in CSS) Type selector tagname Selects a set of elements of the specified type (tag name), for example td, h1, prect { … } /* all <rect> tags */. Class selector .classname Selects a set of elements that belongs to a specified class, for example .selected and p.copy. ID selector #idname Selects one element with the specified id attribute, for example #main and #chart. Universal selector * Selects all elements. Attribute selector [attr] [attr=value] (several other combinations) Selects elements that contain an attribute. Selects elements that contain an attribute with a specified value. Other combinations match a string in the attribute value. Descendant combinator ancestor selectedtag Selects elements nested within a specified ancestor element (may have other elements in between), for example table td. Child combinator parent > selectedtag Selects elements nested directly below a specified parent element (selectedTag is a child of a parent), for example table >tbody >tr >td.General sibling combinator preceding ~ selectedtag Selects elements that appear after a specified predecessor (both have the same parent), for example h1 ~p.last.
Learn about this page
Index pages curate the most relevant extracts from our library of academic textbooks. They’ve been created using an in-house natural language model (NLM), each adding context and meaning to key research topics.
