The Document Object Model
•Als PPTX, PDF herunterladen•
0 gefällt mir•751 views
javascript training
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie The Document Object Model
Ähnlich wie The Document Object Model (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (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