DOM and HTML Embedded Content Elements

DOM and HTML Embedded Content – Part 1

Foreword: In this part of the series, I talk about the Document Object Model Interface and HTML Embedded Content Elements.

By: Chrysanthus Date Published: 22 Mar 2016

Introduction

This is part 1 of my series, DOM and HTML Embedded Content. In this part of the series, I talk about the Document Object Model Interface and HTML Embedded Content Elements.

Pre-Knowledge
At the bottom of this page, you will find links to the deferent series, you should have read before coming here, to better understand this one.

Embedded Content
Embedded content is content that imports another resource into the document, or content from another vocabulary (e.g. Mathematical Markup Language) that becomes inserted into the document.

Embedded content elements are: audio, canvas, embed, iframe, img, math, object, svg, and video. In this part of the series, I talk about all these elements except canvas, math and svg.

The img Element
This element has the following HTML content attributes and meanings:

Global attributes
alt - Replacement text for use when images are not available
src - Address of the resource
crossorigin - How the element handles crossorigin requests
usemap - Name of image map to use
ismap - Whether the image is a server-side image map
width - Horizontal dimension
height - Vertical dimension

I explained these meanings in the HTML course (Major in Website Design - below), so I will not explain them here.

The img element has the following DOM interface (see explanation below):

[NamedConstructor=Image(optional unsigned long width, optional unsigned long height)]
interface HTMLImageElement : HTMLElement {
           attribute DOMString alt;
           attribute DOMString src;

           attribute DOMString crossOrigin;
           attribute DOMString useMap;
           attribute boolean isMap;
           attribute unsigned long width;
           attribute unsigned long height;
  readonly attribute unsigned long naturalWidth;
  readonly attribute unsigned long naturalHeight;
  readonly attribute boolean complete;
};

The interface alt, src, crossOrigin, useMap, isMap, width, and height attributes are the same as the HTML attributes. The value of each of them can be gotten (read), or set (changed), using ECMAScript.

The naturalWidth and naturalHeight attributes can only be gotten (read); their values cannot be changed. These hold the intrinsic width and height of the image at the server. Any DOM interface can provide additional attributes for an element. In other words, you can only obtain the intrinsic width and height from the DOM interface and not from the HTML content attributes; this is because the HTML content attribute set, does not include the naturalWidth and naturalHeight attributes.

The readonly complete attribute. This readonly attribute returns true if the processing (downloading and displaying) of the image is complete. This does not necessarily mean that the image is available. The image may be absent, broken or completely displayed (or being displayed). The value of true means the technical processes is fairly complete or complete. The value of false means the image is absent or the process failed, and you cannot have the image or part of the image.

A readonly attribute, means the value can only be read (gotten), it cannot be set (changed).

Read through the above interface if you have not already done so. The previous series explain how to code the HTML attributes or the DOM interface attributes.

Non-Normative DOM img Interface
Non-normative means non-standard.

You can construct an image that does not exist with the syntax:

image = new Image( [ width [, height ] ] )

as in,

      image = new Image(100, 75);

where the units are in px. In the constructor, [, height ] is optional, nested in the syntax [ width [, height ] ], which is also optional. You can then go on to download an image from the server to be displayed as image, with a statement like,

    image.src = "smallimg.jpg";

where smallimg.jpg is the image file in the same directory as the HTML file (and script).

To display the image in the body element you would type:

    document.body.appendChild(image);

You can go on and continue to give the image an ID, with a statement like,

    image.id="I1";

In ECMAScript the ID value has to be in quotes (it does not necessarily have to be in quotes in the HTML tag). Read and try the following code:

    <script type="text/ecmascript">

      image = new Image(100, 75);
      image.src = "smallimg.jpg";
      document.body.appendChild(image);

    </script>

Now, image is a variable that can be any name. It is a reference, which is the same as the one gotten from an HTML tag image with,

    ref = document.getElementById('I1');

The iframe Element
The iframe element represents an HTML document. iframe elements can be nested. The HTML iframe content attributes are:

Global attributes
src - Address of the resource
srcdoc - A document to render in the iframe
name - Name of nested browsing context
sandbox - Security rules for nested content
width - Horizontal dimension
height - Vertical dimension

I explained these meanings in the HTML course (Major in Website Design - below), so I will not explain them here.

The iframe element has the following DOM interface (explanation below):

interface HTMLIFrameElement : HTMLElement
    {
           attribute DOMString src;
           attribute DOMString srcdoc;
           attribute DOMString name;
  [PutForwards=value] readonly attribute DOMSettableTokenList sandbox;
           attribute DOMString width;
           attribute DOMString height;
      readonly attribute Document? contentDocument;
      readonly attribute WindowProxy? contentWindow;
    };

The interface src, srcdoc, name, width and height attributes are the same as the HTML attributes. The value of each of them can be gotten (read), or set (changed), using ECMAScript.

The sandbox attribute is a readonly attribute with a difference. It can return an array of the values of the sandbox attribute; you can still go ahead and change the values, but the effect on the page may not take place immediately. Note “[PutForwards=value]” in front of the interface attribute. Read and try the following code:

<!DOCTYPE html>
<html>
<head><title>Sample</title></head>
<body>

    <iframe sandbox="allow-same-origin allow-forms allow-scripts"
        src="http://maps.example.com/embedded.html" id=I1></iframe>
    <br>

    <script type="text/ecmascript">

        list = document.getElementById('I1').sandbox;
        document.write(list + '<br>');

        document.getElementById('I1').sandbox = "allow-popups allow-top-navigation allow-pointer-lock";
        arr = document.getElementById('I1').sandbox;
        document.write(arr);

    </script>

</body>
</html>

The output is:

allow-same-origin allow-forms allow-scripts
allow-popups allow-top-navigation allow-pointer-lock.

I will address the interface attributes, contentDocument and contentWindow in a different series.

The embed Element
The embed element provides an integration point for an external (typically non-HTML) application or interactive content. The HTML content attributes for the emded element are:

Global attributes
src - Address of the resource
type - Type of embedded resource
width - Horizontal dimension
height- Vertical dimension

I explained these meanings in the HTML course (Major in Website Design - below), so I will not explain them here.

The embed element has the following DOM interface (explanation below):

interface HTMLEmbedElement : HTMLElement {
           attribute DOMString src;
           attribute DOMString type;
           attribute DOMString width;
           attribute DOMString height;
  legacycaller any (any... arguments);
};

The interface src, type, width and height attributes are the same as the HTML attributes. The value of each of them can be gotten (read), or set (changed), using ECMAScript.

The object Element
The object element can represent an external resource, which, depending on the type of the resource, will either be treated as an image, as a nested document, or as an external resource to be processed by a plugin.

The HTML content attributes for the object element are:

Global attributes
data - Address of the resource
type - Type of embedded resource
typemustmatch - Whether the type attribute and the Content-Type value need to match for the resource to be used
name - Name of nested browsing context
usemap - Name of image map to use
form - Associates the control with a form element
width - Horizontal dimension
height - Vertical dimension

I explained these meanings in the HTML course (Major in Website Design - below), so I will not explain them here.

The object element has the following DOM interface (explanation below):

interface HTMLObjectElement : HTMLElement {
           attribute DOMString data;
           attribute DOMString type;
           attribute boolean typeMustMatch;
           attribute DOMString name;
           attribute DOMString useMap;
  readonly attribute HTMLFormElement? form;
           attribute DOMString width;
           attribute DOMString height;
  readonly attribute Document? contentDocument;
  readonly attribute WindowProxy? contentWindow;

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(DOMString error);

  legacycaller any (any... arguments);
};

The interface data, type, typeMustMatch, name, useMap, form, width and height attributes are the same as the HTML attributes. The value of each of them can be gotten (read), or set (changed), using ECMAScript.

I will address the interface attributes, contentDocument and contentWindow later. The interface validation attributes and functions are to do with Form controls. I will address these later, in the series for HTML Form.

The param Element
The param element defines parameters for plugins invoked by object elements. It is used as a child (nested element) of the object element.

HTML content attributes of the param element are:

Global attributes
name - Name of parameter
value - Value of parameter

The param element has the following DOM interface:

interface HTMLParamElement : HTMLElement {
           attribute DOMString name;
           attribute DOMString value;
};

The name and value attributes of the interface are the same as the name and value content attributes in HTML. They can be gotten or set.

The Audio Element
The audio element represents a sound (or audio) stream. The HTML content attributes for the audio element are:

Global attributes
src - Address of the resource
crossorigin - How the element handles crossorigin requests
preload - Hints how much buffering the media resource will likely need
autoplay - Hint that the media resource can be started automatically when the page is loaded
mediagroup - Groups media elements together with an implicit MediaController
loop - Whether to loop the media resource
muted - Whether to mute the media resource by default
controls - Show user agent controls

The audio element has the following DOM interface:

[NamedConstructor=Audio(optional DOMString src)]
interface HTMLAudioElement : HTMLMediaElement {};

The interface just extends the HTMLMediaElement interface with no extra attribute. I will talk about HTMLMediaElement later.

You can construct an audio element with the following non-normative syntax:

    audio = new Audio( [ url ] )

This returns a new audio element, with the src attribute set to the value passed in the argument (url). To implement the element, you will need added statement like:

      document.body.appendChild(audio);

where audio is the reference.

The Video Element
A video element is used for playing videos (or movies), and audio files with captions. The HTML content attributes for the video element are:

Global attributes
src - Address of the resource
crossorigin - How the element handles crossorigin requests
poster - Poster frame to show prior to video playback
preload - Hints how much buffering the media resource will likely need
autoplay - Hint that the media resource can be started automatically when the page is loaded
mediagroup - Groups media elements together with an implicit MediaController
loop - Whether to loop the media resource
muted - Whether to mute the media resource by default
controls - Show user agent controls
width - Horizontal dimension
height - Vertical dimension

The DOM interface for the video element is:

interface HTMLVideoElement : HTMLMediaElement {
           attribute unsigned long width;
           attribute unsigned long height;
  readonly attribute unsigned long videoWidth;
  readonly attribute unsigned long videoHeight;
           attribute DOMString poster;
};

The width, height and poster attributes for the DOM interface have the same meanings as for the HTML content attributes. The videoWidth and videoHeight attributes are for the intrinsic video width and height of the video at the server. These two can only be accessed (gotten) using the DOM interface, since the HTML content attribute does not have them.

The source Element
The source element allows authors (programmers) to specify multiple alternative media resources (files) for media elements. A media element is an audio or video element. The source element can only be a child to an audio or video element. The HTML content attributes for the source element are:

Global attributes
src - Address of the resource
type - Type of embedded resource

The DOM interface attributes for the source element are:

interface HTMLSourceElement : HTMLElement {
           attribute DOMString src;
           attribute DOMString type;
           attribute DOMString media;
};

I will talk about the media attribute later.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

DOM and HTML Embedded Content Elements

DOM and HTML Embedded Content – Part 1

Introduction

Related Links

Comments