Document Object Model. Overview

Size: px

Start display at page:

Download "Document Object Model. Overview"

Darcy Williams
6 years ago
Views:

1 Overview The (DOM) is a programming interface for HTML or XML documents. Models document as a tree of nodes. Nodes can contain text and other nodes. Nodes can have attributes which include style and behavior attributes. Possible to get all nodes of a particular type, specic class or id.

2 HTML Overview HTML stands for HyperText Markup Language. Structured text with explicit markup denoted within < and > delimiters. Not what-you-see-is-what-you-get (WYSIWYG) like MS word. Similar to other text markup languages like latex.

3 HTML Evolution HTML derived from IBM's Standard Generalized Markup Language SGML. HTML 1.0; uses href for hyperlinks. Support for tables, client-side image maps. Support for presentation elements like font, color. Modern HTML removes support for presentation elements; moved presentation into CSS. HTML documents are often sloppily marked up; standards explicitly dene behavior for some bad mark up.

4 HTML DTD's HTML 4.0 Never caught on. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " XHTML HTML as an XML document. Since XML must be well-formed, diculties for web authors who were used to sloppy markup. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " xhtml1-strict.dtd"> HTML 5 Modern HTML, simple DTD <!DOCTYPE html>.

5 HTML Markup A HTML document consists of a tree of HTML elements. A HTML element delimited between a start tag like <a> and an end-tag like </a>. There may be text or other tags between the start tag and end tag. The start tag may contain attributes, like <a href="submit.cgi">. Any element can have attributes with names starting with data-. Allows extensible attributes. A tag with no content can be denoted as <br />; often simply use opening tag without closing tag; so simply <br>.

6 Common HTML Attributes href id class Species absolute or relative URL to another resource. Species an ID for element. The ID must be unique across the entire document. Value consists of multiple space-separated identiers. Element class can be used for attaching styling and/or behavior to the element.

7 Page-Level HTML Elements <html> <head> <body> A single <html> element must be present enclosing entire content. Contains meta-content like <title> (displays title in browser window bar), <link> for loading CSS stylesheets, <script> for loading JavaScript les. Encloses actual document content.

8 Block-Level Markup <h1>,..., <h6> <section> <nav> <div> <p> Headings at dierent levels. Delimits a section of the document. Usually followed by a <hi> element. Used for delimiting content used for site navigation. Used for delimiting general block content. Usually used to attach style or behavior to a block using id or class attributes. Used for delimiting paragraphs.

9 List Markup Unordered Lists Denoted using <ul> <li>...</li>... </ul> Ordered Lists Denoted using <ol> <li>...</li>... </ol> Denition Lists Denoted using <dl> <dt>...</dt> <dd>...</dd>... </dl>

10 Table Markup Tables delimited using <table> tags. Rows within a table are delimited using <tr> tags. Table entries within a row are delimited using <th> tags (for heading entries) or <td> tags (for data entries). A table entry can span multiple columns (using attribute colspan) or multiple rows (using attribute rowspan).

11 Inline Markup <span> <em> <strong> <img> Simply used to delimit some content, similar to <div>. Example <span class="keyword">while</span>. Emphasized text. Example: <em>important</em>. Strongly emphasized text. Example: <strong class="alert">warning</strong> Used to embed an image Example: <img src="smile-emoji.gif">. Can also be used at the block level. <a> Hyperlinks. Example See <a href="other-doc.html>other document</a>.

12 Linking to Stylesheets <link rel="stylesheet" href="style.css"> End tag must not be present. For best eciency, include in head section.

13 Linking to JavaScript <script type="text/javascript" src="code.js"></script> End tag must be present. For best eciency, include after bulk of document body just before </body> tag.

14 Forms <form action=" method="get"> Search: <input name="q"> </form> Forms need to be set up using <form> tags. action gives URI where form should be submitted. method can be get (default) or post. Other HTTP methods are not supported. enctype used when method is post. Default is application/x-www-form-urlencoded. Use multipart/form-data if uploading les. HTML5 allows text/plain.

15 Form Controls All form controls have a name attribute which gives the name by which that control is submitted. Usually form controls have to be embedded within a <form> element, but HTML5 allows using a form attribute specifying the id of any <form> element on that page. Form controls can be disabled which makes them inactive. Captions for form controls by putting control inside a <label> element or by specifying control id in the for attribute for <label>. Can group controls together using <fieldset>.

16 Form Input Control <input type=" =TYPE"> Live example Main form input eld. TYPE traditionally had values button, checkbox, file, hidden, image, password, radio, reset, submit, text (default). HTML5 added many more variants: color for color-picker, date, datetime-local, time, month, week for date-time, , tel for contact information, number, range for numeric information, url for URLs. autocomplete attribute allows browser to ll in information previously saved by user. pattern attribute is a regex the entire value is matched against.

17 Miscellaneous Form Controls <select> <textarea> Provides a menu of options using embedded <option> elements. Specify multiple attribute to allow multiple options to be selected. Can make an option selected by setting its selected attribute. Multiline text input.

18 API to access parsed HTML/XML documents. Can be used from any language, but in browsers the only language commonly supported currently is JavaScript. Datatypes include document, element, attribute.

19 Document Current document available as document property of global window object. Properties include location (URL, giving href, protocol, hostname, port, pathname, search, hash), contenttype, body, cookie (cookie defs separated by ;). Methods include getelementsbyname(), getelementbyid(), getelementsbyclassname(). Allows updating document content dynamically Dynamic HTML (DHTML).

20 Element Represents an individual HTML element. Properties include id, classlist, innerhtml (markup within element), attributes (map NamedNodeMap of attributes). Methods include getattribute(), getattributenames(), removeattribute(), setattribute().

21 Stylesheets Current best practice is to relegate presentation to stylesheets. Can be specied using external stylesheets, using <link> elements. Can also be specied using internal stylesheets using <style> elements. Can also be specied inline for an individual element using style attribute. Precedence (in descending order) inline, internal, external.

22 Cascading Style Sheets Cascading Style Sheets (CSS) species priority rules (cascade) between dierent style declarations which may apply to a element. A CSS stylesheet consists of a set of rules. A rule consists of a selector followed by a brace delimited set of CSS declarations separated by ;. p.highlight { background-color: yellow; color: blue } Will not cover CSS declarations.

23 Simple CSS Selectors Universal Selector * selects all elements; usually used in conjunction with other selectors. HTML Element Names Simply specify name of HTML element. Examples p, a, table. Class Selectors Name of class preceeded by a.. Examples.highlight,.important. ID Selectors [attr] ID of element preceeded by #. Examples include #form1, #table1. Note that ID must be unique in document. Selects all elements having attribute attr. Examples [href],

24 Combining Selectors Constrain Descendent Child Can follow selector by class or id selectors (without spaces). p.chemical matches p elements having class chemical. Simply write selectors adjacent to each other separated by a space. Example:.chemical p selects all p elements which are descendents of a element which has class chemical. Write selectors separated by a >. Example:.chemical > p selects all p elements which are direct children of a element which has class chemical.

25 Combining Selectors Continued Sibling Write selectors separated by a ~. Example:.chemical ~ p selects all p elements which follow (not necessarily immediately) a element which has class chemical. Adjacent Sibling Write selectors separated by a +. Example:.chemical + p selects all p elements which immediately follow a element which has class chemical.

26 Unobstrusive JavaScript Dierent technologies used for dierent concerns: Content HTML used for content. Presentation CSS used for styling. Behavior JavaScript used to specify behavior. Do not mix technologies. Best practice is to spit out into separate *.html, *.css and *.js les. Modern technology blurs lines between concerns; CSS 3 contains support for visual behavior traditionally achieved using JavaScript. Nevertheless it remains a good organizational principle.

27 Bad Code In doc.html: <a href="submit.cgi" onclick="checkform(this)" style="font-weight: bold"> Submit </a> Uses CSS and JavaScript code within attributes of HTML elements. Maintaining le will require content, presentational and programming skills.

28 Better Code 1 In doc.html maintained by content specialist or a Content Management System (CMS):`<a href="submit.cgi" id="submit">submit</a>`. 2 In doc.css maintained by web designer #submit { font-weight: bold; }. 3 In doc.js maintained by front-end programmer: document. getelementbyid('submit').onclick(checkform(this)). Separate concerns, separate les, separate specialists. doc.html will need to reference doc.css stylesheet and doc.js. In practice, single.css stylesheet,.js le shared by multiple html documents.

HTML. HTML Evolution

HTML. HTML Evolution Overview stands for HyperText Markup Language. Structured text with explicit markup denoted within < and > delimiters. Not what-you-see-is-what-you-get (WYSIWYG) like MS word. Similar to other text markup