Document Object Model (DOM) JavaScript manipulation of the DOM

DOM Tree Some text Go.

DOM Tree Title box text Not in paragraph

DOM Tree Title This is italic bold text.

DOM Tree Link Not a link

JavaScript – document object JavaScript code is always executed in a web browser in the context to a rendered document. – In English, JavaScript is inside a web page (XHTML document). The document object refers to the XHTML document itself. var x = document.FunctionName(); – x is usually a “node” object. – or a text object.

How to manipulate content Title Paragraph Heading Another one var d = document.getElementById(‘content’); var h2s = d.getElementByTagName(‘h2’); var secondH2 = h2s[1]; var x = secondH2.innerHTML; // x would store “Another one” secondH2. innerHTML= “New one”; // The line above actually changes the live displayed web page.

How to manipulate attributes Home var h = document.getElementByID(‘homelink’).getAttribute(‘href’); alert(h); var x = document.getElementByID(‘homelink’); x.setAttribute(‘href’, ‘ x.setAttribute(‘alt’, ‘Siena College’);

Creating Document structure x = document.createElement(‘body’) – makes a new element/tag – x.createTextNode(‘hi’) – add text inside a tag – hi

Append x.appendChild(document.createElement(‘h2’)) – hi x.insertBefore(document.createElement(‘h1’)) – hi Also, – removeChild – must identify the node by using getElementByID or TagName – cloneChild – must identify the node, can copy the entire tree below the node.