Dom
•Transferir como PPTX, PDF•
0 gostou•398 visualizações
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (16)
Destaque
Semelhante a Dom
Semelhante a Dom (20)
Mais de baabtra.com - No. 1 supplier of quality freshers
Mais de baabtra.com - No. 1 supplier of quality freshers (20)
Último
Último (20)
Dom
- 2. Disclaimer: This presentation is prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring Partner Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd
- 4. DOM Concept • DOM makes all components of a web page accessible – HTML elements – their attributes – text • They can be created, modified and removed with JavaScript
- 5. DOM Objects • DOM components are accessible as objects or collections of objects • DOM components form a tree of nodes • relationship parent node – children nodes • document is the root node • Attributes of elements are accessible as text
- 6. DOM Tree
- 7. Accessing Nodes by id • Access to elements by their id – document.getElementById(<id>) • returns the element with id <id> – id attribute can be defined in each start tag • The preferred way to access elements
- 8. Other Access Methods • Access by elements' tag – there are typically several elements with the same tag – document.getElementsByTagName(<tag>) – e.g. • var p = document.getElementsByTagName(“p"); • Access by elements' name attribute – several elements can have the same name – document.getElementsByName(<name>) • returns the collection of elements with name <name>
- 9. Traversing DOM tree • Traversal through node properties – childNodes property – firstChild, lastChild properties – nextSibling, previousSibling properties – parentNode property
- 10. A Javascript Example Alert Datatype <html> <head></head> <title>Check Datatype</title> <script language="javascript"> function datatype() { Var data = document.getElementById("d1").value; if(isNaN(data)) { alert("string"); } else { alert("number"); } } </script> <body> <input type="text" id="d1" name="value1"/></br> <input type="button" name="Sumbit" value=“Display Datatype" onclick="datatype()"/></br> </body> </html>
- 11. If this presentation helped you, please visit our page facebook.com/baabtra and like it. Thanks in advance. www.baabtra.com | www.massbaab.com |www.baabte.com
- 12. Contact Us Emarald Mall (Big Bazar Building) Mavoor Road, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 NC Complex, Near Bus Stand Mukkam, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 Start up Village Eranakulam, Kerala, India. Email: info@baabtra.com