The Document Object Model#

Last lecture you saw the basics of control flow programs in JavaScript.
We now need to learn how to manipulate the web page and browser using JavaScript.
This is done through a series of built-in objects. The specifications of these objects are called the DOM (Document Object Model) and BOM (Browser Object Model).
The BOM is not officially standardised, although there are standards for most browsers. The DOM is standardised as part of HTML5.

The Browser Object Model#

The Browser Object model covers all available data about the browser other than the actual page.
It provides:
- window: holds all your declared variables. Also can get the size of the window (or tab). May be able to open or move windows but this functionality is often restricted. Also displays alerts and prompts and manages timing.
- screen: contains the height, width and color depth of the screen; however, these are better accessed elsewhere.
- location: accesses the entered web address.
- history: can simulate clicking Back and Forward on the browser. Cannot access previously visited URLs.
- navigator: identifies the browser and OS.

Document Object#

The document object is built based on the document object model.
It provides access to a database of all other elements on the HTML page.
When you extract an element from the database, it is returned in the form of an object, with properties and methods as appropriate for that type of element.
By calling or changing these properties or methods, you can manipulate the element.

Accessing the document#

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <img ID="menu" src="menu.jpg">
5
    </body>
6
</html>

This img element has the ID menu, so we can get a reference to it with document.GetElementById("menu").

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <form name=“login”>
5
            <input ID=“username” type=text>
6
        </form>
7
    </body>
8
</html>

This input element has ID username, so we can get a reference to it with document.GetElementById("username"). IDs have to be unique across the whole document, so it does not matter that it is nested within a form.

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <form id="login">
5
            <input type=text>
6
        </form>
7
    </body>
8
</html>

You can also get all elements of a particular type. Doing so returns a list, to allow for the possibility of there being more than one.

1
document.GetElementsByTagName("input")

Note

id is unique, but class and tag are not.

Only GetElementsById gets one element, others get collection.

HTML tree#

The document object model is built in a tree structure, as with the HTML document itself.
Traditionally, positions in the tree are described using terms taken from family trees, even though these are not always absolutely accurate.

Accessing the document#

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <p name="username">Username:</p>
5
        <form name="login">
6
            <input name="username" type="text">
7
        </form>
8
        <p name="password">Password:</p>
9
        <form name="login2">
10
            <input name="password" type="hidden">
11
        </form>
12
    </body>
13
</html>

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <p name="username">Username:</p>
5
        <form name="login">
6
            <input name="username" type="text">
7
        </form>
8
        <p name="password">Password:</p>
9
        <form name="login2">
10
            <input name="password" type="hidden">
11
        </form>
12
    </body>
13
</html>

This p element is a child of the body.
The body is the parent of the p.

Note

Tag p here still has child —— the text.

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <p name="username">Username:</p>
5
        <form name="login">
6
            <input name="username" type="text">
7
        </form>
8
        <p name="password">Password:</p>
9
        <form name="login2">
10
            <input name="password" type="hidden">
11
        </form>
12
    </body>
13
</html>

This input element is a child of the form.
The form is the parent of the input.
The body is not the parent of the input.
The input is not a child of the body.
The input and the form are not siblings.

The body is not the parent of the input.
The body is the ancestor of the input.
The input is not a child of the body.
The input is the descendant of the body.

In the DOM, plain text is considered another form of child, in the same way that another element would be.
The text “username:” is a child of the p element.

1
<body>
2
    <p>
3
      My name is <b>Bob</b> and I am
4
      <i>here</i>.
5
    </p>
6
</body>

(This is why it is important to nest your elements correctly!)

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <div id="upper"><p>Hi!</p></div>
5
        <div id="lower"><p>Lo!</p></div>
6
    </body>
7
</html>

Calling getElementsByTagName on elements other than the top-level document will get only descendants of that element. document.getElementById("upper").getElementsByTagName("p") will get only the p tag containing “Hi!”.

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <div class=“item”>Item 1</div>
5
        <div class=“item lite”>Item 2</div>
6
    </body>
7
</html>

You can also get lists of items based on their CSS style class. Any object which is a member of the named class will be included in the resulting list, even if it is a member of other classes as well.

1
document.GetElementsByClassName("item")

Finding HTML elements#

Ideally you should structure your HTML to make finding elements to be altered via JavaScript as easy as possible.
- If one particular element needs to be found, give it an ID.
- If one particular set of elements are manipulated together, make them the children of an element with a particular ID, or give them the same CSS class.

Using Element Objects#

Once you have obtained an HTML element object you can store it in a variable:

1
let top = document.getElementById(“main”);

You can then call methods and properties on that object to alter the web page.
You can also access other parts of the tree based on the element. Every element has these properties:
- parentNode: the parent element
- childNodes: an array of the child elements
- firstChild, lastChild
- nextSibling, previousSibling

The DOM tree and CSS#

Although we did not mention it at the time, you can also use the DOM tree when writing CSS files.
nav {...} Affects all nav elements
nav p {...} Affects all p elements that are descendents of nav elements
nav > p {...} Affects all p elements that are children of nav elements
nav ~ p {...} Affects all p elements that are later siblings of nav elements

Selector API#

You can also use CSS style specifications to obtain sets of elements in JavaScript.
The function document.querySelectorAll can be called with a CSS-style selector as a string. It returns the list of all elements matching that selector.
For example:

1
let clickedLinks = document.querySelectorAll ("nav > a:visited");

Manipulating element objects#

Once you have an element object, you can modify the object to modify the web page.
The simplest case is changing an attribute.
For every attribute that an HTML element has or could legally have, there will be a property on the element object which you can read or write.

Accessing the document#

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <img id="menu" src="menu.jpg">
5
    </body>
6
</html>

This image has an attribute called src. If we

1
let ourMenu=document.getElementById("menu");

our menu.src will contain the string menu.jpg. The src attribute on an image specifies the filename of the image. So by changing this attribute in our script, we could alter the image, make it animate, etc.

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <form id="login">
5
            <input id="username" type=text>
6
        </form>
7
    </body>
8
</html>

This element doesn’t have a value attribute – but it is possible for an HTML input element to have one. The rules of HTML specify that this attribute holds the contents of the element – ie, the text appearing within the input box. Thus, our JavaScript program can read this as

1
document.getElementById("username").value

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <div id="one" class="moose">Moose!</div>
5
    </body>
6
</html>

You can alter the CSS attributes of an element by using its style property. For example, to change the background color of this div, we can change

1
document.getElementById("one").style.backgroundColor

Note that doing this is equivalent to inserting a style attribute in the HTML that overrides that aspect of the class; other elements of class moose will not be affected.

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <div id="one" data-price="14.99">Our new product</div>
5
    </body>
6
</html>

HTML5 allows data- attributes to be used to store arbitrary data inline in an HTML5 file. The names of data attributes must begin with data- but thereafter may be anything.
The values of these attributes can then be accessed, eg:

1
document.getElementById("one").dataset.price

Manipulating text and content#

You can change the entire content of a tag as text by altering its innerHTML property. However, this will overwrite everything inside the tag and force the browser to recalculate the DOM. It may be better to use fields.
You can also manipulate the tree to alter the page directly by calling methods on an element object.

Altering the HTML tree#

1
<body onLoad="start()">
2
    <p id="base">My name is Sir Cunningham and I am
3
    <i>very smart</i>.</p>
4
    <button onClick="change()">Change</button>
5
</body>

1
function change() {
2
    let base=document.getElementById("base");
3
    let italics=base.getElementsByTagName("i")[0]; italics.remove();
4
    let newNode=document.createElement("i");
5
    let newText=document.createTextNode("a bit of a wally, really");
6
    newNode.appendChild(newText);
7
    base.insertBefore(newNode, base.lastChild);
8
}

1
let base=document.getElementById("base");
2
let italics=base.getElementsByTagName("i")[0];
3
italics.remove();

1
let newNode=document.createElement("i");
2
let newText=document.createTextNode("a bit of a wally, really");
3
newNode.appendChild(newText);
4
base.insertBefore(newNode, base.lastChild);

音乐

音乐

The Document Object Model#

The Browser Object Model#

Document Object#

Accessing the document#

HTML tree#

Accessing the document#

Finding HTML elements#

Using Element Objects#

The DOM tree and CSS#

Selector API#

Manipulating element objects#

Accessing the document#

Manipulating text and content#

Altering the HTML tree#

支持与分享

评论区

音乐

目录

音乐

音乐

Web Application Development - DOM

The Document Object Model#

The Browser Object Model#

Document Object#

Accessing the document#

HTML tree#

Accessing the document#

Finding HTML elements#

Using Element Objects#

The DOM tree and CSS#

Selector API#

Manipulating element objects#

Accessing the document#

Manipulating text and content#

Altering the HTML tree#

支持与分享

评论区

音乐

目录