Html Dom Tutorial

  • November 2019
  • PDF

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA


Overview

Download & View Html Dom Tutorial as PDF for free.

More details

  • Words: 2,379
  • Pages: 11
HTML DOM Tutorial The HTML DOM is the Document Object Model for HTML. The HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate HTML documents. The HTML DOM views HTML documents as a tree structure of elements. All elements, along with their text and attributes, can be accessed and manipulated through the DOM tree. Start learning the HTML DOM now! HTML DOM DOM HOME DOM Intro DOM How To DOM Reference DOM Summary DOM Examples DOM Examples DOM Objects DOM Anchor DOM Applet DOM Area DOM Base DOM Basefont DOM Body DOM Document DOM Event DOM Form DOM Frame DOM Frameset DOM History DOM Iframe DOM Image DOM Input Button DOM Input Checkbox DOM Input File DOM Input Hidden DOM Input Password DOM Input Radio DOM Input Reset DOM Input Submit DOM Input Text

DOM Link DOM Location DOM Meta DOM Navigator DOM Object DOM Option DOM Screen DOM Select DOM Style DOM Table DOM TableData DOM TableHeader DOM TableRow DOM Textarea DOM Window The HTML Document Object Model (HTML DOM) defines a standard way for accessing and manipulating HTML documents.

What You Should Already Know Before you continue you should have a basic understanding of the following: • •

HTML / XHTML JavaScript

If you want to study these subjects first, find the tutorials on our Home page.

What is the DOM? "The W3C Document Object Model (DOM) is a platform and language neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." The W3C DOM provides a standard set of objects for representing HTML and XML documents, and a standard interface for accessing and manipulating them. The DOM is separated into different parts (Core, XML, and HTML) and different levels (DOM Level 1/2/3): • • •

Core DOM - defines a standard set of objects for any structured document XML DOM - defines a standard set of objects for XML documents HTML DOM - defines a standard set of objects for HTML documents

You can read more about the W3C DOM specifications / levels in our W3C tutorial.

What is the HTML DOM? • • • •

The HTML DOM is the Document Object Model for HTML The HTML DOM is platform and language independent The HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate HTML documents The HTML DOM is a W3C standard

The HTML DOM views HTML documents as a tree structure of elements embedded within other elements. All elements, their containing text and their attributes, can be accessed through the DOM tree. Their contents can be modified or deleted, and new elements can be created by the DOM. The elements, their text, and their attributes are all known as nodes.

We Will Use JavaScript The HTML DOM is platform and language independent. It can be used by any programming language like Java, JavaScript, and VBScript. In this tutorial we will use JavaScript.

An HTML DOM Example This coding example shows how the background color of an HTML document can be changed to yellow when a user clicks on it: <script type="text/javascript"> function ChangeColor() { document.body.bgColor="yellow" } Click on this document!

Try it yourself The example above is explained in details in the next chapter of this tutorial.

The HTML DOM defines an HTML document as a collection of objects. Objects have properties and methods. Objects can respond to events.

An HTML DOM Example This coding example shows how the background color of an HTML document can be changed to yellow when a user clicks on it: <script type="text/javascript"> function ChangeColor() { document.body.bgColor="yellow" } Click on this document!

Try it yourself

Document Objects The HTML DOM defines HTML documents as a collection of objects. The document object is the parent of all the other objects in an HTML document. The document.body object represents the element of the HTML document. The document object is the parent of the body object, and the body object is a child of the document object.

Object Properties HTML document objects can have properties (also called attributes). The document.body.bgColor property defines the background color of the body object. The statement document.body.bgColor="yellow" in the example above, sets the background color of the HTML document to yellow.

Object Events HTML document objects can respond to events. The onclick="ChangeColor()" attribute of the element in the example above, defines an action to take place when the user clicks on the document.

Functions The ChangeColor() function in the example above, is a JavaScript function. The function will be triggered (started) when a user clicks on the HTML document.

Changing Style The HTML DOM also defines a model for changing the styles of HTML objects. The coding example below shows how to obtain the same effect as the first example, by changing the style of the body object: <script type="text/javascript"> function ChangeColor() { document.body.style.background="yellow" } Click on this document!



Try it yourself

HTML DOM Objects Follow the links to learn more about the objects and their collections, properties, methods and events. Object Anchor Applet Area Base Basefont Body Button

Checkbox

Document Event

FileUpload Form Frame Frameset Hidden

History

Description Represents an HTML a element (a hyperlink) Represents an HTML applet element. The applet element is used to place executable content on a page Represents an area of an image-map. An image-map is an image with clickable regions Represents an HTML base element Represents an HTML basefont element Represents the body of the document (the HTML body) Represents a push button on an HTML form. For each instance of an HTML tag on an HTML form, a Button object is created Represents a checkbox on an HTML form. For each instance of an HTML tag on an HTML form, a Checkbox object is created Used to access all elements in a page Represents the state of an event, such as the element in which the event occurred, the state of the keyboard keys, the location of the mouse, and the state of the mouse buttons For each instance of an HTML tag on a form, a FileUpload object is created Forms are used to prompt users for input. Represents an HTML form element Represents an HTML frame Represents an HTML frameset Represents a hidden field on an HTML form. For each instance of an HTML tag on a form, a Hidden object is created A predefined object which can be accessed through the history property of the Window object. This object consists of an array of URLs. These URLs are all the URLs the user has visited within a

Iframe Image Link Location Meta Navigator Option

Password

Radio

Reset

Screen Select Style

Submit

Table TableData TableHeader TableRow Text Textarea Window

browser window Represents an HTML inline-frame Represents an HTML img element Represents an HTML link element. The link element can only be used within the tag Contains information about the current URL Represents an HTML meta element Contains information about the client browser Represents an option in a selection list on an HTML form. For each instance of an HTML

Related Documents

Html Dom Tutorial
July 2020 6
Html Dom Tutorial
November 2019 13
Javascript And Dom Html
November 2019 28
Html Dom Window Object
December 2019 47
Html Tutorial
May 2020 8
Html Tutorial
November 2019 38