Basics of Document Object Model www. akvelon. com
Basics of DOM What is the DOM? • Document Object Model • Hierarchy, tree • HTML Tags + JS www. akvelon. com Slide 2 of 14
Basics of DOM Hypertext Markup Language tags Properties: • Starts with <*>, ends with </*> (example: <div>text</div>) • Some tags don’t have ending tags (example: <br/>, <img/>) NOTE: <script src=“path”> tag should be always closed by </script>! • • • Custom tags are ignored by browsers (example <custom. Tag>) Case insensitive (<DIV> and <div> the same). World Wide Web Consortium – W 3 C (http: //ww. w 3 c. org) Audio, video, third parties to create plug-ins Structure first, not presentation! www. akvelon. com Slide 3 of 14
Basics of DOM ■ <a> Hyperlink ■ <abbr> Abbreviation ■ <address> Contact information ■ <area> Image map region ■ <article> Independent section ■ <aside> Auxiliary section ■ <audio> Audio stream ■ <b> Bold text ■ <base> Document base URI ■ <bb> Browser button ■ <bdo> Bi-directional text override ■ <blockquote> Long quotation ■ <body> Main content ■ Line break ■ <button> Push button control ■ <canvas> Bitmap canvas ■ <caption> Table caption ■ <cite> Citation ■ <code> Code fragment ■ <col> Table column ■ <colgroup> Table column group ■ <command> Command that a user can invoke ■ <datagrid> Interactive tree, list, or tabular data ■ <datalist> Predefined control values ■ <dd> Definition description ■ <del> Deletion ■ <details> Additional information ■ <dfn> Defining instance of a term www. akvelon. com Slide 4 of 14
Basics of DOM ■ <dialog> Conversation ■ <div> Generic division ■ <dl> Description list ■ <dt> Description term ■ <em> Stress emphasis ■ <embed> Embedded application ■ <fieldset> Form control group ■ <figure> A figure with a caption ■ <footer> Section footer ■ <form> Form ■ <h 1> Heading level 1 ■ <h 2> Heading level 2 ■ <h 3> Heading level 3 ■ <h 4> Heading level 4 ■ <h 5> Heading level 5 ■ <h 6> Heading level 6 ■ <head> Document head ■ <header> Section header ■ <hr> Separator ■ <html> Document root ■ <i> Italic text ■ <iframe> Inline frame ■ <img> Image ■ <input> Form control ■ <ins> Insertion ■ <kbd> User input ■ <label> Form control label ■ <legend> Explanatory title or caption ■ <li> List item www. akvelon. com Slide 5 of 14
Basics of DOM ■ <link> Link to resources ■ <map> Client-side image map ■ <mark> Marked or highlighted text ■ <menu> Command menu ■ <meta> Metadata ■ <meter> Scalar measurement ■ <nav> Navigation ■ <noscript> Alternative content for no script support ■ <object> Generic embedded resource ■ <ol> Ordered list ■ <optgroup> Option group ■ <option> Selection choice ■ <output> Output control ■ <p> Paragraph ■ <param> Plug-in parameter ■ <pre> Preformatted text ■ <progress> Progress of a task ■ <q> Inline quotation ■ <rp> Ruby parenthesis ■ <rt> Ruby text ■ <ruby> Ruby annotation ■ <samp> Sample output ■ <script> Linked or embedded script ■ <section> Document section ■ <select> Selection control ■ <small> Small print ■ <source> Media resource ■ <span> Generic inline container www. akvelon. com Slide 6 of 14
Basics of DOM ■ <strong> Strong importance ■ <style> Embedded style sheet ■ <sub> Subscript ■ <sup> Superscript ■ <table> Table ■ <tbody> Table body ■ <td> Table cell ■ <textarea> Multiline text control ■ <tfoot> Table footer ■ <th> Table header cell ■ <thead> Table head ■ <time> Date and/or time ■ <title> Document title ■ <tr> Table row ■ <ul> Unordered list ■ <var> Variable ■ <video> Video or movie ■ <wbr> Optionally break up a large word at this element www. akvelon. com Slide 7 of 14
Basics of DOM <html> <head> <title> О лосях </title> </head> <body> Правда о лосях. <ol> <li>Лось - животное хитрое</li> <li>. . И коварное</li> </ol> </body> </html> NOTE: “normalized” term – white spaces different behavior in different browsers www. akvelon. com Slide 8 of 14
Basics of DOM Normalization in different browsers • IE – no extra html tags • FF – one html tag for each empty text • Opera - one html tag for each empty text + one more Check link www. akvelon. com Slide 9 of 14
Basics of DOM Element attributes <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01 Transitional//EN" "http: //www. w 3. org/TR/html 4/loose. dtd"> <html> <head> <title>Документ</title> </head> <body> <div id="data. Keeper">Data</div> <ul> <li style="background-color: red">Осторожно</li> <li class="info">Информация</li> </ul> <div id="footer">Made in Russia © </div> </body> </html> www. akvelon. com Slide 10 of 14
Basics of DOM Boolean attributes ■ checked – used with the check box and option button to indicate selection ■ selected – used to indicate which option is selected in a drop-down or select list ■ disabled – used to disable input, text area, button, select, option, or opt group ■ readonly – used to prevent the user from typing data into a text box or password Three ways of use: <input type="checkbox" name="fruit" value="Apple" checked /> <input type="checkbox" name="fruit" value="Apple" checked='' /> <input type="checkbox" name="fruit" value="Apple" checked='checked' /> www. akvelon. com Slide 11 of 14
Basics of DOM Global attributes ■ accesskey Enables you to either specify a linked. shortcut key to which to jump or to set focus ■ hidden Specifies that an element is not to an element. As a rule, you shouldn’t use relevant. this because it can cause problems with other ■ id Specifies a unique id for an element. ■ lang Specifies the language (English, French, technologies. ■ class Used with CSS to specify one or more German, and so on) of the element’s content. class names for an element. ■ contenteditable Specifies that the content ■ spellcheck Used with the lang attribute to enable you to indicate whether the element within the tag can be edited. is to have its spelling and grammar checked. ■ contextmenu User can right-click an ■ style Specifies an inline CSS style for the element to display a menu. ■ dir Enables you to specify left-to-right or element. right-to-left text direction for the content in ■ tabindex Sets the tabbing order of the element. an element. ■ draggable Specifies whether an element is ■ title Provides extra information about the element. draggable. ■ dropzone Enables you to specify the NOTE: currently any attributes could be broken behavior of the dragged data when it’s or unsupported yet dropped. Data can be copied, moved, or www. akvelon. com Slide 12 of 14
Basics of DOM Void elements ■ <area> Defines a hyperlink area with some forms that is used to encrypt data text in an image map that will be passed to the server ■ <base> Specifies the document’s base URL or ■ <meta> Defines metadata that describes the target for all relative URLs in the HTML document ■ <param> Defines a parameter for an object ■ Represents a line break ■ <source> Defines a multimedia resource for a ■ <col> Defines the properties of one or more <video> or <audio> element columns within a <colgroup> element ■ <wbr> Optionally breaks up a large word at ■ <command> Defines a command that can be this element invoked by a user ■ <hr> Specifies a thematic change in content ■ <img> Defines an image ■ <input> Defines a typed data field that allows the user to edit the data ■ <link> Defines a relationship between a document and an external resource such as a cascading style sheet ■ <keygen> Defines a key-pair generator control www. akvelon. com Slide 13 of 14
Basics of DOM HTML comments and special symbols Starts from “<!--” and ends by “-->” <!-- My super document! --> <html> <head> <title>Документ</title> </head> <!– Body of it --> <body> <div id="data. Keeper">Data</div> <!-- Always keep bottom of the document --> <div id="footer">Made in Russia © </div> <!-- Nonbreaking space --> It will be always one line! </body> </html> NOTE: conditional comments in IE: <!--[if IE 8]> <html class="no-js ie 8" lang="en"> <![endif]--> www. akvelon. com Slide 14 of 14
Basics of DOM Hello Java. Script! • Document the parent node • Each element is object • Each object can has children and parent How to access an element? • document. Element – top element of document (html) • document. body – element <body> (should be represented!) For copy: alert(document. Element); alert(document. body); www. akvelon. com Slide 15 of 14
Basics of DOM element types • There are 12 types • Node. ELEMENT_NODE has value 1. The most popular type (HTML tags) • Node. TEXT_NODE has value 3 (text elements) www. akvelon. com Slide 16 of 14
Basics of DOM Let’s pass by children and return back! • Array of children – elem. child. Nodes for(var i=0; i<document. body. child. Nodes. length; i++) { var child = document. body. child. Nodes[i]; alert(child. tag. Name); } • first. Child and last. Child properties • parent. Node – point to parent node! • previous. Sibling and next. Sibling – nearest nodes www. akvelon. com Slide 17 of 14
Basics of DOM www. akvelon. com Slide 18 of 14
Basics of DOM Element properties Write/Read, read-only, writable during element creation(only in IE) Few important properties: • tag. Name (read-only) • Style (example: element. style. z. Index = 1000) NOTE: elements with “–” symbol should start with uppercase (z-index = z. Index) • inner. HTML – dynamic html changing document. get. Element. By. Id('footer'). inner. HTML = '<h 1>Bye!</h 1> <p>See ya</p>' • class. Name, but “class” attribute • onclick, onkeypress, onfocus. . . www. akvelon. com Slide 19 of 14
Basics of DOM Properties vs Attributes • • Attributes always have string value Properties could be any type even object There are custom attributes and properties There are special methods for manipulating attributes: § set. Attribute(name, value) § get. Attribute(name) § has. Attribute(name) § remove. Attribute(name) • Attribute’s name is case independent, Property’s name not • There is synchronization between Attr and Properties! (case sensitive, value cannot be function/object, attr name may be any) www. akvelon. com Slide 20 of 14
Basics of DOM Search an element • get. Element. By. Id document. get. Element. By. Id('data. Keeper'). style. color = 'blue' • get. Elements. By. Tag. Name document. get. Elements. By. Tag. Name('DIV')[0]. get. Elements. By. Tag. Name('LI') elem. get. Elements. By. Tag. Name('*') – get all children • get. Elements. By. Name document. get. Elements. By. Name(‘name’)[0] • get. Elements. By. Class. Name document. get. Elements. By. Class. Name('class-name-1 class-name-2'); www. akvelon. com Slide 21 of 14
Basics of DOM Manipulating document elements • Create new element (after that you can add any attributes to element) var new. Div = document. create. Element('div'); new. Div. style. width = 300; • Add element to DOM with append. Child or insert. Before methods (insert. After doesn’t exist) document. append. Child(new. Div); parent. Elem. insert. Before(new. Elem, target) • Remove an element elem. parent. Node. remove. Child(elem) www. akvelon. com Slide 22 of 14
Basics of DOM More Information: • Email: denis. golovko@akvelon. com • http: //javascript. ru/tutorial/dom • Johnson G. Programming In HTML 5 With Java. Script And CSS 3: Training Guide Thank you! www. akvelon. com Slide 23 of 14
