Javascript Document Object

7 Key excerpts on "Javascript Document Object"

• 

  eBook - ePub

  JavaScript

  Syntax and Practices

  • Ravi Tomar, Sarishma Dangi(Authors)
  • 2021(Publication Date)
  • Chapman and Hall/CRC

    (Publisher)

  7 Document Object Model

  DOI: 10.1201/9781003122364-7

  In 1993 to 1994, every browser had its own flavor of HTML. So it was very difficult to know what you could put in a Web page and reliably have most of your readership see it.

  –Tim Berners-Lee

  This chapter discusses Document Object Model (DOM) in detail, as we have already learnt that DOM is a subpart of BOM, but DOM having its own significance is the reason this is discussed in a separate chapter. The web browser uses DOM as the interface for delivering content to the end user. DOM hierarchy represents the structure of XML and HTML documents being loaded inside the web browser. DOM represents the logical structure of documents, where a document refers to a web page. DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript. In this chapter, we will discuss the document object and its organization along with various concepts related to the DOM.

  7.1 Document Object Model (DOM)

  A web page is a document that comprises HTML. The web page can be viewed as a source HTML or inside a web browser. In both the cases, the document remains the same. The DOM defines a hierarchy of objects that serve as means to access, manipulate and manage the entire document [1]. Using this hierarchy, programs can easily get access to HTML tags, attributes, classes, IDs, elements etc.

  The DOM implementation is done by web browsers, and most of the web browsers follow the standards [95] . The standard elucidates that any modern web browser on calling a method such as querySelectorAll

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  Beginning JavaScript

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

    (Publisher)

  images . So, although the standard helps to make core programming tasks compatible when both JavaScript and JScript comply with it, it is of no use in making the scripting of client-side objects compatible between the main browsers. Some incompatibilities remain.

  All current implementations of JavaScript are expected to conform to the current ECMAScript standard, which is ECMAScript edition 5, published in December 2009.

  Although there used to be quite a few irregularities between the different dialects of JavaScript, they’re now similar enough to be considered the same language. This is a good example of how standards have provided a uniform language across browser implementations, although a debate that is similar to the one that took place over HTML still rages to a lesser degree over JavaScript.

  It’s now time for you to consider the document object model itself.

  THE DOCUMENT OBJECT MODEL

  The document object model (DOM) is, as previously mentioned, a way of representing the document independent of browser type. It allows a developer to access the document via a common set of objects, properties, methods, and events, and to alter the contents of the web page dynamically using scripts.

  You should be aware that some small variations are usually added to the DOM by the browser vendor. So, to guarantee that you don’t fall afoul of a particular implementation, the W3C has provided a generic set of objects, properties, and methods that should be available in all browsers, in the form of the DOM standard.

  The DOM Standard

  We haven’t talked about the DOM standard so far, and for a particular reason: It’s not the easiest standard to follow. Supporting a generic set of properties and methods has proved to be a very complex task, and the DOM standard has been broken down into separate levels and sections to deal with the different areas. The different levels of the standard are all at differing stages of completion.

  Sign up to read

  Learn more about book
• 

  eBook - PDF

  Beginning HTML and CSS

  • Rob Larsen(Author)
  • 2013(Publication Date)
  • Wrox

    (Publisher)

  A document might raise an event when the user presses Submit on a form or clicks a link. Furthermore, an event can also trigger actions; for example, if a car is out of fuel, the car will stop. An object model is therefore a description of how a program can represent real-life entities using a set of objects, and it also specifies a set of methods, properties, and events an object may have. All the main browsers implement an object model called the DOM that was devised to represent web pages. In this DOM, the page as a whole is represented using a document object. 342 ❘ CHAPTER 10 LEARNING JAVASCRIPT The DOM describes how you can ‰ ‰ Get and set properties of a web page such as the background color. ‰ ‰ Call methods that perform actions such as writing a new line into a page. ‰ ‰ React to events such as a user pressing a Submit button on a form. Web browsers implement the DOM as a way for programming languages to access (and work with) the content of web pages. When you have learned how the DOM enables you to access and change web pages, you can then see how the programming language can ask the DOM about the web page, perform calculations with the data it receives back, and then tell the browser to change something based upon these calculations. If you think of the DOM as an interface between the browser and the programming language, you can compare it to a remote control that acts as the interface between your TV and you. You know that pressing 1 on your remote control turns your TV to channel 1, or that the volume-up button increases the volume. If you call up the TV schedule, you can see what is on next, and you might choose to change the channel (or turn the TV off) as a result. Similarly, the DOM is like the remote control that enables a programming language (such as JavaScript) to work with the browser (and the web page in that browser).

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  JavaScript: Novice to Ninja

  • Darren Jones(Author)
  • 2017(Publication Date)
  • SitePoint

    (Publisher)

  Chapter 6: The Document Object Model

  The Document Object Model (DOM) allows you to access elements of a web page and enable interaction with the page by adding and removing elements, changing the order, content and attributes of elements, and even altering how they are styled.

  In this chapter, we’ll cover the following topics:

  • Introduction to the DOM
  • Getting elements ―getElementById , getElementsByClassName , getElementsByTagName , querySelector and querySelectorAll
  • Navigating the DOM
  • Getting and setting an element’s attributes
  • Updating the DOM by creating dynamic markup
  • Changing the CSS of an element
  • Our project ― we'll dynamically insert each question into the HTML

  The Document Object Model

  What is the DOM?

  The Document Object Model, or DOM for short, represents an HTML document as a network of connected nodes that form a tree-like structure.

  The DOM treats everything on a web page as a node. HTML tags, the text inside these tags, even the attributes of a tag are all nodes. The HTML tag is the root node, and every other part of the document is a child node of this.

  Take the following piece of HTML as an example: <p class='warning'>Something has gone <em>very</em> wrong!</p> This can be represented as the tree diagram shown below. The DOM tree

  The DOM is not actually part of JavaScript because it is language agnostic (although JavaScript is, by far, the language most commonly used with it). This means it can be used in any programming language, not just JavaScript. We can use JavaScript to access and modify different parts of a web page using a special built-in object called document .

  History of the DOM

  In the early days of the web, browser vendors such as Netscape and Microsoft developed their own distinct ways of accessing and altering parts of a web page. In the beginning, they tended to focus on common page elements such as images, links and forms – this was known as Dynamic HTML (DHTML). These methods became known as DOM level 0, or legacy DOM. Some of the more common methods, such as those used for selecting images and forms, can still be used in the current DOM.

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  Beginning HTML and CSS

  • Rob Larsen(Author)
  • 2013(Publication Date)
  • Wrox

    (Publisher)

  interface . The interface is a little like a predefined set of questions and commands. For example, you can ask questions such as

  • What is the title of the page?
  • What is the third item in the bulleted list whose id attribute has a value of ToDoList ?
  • What is the URL of the page in the first link on the page?

  You can also use commands to tell the browser to change some of these values, or even add new elements into the page. The interface that works with web pages is the Document Object Model (DOM ).

  In object-oriented programming languages, real-life objects are represented (or modeled) using a set of objects , which form an object model . For example, a car object might represent a car, a basket object might represent a shopping basket, and a document object could represent a document such as a web page.

  Each object can have a set of properties that describes aspects of the object. A car object might have properties that describe its color or engine size. A basket object might have properties that describe the number of items it contains or the value of those items. A document object has properties that describe the background color of the web page or the title of the page.

  Then there are methods ; each method describes an action that can be done to (or with) the object. For example, a method of an object representing a car might be to accelerate or to change gear. A method of a shopping basket might be to add an item or to recalculate the value of items in the basket. A method on a document could be to write a new line of text into the web page.

  Finally, there are events . In a programming language, an event is the object putting up its hand and saying, “x just happened,” usually because a program might want to do something as a result of the event. For example, a car object might raise an event to say the ignition started or that it is out of fuel. A basket

  Sign up to read

  Learn more about book
• 

  eBook - PDF

  Start Programming Using HTML, CSS, and JavaScript

  • Iztok Fajfar(Author)
  • 2015(Publication Date)
  • Chapman and Hall/CRC

    (Publisher)

  If you use JavaScript in web documents only to augment HTML with behavior, then you get what is usually called Dynamic HTML or DHTML. In such cases, JavaScript should only be used to enhance a visitor’s browsing experience. The actual content that a visitor can read, however, should by no means be dependent on JavaScript. On the other hand, if you go beyond that limitation of merely enhancing a visitor’s experience, you get what is called a web application . The HTML5 specification de-fines a whole lot of objects that allow you to perform application-like feats such as manipulating graphics or storing and retrieving data. Such sets of objects are called application programming interfaces or APIs because programmers use them for inter-acting with di ff erent (software and hardware) components. There’s simply too much of everything, so we’re not going to plunge into details. I’ll just leave you some clues at the end of this course as to which directions you can take. They are gathered in Appendix B of this book. It doesn’t matter whether you’re up to developing dynamic documents or web appli-cations—there’s one API you will constantly work with. It is called the Document Object Model API, or DOM API. Think of DOM as being an object representation of the collection of all the HTML elements and strings of text positioned on a web page. By using DOM API, the programmer can manipulate or query any element or string of text on a web page indirectly by manipulating or querying a corresponding DOM object. The fundamental object of the DOM API is the Document object, which represents whatever is displayed in the browser’s window. The Document object is a property of the Window object and can hence be accessed as a global property under the name 12.4. Scripting Documents 233 document . Maria : Has this got anything to do with the document.write() that we’ve been using? Professor : Indeed it has.

  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)

  You can think of an object as anything you want to be able to work with in your programs. Some objects, such as the Document object, are part of a document by definition. You can also create other objects that are necessary for the programs you want to create. Every object can have methods, which are actions that can be performed on it. Every object also has properties; each property is a different piece of information about the object. Understanding the relationship between objects, properties, and methods is an important part of building a strong foundation in JavaScript. Programming Concepts Objects, Properties, and Methods The next part of this chapter focuses on the write() method as a way of helping you understand how to program with JavaScript. Using the write() Method Almost everything within the web page and the web browser is an object and is thus part of the Document Object Model or the Browser Object Model. One of the most commonly used objects in the Document Object Model is the Document object, which represents the entire content of the web page. Any text, graphics, or other information displayed in the 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. WRITING A JAVASCRIPT PROGRAM 11 page is part of the Document object. You can write new content to the web page with the write() method of the Document object. For example, you could use the write() method to write content containing custom information such as a user’s name or address.

  Sign up to read

  Learn more about book