Javascript Changing Elements

5 Key excerpts on "Javascript Changing Elements"

• 

  eBook - ePub

  Beginning JavaScript

  • Jeremy McPeak(Author)
  • 2015(Publication Date)
  • Wrox

    (Publisher)

  9 DOM Scripting

  WHAT YOU WILL LEARN IN THIS CHAPTER:                

  • Finding elements in the page
  • Creating and inserting elements into the page dynamically
  • Navigating the web page, travelling from one element to another
  • Changing elements’ style after they are loaded in the page
  • Animating elements by manipulating their positioning

  WROX.COM CODE DOWNLOADS FOR THIS CHAPTER

  You can find the wrox.com code downloads for this chapter at http://www.wiley.com/go/BeginningJavaScript5E on the Download Code tab. You can also view all of the examples and related files at http://beginningjs.com .

  JavaScript’s primary role in web development is to interact with the user, to add some kind of behavior to your web page. JavaScript enables you to completely change all aspects of a web page after it’s loaded in the browser. What gives JavaScript this power over a web page is the document object model (DOM), a tree-like representation of the web page.

  The DOM is one of the most misunderstood standards set forth by the World Wide Web Consortium (W3C), a body of developers who recommend standards for browser makers and web developers to follow. The DOM gives developers a way of representing everything on a web page so that it is accessible via a common set of properties and methods in JavaScript. By everything, we mean everything. You can literally change anything on the page: the graphics, tables, forms, style, and even text itself by altering a relevant DOM property with JavaScript.

  The DOM should not be confused with the browser object model (BOM) that was introduced in Chapter 8. You’ll see the differences between the two in detail shortly. For now, though, think of the BOM as a browser-dependent representation of every feature of the browser, from the browser buttons, URL address line, and title bar to the browser window controls, as well as parts of the web page, too. The DOM, however, deals only with the contents of the browser window or web page (in other words, the HTML document). It makes the document available in such a way that any browser can use exactly the same code to access and manipulate the content of the document. To summarize, the BOM gives you access to the browser and some of the document, whereas the DOM gives you access to all of the document, but only

  Sign up to read

  Learn more about book
• 

  eBook - PDF

  HTML5 and CSS3, Illustrated Complete

  • 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.

  Sign up to read

  Learn more about book
• 

  eBook - PDF

  JavaScript for Web Warriors

  • Patrick Carey, Sasha Vodnik, Patrick Carey(Authors)
  • 2021(Publication Date)
  • Cengage Learning EMEA

    (Publisher)

  JavaScript and Client-Side Scripting HTML was not originally intended to control the appearance of pages in a web browser. When HTML was first devel- oped, web pages were static—that is, they couldn’t change after the browser rendered them. However, after the web grew beyond a small academic and scientific community, people began to recognize that greater interactivity and bet- ter visual design would make the web more useful. As commercial applications of the web grew, the demand for more interactive and visually appealing websites also grew. HTML could be used to produce only static documents. You can think of a static web page written in HTML as being approximately equivalent to a printed book; you can read it or move around in it, but the content is fixed. What JavaScript provides that HTML needed is client-side scripting in which the scripting language runs on a local browser (on the client tier) instead of on a web server (on the processing tier). In this way, web pages can respond dynamically to user actions without putting extra strain on the operations of the server. 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.

  Sign up to read

  Learn more about book
• 

  eBook - PDF

  Digital Multimedia

  • Nigel Chapman, Jenny Chapman(Authors)
  • 2014(Publication Date)
  • Wiley

    (Publisher)

  Triggering it with a mouse click is the usual way of implementing Web image galleries, such as the one shown in Figure 12.12. 558 SCRIPTING Many sweeping changes to the appearance of a page can be achieved by altering the value of the class attribute of one or more elements, by assigning to the className property of the corre- sponding DOM objects. Suppose, for example, that a stylesheet includes the following rules: body.plain { background-color: white; color: black; font-family: Verdana, sans-serif; font-size: 110%; text-align: left; } body.fancy { background-color: #D6D6D6; color: #561A1A; font-family: “Trajan Pro”, serif; font-size: 12px; text-align: justify; } .plain #navbar { list-style-type: disc; } .plain #navbar li { display: list-item; } .fancy #navbar { list-style-type: none; } .fancy #navbar li { display: inline; padding: 0 10px; } If the class of the body element was set to "fancy", a page with a navbar (marked up as a list) would look like the screenshot at the top of Figure 14.3. Executing the following code would change it so that it looked like the lower screenshot in Figure 14.3. var body = document.getElementsByTagName("body")[0] body.className = "plain" 559 JAVASCRIPT AND THE DOM CHAPTER 14 As before, an object representing the body element of the document is obtained, and then its className property is changed. The browser will then show the page as if the class attribute had been set to "fancy" in the body element’s opening tag. Any contex- tual selectors in the stylesheet for elements contained within .fancy, such as those we have provided for #navbar, will be matched. Thus, in conjunction with a stylesheet that uses contextual selectors, these two lines of JavaScript (which could be condensed into one, at the cost of a little readability) can completely change the appearance of the entire page.

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  Quick JavaScript

  • David Matuszek(Author)
  • 2023(Publication Date)
  • Chapman and Hall/CRC

    (Publisher)

  id , to assign a unique identifier to an individual tag.

  JavaScript is case-sensitive, but tag names and attributes in HTML are not case sensitive.

  Originally, all styling was done in the HTML itself. Today, most styles are applied by one or more associated stylesheets, written in CSS, Cascading Style Sheets.

  4.2 Adding JavaScript to HTML

  JavaScript can be added to an HTML page by:

  • Putting the JavaScript within <script> …</script> tags, in either the head or the body.
  • Putting the JavaScript in a separate file that has a .js extension, and loading it with <script src=" URL.js"></script> in the head element. In this case, any code within the <script> tags will be ignored.
  • Writing the JavaScript as the value of an HTML “event handler” attribute.

  Function definitions are best placed in the <head> of the HTML document. Scripts in the <body> section are executed in order as the page is loaded, and typically produce output that is displayed at that point in the page.

  Not everyone allows JavaScript to run in their browser. Text within a <noscript> text</noscript> tag will be displayed if and only if JavaScript is unavailable or disabled.

  Large amounts of JavaScript and scripts that are used on more than a single page should be put in a file or files, not on the HTML page.

  4.3 DOM Overview

  The HTML DOM (Document Object Model) represents everything on the HTML page as a tree of Node s, even the HTML comments and every bit of whitespace. Everything in the DOM is accessible to JavaScript and can be changed, and every change made by JavaScript is reflected immediately in the page as shown to the user. This is far more power than is needed for most applications.

  Figure 4.1 shows the main subclasses of Node , not the structure of the DOM tree. The root of the DOM tree is a Node named document , of type Document , and it has one child, an Element representing the <html> tag. The document node has properties head and tail

  Sign up to read

  Learn more about book