Key Concepts

Review core concepts you need to learn to master this subject

HTML script element src attribute

HTML script element defer attribute

HTML script tag async attribute

HTML script element

Nodes in DOM tree

HTML DOM

Accessing HTML attributes in DOM

The Document Object Model

See more

HTML script element src attribute

<!-- Using a relative path -->
<script src="./script.js"></script>

<!-- Using an absolute path -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

The src attribute of a <script> element is used to point to the location of a script file.

The file referenced can be local (using a relative path) or hosted elsewhere (using an absolute path).

Arrow Chevron Left Icon
The Script Element
Lesson 1 of 3
Arrow Chevron Right Icon
  1. 1
    JavaScript and HTML
    HTML defines the structure of a web page by using page elements as the building blocks. However, HTML by itself can not produce web page interactivity, that’s where JavaScript comes in. Below, we …
    Start
  2. 2
    The <script> tag
    The element allows you to add JavaScript code inside an HTML file. Below, the element embeds valid JavaScript code: This is an embedded JS example function Hello() { alert (‘Hello Wor…
    Start
  3. 3
    The src attribute
    Since you know how to use a element with embedded code, let’s talk about linking code. Linking code is preferable because of a programming concept called Separation of Concerns (SoC). Instead of …
    Start
  4. 4
    How are scripts loaded?
    A quick recap: the element allows HTML files to load and execute JavaScript. The JavaScript can either go embedded inside of the tag or the script tag can reference an external file. Before we …
    Start
  5. 5
    Defer attribute
    When the HTML parser comes across a element, it stops to load its content. Once loaded, the JavaScript code is executed and the HTML parser proceeds to parse the next element in the file. This ca…
    Start
  6. 6
    Async attribute
    The async attribute loads and executes the script asynchronously with the rest of the webpage. This means that, similar to the defer attribute, the HTML parser will continue parsing the rest of the…
    Start
  7. 7
    Review
    Let’s review. + HTML creates the skeleton of a webpage, but JavaScript introduces interactivity + The element has an opening and closing tag. You can embed JavaScript code inbetween the openin…
    Start
  1. 1
    What is the DOM?
    The Document Object Model, abbreviated DOM, is a powerful tree-like structure that allows programmers to conceptualize hierarchy and access the elements on a web page. The DOM is one of the bet…
    Start
  2. 2
    The DOM as a Tree Structure
    Tree-like modeling is used in many fields, including evolutionary science and data analytics. Perhaps you’re already familiar with the concept of family trees: these charts represent the familial r…
    Start
  3. 3
    Parent Child Relationships in the DOM
    Following the metaphor of a family tree, let’s define some key terminology in the DOM hierarchy: A parent node is the closest connected node to another node in the direction towards the root. A…
    Start
  4. 4
    Nodes and Elements in the DOM
    As mentioned, a node is the equivalent of each family member in a family tree. A node is an intersecting point in a tree that also contains data. There are nine different types of node objects in …
    Start
  5. 5
    Attributes of Element Node
    DOM element nodes model elements in an HTML document. Much like an element in an HTML page, the DOM allows us to access a node’s attributes, such as its class, id, and inline style. In the diagra…
    Start
  6. 6
    Review
    Congratulations on completing our introduction to the Document Object Model, or DOM, as a structure! Let’s review what you’ve learned so far: - The DOM is a structural model of a web page that a…
    Start
  1. 1
    The document keyword
    The Document Object Model, abbreviated DOM, is a powerful tree-like structure that organizes the elements on a web page and allows scripting languages to access them. This lesson will focus on so…
    Start
  2. 2
    Tweak an Element
    When using the DOM in your script to access an HTML element, you also have access to all of that element’s properties. This includes the ability to modify the contents of the element as well as it…
    Start
  3. 3
    Select and Modify Elements
    In the previous exercise, we accessed the webpage elements with the document keyword! What if we wanted to select a specific element? The DOM interface allows us to access a specific element with …
    Start
  4. 4
    Style an element
    Another way to modify an element is by changing its CSS style. The .style property of a DOM element provides access to the inline style of that HTML tag. The syntax follows an element.style.proper…
    Start
  5. 5
    Create and Insert Elements
    Just as the DOM allows scripts to modify existing elements, it also allows for the creation of new ones. The .createElement(tagName) method creates a new element based on the specified tag name pa…
    Start
  6. 6
    Remove an Element
    In addition to modifying or creating an element from scratch, the DOM also allows for the removal of an element. The .removeChild() method removes a specified child from a parent. Because the .que…
    Start
  7. 7
    Interactivity with onclick
    You can add interactivity to DOM elements by assigning a function to run based on an event . Events can include anything from a click to a user mousing over an element. The .onclick property a…
    Start
  8. 8
    Traversing the DOM
    In the DOM hierarchy, parent and children relationships are defined in relation to the position of the root node. A parent node is the closest connected node to another node in the direction tow…
    Start
  9. 9
    Review
    In this lesson, you manipulated a webpage structure by leveraging the Document Object Model interface in JavaScript. Let’s review what we learned: + The document keyword grants access to the root …
    Start

What you'll create

Portfolio projects that showcase your new skills

Pro Logo