Working with DOM Alex Gklinos M.Sc
Total Page:16
File Type:pdf, Size:1020Kb
Document Object Model - Working with DOM Alex Gklinos M.Sc. in E-Commerce Teach yourself Working with DOM W3C- DOM The Document Object Model The structure of DOM Management of an HTML document with DOM nodes Relationships and management of document nodes Creating a new node Replacing a node with a new node Deleting an existing node DOM nodes management script of an HTML document by Alex Gklinos M.Sc. in E-Commerce in 6 hours Client Side Web Technologies The most cost-effective valuable e-books at w3opensource.com Copyright © w3opensource.com. All rights reserved. Document Object Model - Working with DOM Alex Gklinos M.Sc. in E-Commerce Document Object Model Working with DOM Learning Document Object Model Working with DOM you will be able to create structure web documents which will cover the browsers versions 6 and later for full compatibility with the W3C-DOM model. From the 6th version and later all main browsers of the market that are based on the W3C-DOM model offer full compatibility with this object oriented technology for the web documents structure. Knowing the DOM technology in combination with JavaScript you will able to program each HTML or XML element which DOM converts to an object - node achieving perfect performance for your web documents. Especially you will learn : How to read an HTML or XML document under DOM How a web document is structured with DOM How the document tree of nodes is created How to manage a web document through DOM How to handle the relationships among the nodes of the web document How to create a new node in an HTML document How to add the id attribute to a new node of a web document How to create contents for new nodes How to embed a new node into the body elemnt of an HTML document How to write script to create and embed a new node into the document How to replace a node with a new node How to delete an existing node How to manage the DOM nodes of an HTML document Copyright © w3opensource.com. All rights reserved. Document Object Model - Working with DOM Alex Gklinos M.Sc. in E-Commerce Chapter 1 : Introduction to Document Object Model -DOM 1.1. The Object Management Group & IDL language of W3C 1.2. W3C DOM - The Document Object Model 1.2.1. recommendation of WC3 DOM - Level 1 1.2.2. recommendation of WC3 DOM - Level 2 1.2.3. recommendation of WC3 DOM - Level 3 1.3. The Netscape DOM 1.4. The Microsoft DOM Chapter 2 : The structure of W3C-DOM 2.1. Access the web document structure through W3C-DOM 2.2. Node is the core of the DOM structure 2.3. The DOM access models of Microsoft and Netscape 2.3.1. The object document.all of Microsof 2.3.2. The object document.layers of Netscape 2.4. The Nodes technology and the family tree 2.4.1. HTML document nodes 2.4.2. XML document nodes 2.4.3. Parents, children & siblings nodes 2.4.4. .Nodes categories Chapter 3: Managing web documents with W3C-DOM 3.1. Management of an HTML document with DOM nodes 3.1.1. The id attribute in an element of an HTML document 3.2. Relationships and management of document nodes. 3.3. Creating and embedding nodes 3.3.1. Creating a new node 3.3.2. Adding the id attribute to the new node 3.3.3. Creating contents 3.3.4. Adding contents to the new node 3.3.5. Embedding the new node into the body element 3.3.6. Script to create and embed a new node into the document 3.4. Replacing a node with a new node 3.5. Deleting an existing node 3.6. DOM Management script for an HTML document Chapter 4: The node document 4.1. Properties of node d o c u m e n t 4.1.1. documentElement 4.1.2. doctype 4.1.3. readyState 4.1.4. onreadystatechange 4.1.5. ondataavailable 4.1.6. parseError 4.1.7. url 4.2. Methods of node d o c u m e n t 4.2.1. getElementbyId(id) 4.2.2. getElementsbyTagName(tag) 4.2.3. createTextNode(data) Copyright © w3opensource.com. All rights reserved. Document Object Model - Working with DOM Alex Gklinos M.Sc. in E-Commerce 4.2.4. createComment(sxolio) 4.2.5. createElement(name) 4.2.6. createProcessingInstruction(target,data) 4.2.7. createEntityReference(name) 4.2.8. createCDATA(data) 4.3. Accessing a web document through its document node Chapter 5: DOM Nodes Properties and Methods 5.1. The basic properties of nodes 5.1.2. nodeType 5.1.3. nodeName 5.1.4. nodeValue 5.1.5. attributes methods: reset() - nextNode() - getNamedItem() 5.1.6. text methods: splitText() - insertData() - appendData() replaceData() - deleteData() 5.2. Properties which define relationships among nodes 5.2.1. Relationship property of parentNode 5.2.2. Relationship property of childNodes 5.2.3. Relationship properties of firstChild, lastChild, previousSibling, nextSibling 5.3. General methods of nodes relationships appendChild(child), insertBefore(child,beforechild), replaceChild(child,old), removeChild(child), cloneNode(deep), hasChildNodes(), getNamedItem(), setNamedItem(), removeNamedItem() 5.4. Methods for properties of Element nodes setAttribute (name,value), setAttribute(attr), getAttribute(name), removeAttribute(name), setAttributeNode(attr), getAttributeNode(name), removeAttributeNode(name) 5.5. Changing URLs and the connection text through DOM 5.5.1. The logic of the DOM script 5.5.2. The full coded HTML document with the DOM script Summary Teach yourself at w3opensource Learn More Our e-Business Web Tutor Environment Copyright © w3opensource.com. All rights reserved. Document Object Model - Working with DOM Alex Gklinos M.Sc. in E-Commerce 1. Introduction to Document Object Model 1.1. The Object Management Group & IDL language of W3C The Document Object Model (DOM), has not only been created for browsers but also as a multi-language, multi-platform Application Program Interface. The ΟMG ( Object Management Group ) of W3C has developed the IDL ( Interface Definition Language ), a special language for object interfaces. OMG IDL is not used to describe objects, that is what they do, but what their properties and methods are. In this way, IDL maps the elements-objects of an Object Oriented Programming language and with the certain DOM standards in IDL, achieves support of multiple languages. So far, there is an IDL mapping of Java, C++, Ada, Smalltalk and Cobol and the respective DOM standards are available. 1.2. W3C DOM - The Document Object Model The Document Object Model (DOM), was initially created by the W3C organization aiming at the browsers' compatibility and particularly that of Netscape Navigator 3 and Internet Explorer 3. The DOM recommendation supports both HTML and XML documents. The Document Object Model - DOM allows the programmer z access & add z access & delete z access & manipulate z all styles z all elements z all attributes of a document The document can be accessed using the DOM through several programming languages that the browser supports, such as : z Java, z JavaScript / ECMAScript / JScript z and VBScript (MSIE ). DOM 1 (level-1), defines the full standardization of the document as far as objects are concerned, that is how the objects are structured and how we can refer to them. You can find the recommendation of the standards of DOM-Level-1 at the site : Copyright © w3opensource.com. All rights reserved. Document Object Model - Working with DOM Alex Gklinos M.Sc. in E-Commerce WWW.w3org/TR/REC-DOM-Level-1/ DOM provides a typical way of accessing the document objects, no matter what the programming language or the browser is, and enables us to develop DOM applications using JavaScript or other programming languages. The connection of W3C DOM with ECMAScript, which is a standardization of JavaScript, lets us develop applications that support as many browsers as possible. DOM 2 (level-2), furthermore, defines a system of event handling and the validation of the document through its declaration of its type (DTD - Document Type Declaration). You can find the recommendation of the standards of DOM-Level-2 at the site : WWW.w3org/TR/REC-DOM-Level-2/ What follows is the basic DOM terminology : 1. Νode : It's the reference to an element, its attributes or a document text. 2. Element: It represents in any reference a certain document tag. 3. Attribute : It represents a certain attribute of the document element. Browsers that offer full support of DOM are ΙE 6+ and Netscape 6+ and all others which based upon them. These browsers versions enable us to access any code, element or attribute of an HTML element through DOM Support of multiple browsers from DOM applies only to the versions of the two main browsers we mentioned above. Checking backwards compatibility that concerns older browsers not supporting DOM is left to the programmer either through browser detection or through objects the browser supports (Object Detection). 1.2.1. Recommendation of WC3 DOM - Level 1 (1st October of 1998) DOM 1 (level-1), defines the full object standards of a web document, how the document object- elements are structured and the ways that we can use to refer to them. It is implemented in XML and HTML documents. (This diagram Architecture of the core of DOM Level 1 is from W3C) Copyright © w3opensource.com. All rights reserved. Document Object Model - Working with DOM Alex Gklinos M.Sc. in E-Commerce DOM, offer us a typical access way to document objects independently from the programming language or browsers giving us the possibility to develop DOM applications through JavaScript or other programming languages.