The Document Object Model
•Télécharger en tant que PPTX, PDF•
0 j'aime•751 vues
javascript training
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à The Document Object Model
Similaire à The Document Object Model (20)
Dernier
Dernier (20)
The Document Object Model
- 1. DOM The Document Object Model
- 2. Ia standard way of representing XML documents (instituted by the W3C). Was constructed to provide an intuitive way for developers to navigate an XML hierarchy. DOM is as a navigable tree, parents, children, siblings Every object in a DOM tree is a node. Each node can have a different type, such as element, text, or document What is dom?
- 3. <p><strong>Hello</strong> how are you doing?</p> Dom
- 4. Given <p><strong>Hello</strong> how are you doing?</p>. Given <p> find text “how are you doing”? Given <strong> find <p>? Given <strong> find “Hello” Given <strong> find “how are you doing?” Try Something Out My Dears.
- 5. Dom recognise line end as whitespace <html> <head> <title>Introduction to the DOM</title> </head> <body> <h1>Introduction to the DOM</h1> How if I want to get the title node? document.documentElement.firstChild.nexSibling.firstChild
- 6. function cleanWhitespace( element ) { // If no element is provided, do the whole HTML document element = element || document; // Use the first child as a starting point var cur = element.firstChild; // Go until there are no more child nodes while ( cur != null ) { // If the node is a text node, and it contains nothing but whitespace if ( cur.nodeType == 3 && ! /S/.test(cur.nodeValue) ) { // Remove the text node element.removeChild( cur ); // Otherwise, if it's an element } else if ( cur.nodeType == 1 ) { // Recurse down through the document cleanWhitespace( cur ); } cur = cur.nextSibling; // Move through the child nodes } } It is significantly slow, let say you inject a new node into document. Handling White Space in Dom
- 7. Element (nodeType = 1): This matches most elements in an XML file. For example, <li>,<a>, <p>, and <body> elements all have a nodeType of 1. Text (nodeType = 3): This matches all text segments within your document. Document (nodeType = 9): This matches the root element of a document, <html> element. nodeType Property
- 8. Simple Dom Navigation function prev( elem ) { do { elem = elem.previousSibling; } while ( elem && elem.nodeType != 1 ); return elem; } function next( elem ) { do { elem = elem.nextSibling; } while ( elem && elem.nodeType != 1 ); return elem; } function first( elem ) { elem = elem.firstChild; return elem && elem.nodeType != 1?next ( elem ) : elem; } function last( elem ) { elem = elem.lastChild; return elem && elem.nodeType != 1 ? prev ( elem ) : elem; }
- 9. getElementById(“everywhere”): This method, which can only be run on the document object, finds all elements that have an ID equal to everywhere. This is a very powerful function and is the fastest way to immediately access an element. getElementsByTagName(“li”): This method, which can be run on any element, finds all descendant elements that have a tag name of li and returns them as a NodeList (which is nearly identical to an array). Dom Methods
- 10. function id(name) { return document.getElementById(name); } function tag(name, elem) { return (elem || document).getElementsByTagName(name); } Try Yourself
- 11. Getting the Text Inside an Element // Non-Mozilla Browsers: strongElem.innerText // All platforms: strongElem.firstChild.nodeValue
- 12. // Get the innerHTML of the <strong> element // Should return "Hello" strongElem.innerHTML // Get the innerHTML of the <p> element // Should return "<strong>Hello</strong> how are you doing?" pElem.innerHTML Getting the HTML Inside an Element