Computer Science

Javascript Document Object

The JavaScript Document Object represents the entire HTML document as a tree of objects, allowing manipulation of the document's structure, content, and styling. It provides methods and properties to access and modify elements, handle events, and interact with the browser window. This powerful feature enables dynamic and interactive web page functionality.

Written by Perlego with AI-assistance

5 Key excerpts on "Javascript Document Object"

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.
  • HTML, CSS & JavaScript in easy steps
    eBook - ePub

    HTML, CSS & JavaScript in easy steps

    Then, add statements to create buttons in the paragraphs
    info .innerHTML += ‘ <button onclick=”history.back( )”>Back</button>’ info .innerHTML +=
    ‘<button onclick=”history.forward( )”>Forward</button>’
    Save the HTML document and JavaScript script file in the same folder, then clear your browser’s history
    To clear the browser history in the Google Chrome browser, click the button, then select More tools, Clear browsing data, and click the Clear data button.
    Open the first page to see the initial history length is 1
    Click a link to load the third page and see the history length increase to 2
    Click the Back button to return to the first page but see the history length remain the same as 2
    The URLs are stored in the history object array elements in a protected manner so they cannot be retrieved as strings.
    In this example, each URL only gets added to the history array when moving to a different page by clicking on a link. The back( ), forward( ), and go( ) methods simply select an element in the history array so do not change its length property.
    Summary
    • The Document Object Model (DOM) is a hierarchical tree representation of all components of a web page.
    • The window object is the top level in the DOM hierarchy and has properties describing the browser window.
    • The screen object is a child of the window object and has properties describing the screen dimensions and color depth.
    • The window object has scrollBy( ) and scrollTo( ) methods and scrollX and scrollY properties that specify the scroll position.
    • Dialog messages can be displayed using the window object’s alert( ) , confirm( ) , and prompt( ) methods.
    • A pop-up window can be created using the window object’s open( ) method, but may be obstructed by a pop-up blocker.
    • The window
    Sign up to read
    Learn more about book
  • Exploring Web Components
    eBook - ePub

    Exploring Web Components

    Build Reusable UI Web Components with Standard Technologies

    As you’ve seen so far, DOM manipulation is an essential part of creating custom elements and hence web components. The ability to perfectly integrate into the DOM makes your web components almost indistinguishable from standard HTML elements. However, this same DOM integration capability is somehow a problem for components. Being so integrated into the DOM leads to some issues that prevent web components from being true components, that is, UI elements with their look and behavior that can be easily reused.
    Let’s take a look at the problems that this tight integration may generate.

    The global DOM

    The DOM is an object-based representation of the HTML elements on a page. This means that element in an HTML page is represented by an object in the DOM tree. This is true for both standard HTML elements and custom elements. However, since custom elements are usually built up with HTML elements and other custom elements, you end up having all their composing items in the DOM tree.
    Consider the usual HTML page containing our cookie alert web component: <!DOCTYPE html> <html> <head> <title>Web Components with Webpack Build System</title> <script src="./wc-polyfills/webcomponents-loader.js"></script> <script src="./bundle.js"></script> </head> <body> <h1>Here is your Web Component</h1> <cookie-alert message="We use cookies, but respect your privacy!"></cookie-alert> </body> </html>
    If you use the tool of your favorite browser to inspect the generated HTML, for example, the Developer Tools in Chrome, you should see the markup shown by the following screenshot:
    Figure 6.1
    As you can see, our custom tag <cookie-alert> contains the markup corresponding to the DOM of the custom element. It includes the style element and the <div> with the text and the buttons you added via JavaScript.
    These elements are integrated into the page’s DOM, so they work like any other element on the page. For example, you can access the text of the cookie alert with the following code: document.querySelector("div.container span").innerText Of course, it makes more sense using the message property of the component to get the text, as follows: document.querySelector("cookie-alert").message
    However, nobody prevents you from accessing the internal DOM structure of your web component. The DOM is like a global variable: any piece of code can access it and change its value. And like a global variable, it brings with it all its flaws, as we will see in the next section.
    Sign up to read
    Learn more about book
  • Building Websites All-in-One For Dummies
    eBook - ePub

    Building Websites All-in-One For Dummies

    • David Karlins, Doug Sahlin(Authors)
    • 2012(Publication Date)
    • For Dummies
      (Publisher)
    JavaScript J avaScript is the main source of interactivity and animation in web pages. And of even greater value, it helps visitors interact with objects. They can click a button, scroll a drop-down menu, choose an option from a drop-down menu, and so on — all user-initiated events trigger an action. That action might be launching a slideshow, or opening a new browser window, or a form being validated (the data a user enters is tested before that data is sent to a server). As such, JavaScript is the third leg of the basic building blocks of modern, inviting, dynamic websites, along with HTML (which we cover in Book III, and throughout this minibook) and CSS (which we cover in Book IV). Understanding the Role of JavaScript As you peruse the web to identify the source of various content you want to include in your site, train your brain (and eye) to identify JavaScript objects. You’ll find them everywhere. For example, basic fly-out menus, like the one in Figure 1-1 from eBay, are typically created with JavaScript. Drop-down menus and JavaScript There are other techniques for creating animated drop-down menus. For example, some are created using only CSS (style sheets). But JavaScript drop-down menus are the most widely implemented, powerful, and accessible in a wide variety of browsing environments. The JavaScript code that makes drop-down menus work is stored in files with a.js filename extension. If you look at the source code for a website that includes JavaScript, you most likely won’t see the hundreds or thousands of lines of JavaScript code that make drop-down menus and other animated, interactive elements do their thing
    Sign up to read
    Learn more about book
  • Web Marketing for the Music Business
    eBook - ePub

    Web Marketing for the Music Business

    • Tom Hutchison(Author)
    • 2013(Publication Date)
    • Routledge
      (Publisher)
    Short for cascading style sheets, a feature being added to HTML that gives both web site developers and users more control over how pages are displayed. With CSS, designers and users can create style sheets that define how different elements, such as headers and links, appear. These style sheets can then be applied to any web page.
    Flash
    A bandwidth-friendly and browser-independent animation technology. As long as different browsers are equipped with the necessary plug-ins, Flash animations will look the same. With Flash, users can draw their own animations or import other vector-based images (Webopedia).
    Hypertext markup language (HTML) The predominant authoring language for the creation of web pages. HTML defines the structure and layout of a web document by using a variety of tags and attributes.
    Java
    A client-side programming language with a number of features that work well on the Web. Small Java applications are called Java applets and are downloaded from a web server and run on the user’s computer by a Java-compatible web browser.
    JavaScript
    A server-side scripting language embedded in the HTML language of a web page that adds interactive functions to HTML pages. JavaScript is easier to use than Java, but it is not as powerful and deals mainly with the elements on the web page.
    Java Virtual Machine (JVM) An abstract computing machine, or virtual machine, is a platform-independent execution environment that converts Java byte code into machine language and executes it.
    Meta tags
    Author-generated HTML commands that are placed in the head section of an HTML document. These tags help identify the content of the page and specify which search terms should be used to list the site on search engines.
    Plug-in A hardware or software module that adds a specific feature or service to a larger system.
    Server-side JavaScript (SSJS) JavaScript that enables back-end access to databases, file systems, and servers.
    Server-side scripting Scripting that runs on the server side of a client-server system. CGI scripts are server-side applications because they run on the web server compared to programs that run in the user’s browser.
    Sign up to read
    Learn more about book
  • Teach Yourself VISUALLY Web Design
    eBook - ePub

    Teach Yourself VISUALLY Web Design

    • Rob Huddleston(Author)
    • 2010(Publication Date)
    • Visual
      (Publisher)
    In order to run, your JavaScript code must be interpreted by an application. In most cases, the application being used to run it will be a Web browser. However, many other applications support JavaScript in some form today, so you might also encounter it being used elsewhere.
    Browser Support
    Every major modern browser offers full support of JavaScript. Microsoft’s Internet Explorer officially supports ECMAScript, but this in effect means support of JavaScript. You can safely assume that, unless your user has specifically disabled it, all browsers will run your scripts.
    JavaScript Is Not Java
    Java is a very powerful object-oriented programming language from Sun Microsystems, whereas JavaScript is a scripting language. Except for the name, they in fact have absolutely nothing in common. Although beginning Web designers commonly confuse the two, care should be taken not to because no help is available for Java that would be useful for JavaScript programming, and vice versa.
    JavaScript and HTML
    JavaScript allows developers to achieve many effects not offered by HTML. For example, HTML form controls are extremely limited, and offer little in the way of validation mechanisms to ensure that the data being entered is what is expected. JavaScript allows developers to write as complicated a validation scheme as they need on top of the form. JavaScript can also work in conjunction with CSS to achieve advanced visual effects such as drop-down menus, accordion effects, and much more.
    Ajax
    Ajax was developed as a way to allow designers and developers to extend the capabilities offered by HTML and CSS. Most Ajax development is done through prebuilt JavaScript libraries, saving you time in having to rewrite code. The better, more widely adopted libraries focus on good usability and accessibility, and also provide many features such as the ability for JavaScript to refresh only a portion of a Web page. The extremely popular Google Maps application is an example of Ajax.
    Sign up to read
    Learn more about book
Explore more topic indexes
View all