>> JavaScript: Document Object Model
WHAT IS DOM?
Web-based Systems | Misbhauddin
NO HTML you write is parsed by the browser and turned into the DOM Web-based Systems | Misbhauddin
Web-based Systems | Misbhauddin
Web-based Systems | Misbhauddin NO View Source just shows you the HTML that makes up that page. It's probably the exact HTML that you wrote Web-based Systems | Misbhauddin
Web-based Systems | Misbhauddin
Web-based Systems | Misbhauddin YES But…………….. Web-based Systems | Misbhauddin
When is the DOM different than the HTML? There are mistakes in your HTML and the browser has fixed them I told you browsers are intelligent Example Try creating a table element without the thead and tbody See what happens Web-based Systems | Misbhauddin
Document Object Model (DOM) <p title="The test paragraph">This is a sample of some <b>HTML you might <br>have</b> in your document</p> p title ChildNodes attributes This is a sample of some The test paragraph b in your document ChildNodes HTML you might have br Web-based Systems | Misbhauddin
Web-based Systems | Misbhauddin DOM Root window document Web-based Systems | Misbhauddin
Web-based Systems | Misbhauddin Parts of the DOM tree Known as nodes Different types of nodes Element Nodes P, BR, B Text Nodes Text strings inside of an element Collections ChildNodes, attributes Attribute Nodes Attribute name and value Web-based Systems | Misbhauddin
Web-based Systems | Misbhauddin White Space Nodes Whitespace symbols in the HTML are recognized as the text and become text nodes If you do not want any whitespace nodes <!DOCTYPE HTML><html><head><title>Title</title></head><body></body></html> Web-based Systems | Misbhauddin
Walking the DOM OR Traversing the DOM
Web-based Systems | Misbhauddin Select a Node Three ways Using an ID Using the Tag Name (Element Name) Using the Class Name (old) Using the Name Web-based Systems | Misbhauddin
Web-based Systems | Misbhauddin Pre-requistie Download and open the file called dom.html Web-based Systems | Misbhauddin
Web-based Systems | Misbhauddin Get Element By ID document.getElementById() Returns one element WHY? Try Now Select the element with id = “test” in the given sample Web-based Systems | Misbhauddin
Get Elements By ClassName document.getElementsByClassName() Returns an array. Why? Try Now Select the element with class = “hidden” in the given sample Web-based Systems | Misbhauddin
Get Elements By Tag Name document.getElementsByTagName() Returns an array. Why? Try Now Select all the paragraph elements in the given sample document Web-based Systems | Misbhauddin
Web-based Systems | Misbhauddin Get Elements By Name document.getElementsByName() Returns an array. Why? Try Now Select the element with the name = “gender” Web-based Systems | Misbhauddin
Web-based Systems | Misbhauddin What Now? I have selected all the elements, now what You can change the properties (CSS) of the element You can get the value of the element (form) You can set the value of the element You can add content inside the element You can add, delete or update element / attributes / text Web-based Systems | Misbhauddin
Change property of an element in JS
Web-based Systems | Misbhauddin Two ways Using the style property (can only be used for CSS Styles) First select the element Use the property var a = document.getElementBy………. a.style.propName = newValue; Using the setAttribute Method First select the element Use the method var a = document.getElementBy………. a.setAttribute(‘attributeName’,newValue); Web-based Systems | Misbhauddin
Using Properties from CSS There are some properties with ‘-’ Example border-right, font-size, text-align You cannot use a ‘-’ in JavaScript when using the style Use Camel Case It means, the first letter after the ‘-’ is made capital and the ‘-’ is removed border-right -----> borderRight text-align --------> text-align Web-based Systems | Misbhauddin
Web-based Systems | Misbhauddin Do Now Change the color of the 2nd paragraph to “red” Change the element with id=“test” to font size as 50px Display None for the element with name = “gender” Web-based Systems | Misbhauddin