One place for hosting & domains


      Understanding the DOM — Document Object Model eBook

      Download the Complete eBook!

      Understanding the DOM — Document Object Model eBook in EPUB format

      Understanding the DOM — Document Object Model eBook in PDF format

      Introduction to the eBook

      JavaScript is the de facto programming language of the web, but the language itself does not include any built-in method for working with input/output (I/O), such as graphics display and sound. Instead, the web browser provides an API for accessing the HTML document in a tree structure known as the Document Object Model (DOM). The combination of JavaScript and the DOM is what allows us to create interactive, dynamic websites.

      Many modern frameworks, such as React, Vue, and Svelte abstract away much of the DOM from the developer, but frameworks also use the DOM under the hood. The JavaScript library jQuery was also created to make working with the DOM easier, but the modern development practice is to work with the DOM directly. In order to be a proficient web developer, having a deep understanding of what the DOM is and how to work with it is essential. The goal of this book is to provide a base understanding of the DOM, as well as explore examples of the most common and useful methods for interacting with the DOM.

      This book is based on the Understanding the DOM tutorial series found on the DigitalOcean Community. The topics that it covers include:

      • The DOM and DOM tree structure
      • How to access, traverse, and modify nodes and elements in the DOM
      • How to modify attributes, classes, and styles in the DOM
      • Use events to make interactive, dynamic websites

      Each chapter is self-contained and can be followed independently of the others. However, if you are not yet familiar with the concept of the DOM and DOM tree, it is recommended that you read the introductory chapters first.

      Download the eBook

      You can download the eBook in either the EPUB or PDF format by following the links below.

      Download the Complete eBook!

      Understanding the DOM — Document Object Model eBook in EPUB format

      Understanding the DOM — Document Object Model eBook in PDF format

      If you’d like to learn more about JavaScript, visit the DigitalOcean Community’s JavaScript section. You can follow along with the How to Code in JavaScript series for a directed learning experience.

      Source link

      How To View The Source Code of an HTML Document

      Part of the Series:
      How To Build a Website With HTML

      This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

      At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

      HTML is used to mark up a document with instructions that tell a browser how to display and interpret the document’s content. For example, HTML can tell the browser which text content should be interpreted as a heading and which text content should be interpreted as paragraphs. HTML is also used to add images and assign links to text and images. These instructions are communicated through HTML tags, which are written like this: <tagname>. Many, though not all tags, use an opening tag and closing tag to wrap around the content that they are used to modify.

      To get a sense of how these tags are used, let’s inspect a snippet of HTML code. The HTML code below shows how HTML tags are used to structure text and add links and images. Don’t worry if you don’t understand the tags immediately- we’ll study those in the next tutorial.

      <h1>Sammy's Sample HTML</h1>
      <p>This code is an example of how HTML is written.</p>
      <p>It uses HTML tags to structure the text.</p>
      <p>It uses HTML to add a <a href="">link</a>.</p>
      <p>And it also uses HTML to add an image:</p>
      <img src=""/>

      This HTML code is rendered in the browser as follows:

      HTML Document

      Viewing the Source Code of a Webpage

      Nearly every webpage you come across uses HTML to structure and display HTML pages. You can inspect the source code of any webpage by using a web browser like Firefox or Chrome. On Firefox, navigate to the “Tools” menu item in the top menu and click on “Web Developer/Page Source” like so:

      Gif of how to inspect source code using Firefox

      On Firefox, you can also use the keyboard shortcut Command-U to view the source code of a webpage.

      On Chrome, the process is very similar. Navigate to the top menu item “View” and click on “Developer/View Source.” You can also use the keyboard shortcut Option-Command-U.

      Try inspecting the source code of the demo website that we will build in this tutorial series. You should receive a page with many more HTML tags than our example above. Don’t be alarmed if it seems overwhelming. By the end of this tutorial series, you should have a better understanding of how to interpret HTML source code and how to use HTML to build and customize your own websites.

      Note: As mentioned above, you can inspect the source code of any webpage using tools from the Firefox or Chrome web browser. Try inspecting the code of a few of your favorite websites to get a sense of the underlying code that structures web documents. Though the source code of these sites will likely contain more languages than HTML, learning HTML first will help prepare you to learn additional languages and frameworks for creating websites later on if you wish.

      You should now have a general understanding of the format of an HTML document and know how to inspect HTML source code using a browser tool. To better understand how HTML works, let’s inspect its key components. In the next tutorial, we will learn more about HTML elements, the building blocks that are used to create HTML documents.

      Source link