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
1 of 5
6 Key excerpts on "Javascript Selecting Elements"
No longer available |Learn more- 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.
No longer available |Learn moreLearn 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. 
eBook - PDF- Sasha Vodnik, , , (Authors)
- 2015(Publication Date)
- Cengage Learning EMEA(Publisher)
The most widely used programming language for modern web browsers is JavaScript , which you can use to reference and change data associated with parts of HTML documents. Writing code to accomplish this requires a standardized way of referring to the parts of a web page; this system is known as the Document Object Model (DOM) . You can think of the DOM as a hierarchical arrangement of the content of an HTML document into a tree-like structure, which is known as the DOM tree . FIGURE M-1 shows the code for a simple web page along with its corresponding DOM tree. Each item in the DOM tree—including elements, attributes, and text content—is known as a node . CASE You review the underlying concepts of the DOM in preparation for working with JavaScript. Learning Outcomes • Describe the components of the Document Object Model Note that JavaScript has a different definition of a property than CSS, and CSS properties are not considered properties of JavaScript objects. QUICK TIP TABLE M-1: Commonly used properties property refers to example classValue the value of an element’s class attribute one or more class names, separated by spaces innerHTML the content of an object, including any nested HTML tags; compatible with IE8 the text in a p element src the path and source filename for an element with an src attribute the path and filename for an image textContent the text content of an object, excluding any nested HTML tags; not compatible with IE8 the text in a p element value the current value of a form field or an object property the value of the href property for an a element © 2016 Cengage Learning Copyright 2016 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s). Editorial review has deemed that any suppressed content does not materially affect the overall learning experience.
No longer available |Learn more- Oswald Campesato(Author)
- 2012(Publication Date)
- Mercury Learning and Information(Publisher)
div > element.When users launch this Web page, the function clickElements() is executed because of this code snippet:The final portion of Listing 5.1 contains an HTML <body > element with HTML <div > elements that are processed by the clickElements() function.Obviously Listing 5.1 contains simple code that is easy to read and understand, but creating (as well as debugging, maintaining, and enhancing) HTML Web pages becomes more complicated when you need to write JavaScript code for multiple versions of multiple browsers. Imagine yourself in a position where you need to develop and maintain a non-trivial Web application that supports Internet Explorer 6 (and above) in addition to Firefox and WebKit -based browsers. Such an application can become tedious and difficult in terms of maintenance and making enhancements.Consequently, the JavaScript methods that are listed at the beginning of this section are insufficient if you need to manipulate more complex selections of elements, which is one reason for using a JavaScript toolkit. One solution is to use jQuery (and jQuery Mobile for mobile Web pages) in order to quickly and easily create cross-browser Web pages. The advantage of jQuery is that you can avoid dealing with the tedious details of JavaScript and focus on implementing the functionality of your HTML Web pages.USING JQUERY TO FIND ELEMENTS IN WEB PAGESThe code in the previous section showed you how to add event listeners to elements in an HTML Web page. Now let’s look at how you can use jQuery to manage elements in a Web page in a cross-browser manner.
eBook - PDF- Patrick Carey, Sasha Vodnik, Patrick Carey(Authors)
- 2021(Publication Date)
- Cengage Learning EMEA(Publisher)
Once a selector has been stored as a variable, the array of selected elements generated by that expression is available to the JavaScript parser without requiring a rescan of the DOM. Copyright 2022 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s). Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it. WORKING WITH JQUERY SELECTORS 507 Because jQuery selectors are based on CSS selector patterns, you can speed up your processing time by optimizing your use of selectors. This is especially important for large documents in which searching through the node tree would involve investigating several branches. Here are some tips to keep in mind to optimize jQuery selectors: ❯ ❯ The id attribute is unique for every page element. The fastest way to retrieve a specific element is by its id value. ❯ ❯ Be specific in your selectors. Instead of referencing all article elements, use a selector like $("article.news") so that JavaScript limits its search to article elements of the news class. ❯ ❯ Include a context for the selectors whenever possible to reduce the size of the node tree that the parser will search. For example, instead of using $("p") to search for any paragraph, use $("article.news > p") to limit the search only for paragraphs that are direct children of article elements belong to the news class. ❯ ❯ Cache your selectors by storing them within variables. By storing the selector as a variable, JavaScript does not have to rescan the DOM to recreate the node collection.
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.
