Download presentation
Presentation is loading. Please wait.
1
>> JavaScript: Document Object Model
2
WHAT IS DOM?
3
Web-based Systems | Misbhauddin
4
NO HTML you write is parsed by the browser and turned into the DOM
Web-based Systems | Misbhauddin
5
Web-based Systems | Misbhauddin
6
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
7
Web-based Systems | Misbhauddin
8
Web-based Systems | Misbhauddin
YES But…………….. Web-based Systems | Misbhauddin
9
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
10
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
11
Web-based Systems | Misbhauddin
DOM Root window document Web-based Systems | Misbhauddin
12
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
13
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
14
Walking the DOM OR Traversing the DOM
15
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
16
Web-based Systems | Misbhauddin
Pre-requistie Download and open the file called dom.html Web-based Systems | Misbhauddin
17
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
18
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
19
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
20
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
21
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
22
Change property of an element in JS
23
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
24
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
25
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
Similar presentations
![>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.](/24/7400148/big_thumb.jpg ">> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.>")
