DOM and DOM Manipulation

  • View
    56

  • Download
    0

Embed Size (px)

DESCRIPTION

DOM and DOM Manipulation. Doncho Minkov. Telerik Software Academy. http://academy.telerik.com. Technical Trainer. http://minkov.it. Table of Contents. Document Object Model (DOM) Querying the DOM Traversing DOM Events The DOM Event Model Common DOM Events Debugging in JavaScript. - PowerPoint PPT Presentation

Text of DOM and DOM Manipulation

DOM and DOM Manipulation

DOM and DOM ManipulationDoncho MinkovTelerik Software Academyhttp://academy.telerik.com Technical Trainerhttp://minkov.it , , SEO - , HTML, CSS, JavaScript, Photoshop ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC " cloud "BG Coder - - online judge , " " , ASP.NET - , , C#, .NET, ASP.NET iPhone, Android, WP7, PhoneGapfree C# book, C#, Java, C# - - C# , , Table of ContentsDocument Object Model (DOM)Querying the DOMTraversingDOM EventsThe DOM Event ModelCommon DOM EventsDebugging in JavaScript , , SEO - , HTML, CSS, JavaScript, Photoshop ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC " cloud "BG Coder - - online judge , " " , ASP.NET - , , C#, .NET, ASP.NET iPhone, Android, WP7, PhoneGapfree C# book, C#, Java, C# - - C# , ,

Document Object Model (DOM) , , SEO - , HTML, CSS, JavaScript, Photoshop ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC " cloud "BG Coder - - online judge , " " , ASP.NET - , , C#, .NET, ASP.NET iPhone, Android, WP7, PhoneGapfree C# book, C#, Java, C# - - C# , , Document Object ModelThe Document Object Model is an API for HTML and XML documentsProvides a structural representation of the documentEnables developers to modify the content and visual presentation of a web pageConnects web pages to scripts and programming languages , , SEO - , HTML, CSS, JavaScript, Photoshop ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC " cloud "BG Coder - - online judge , " " , ASP.NET - , , C#, .NET, ASP.NET iPhone, Android, WP7, PhoneGapfree C# book, C#, Java, C# - - C# , , Document Object Model (2)The Document Object Model consists of many objects to manipulate a web pageAll the properties, methods and events are organized into objectsThose objects are accessible through programming languages and scriptsHow to use the DOM?Write JavaScript to interact with the DOMJavaScript uses the DOM API (not written in JS) , , SEO - , HTML, CSS, JavaScript, Photoshop ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC " cloud "BG Coder - - online judge , " " , ASP.NET - , , C#, .NET, ASP.NET iPhone, Android, WP7, PhoneGapfree C# book, C#, Java, C# - - C# , , Querying the DOM , , SEO - , HTML, CSS, JavaScript, Photoshop ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC " cloud "BG Coder - - online judge , " " , ASP.NET - , , C#, .NET, ASP.NET iPhone, Android, WP7, PhoneGapfree C# book, C#, Java, C# - - C# , , Querying the DOMQuerying the DOM is simply approaches to interact with DOM objects (HTML elements)Three general approaches:Query a specific elementQuery a collection of elementsBuilt in collectionsSome methods are applied to document onlySome could be applied to elements7 , , SEO - , HTML, CSS, JavaScript, Photoshop ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC " cloud "BG Coder - - online judge , " " , ASP.NET - , , C#, .NET, ASP.NET iPhone, Android, WP7, PhoneGapfree C# book, C#, Java, C# - - C# , , Querying the DOM (2)8var header = document.getElementById("header");// => DOMElement or Null if not found

var inputs = document.getElementsByName( "choises" );// => NodeList with 0 or more elements

var divs = document.getElementsByTagName( "div" );// => NodeList with 0 or more elements

var popups = document.getElementsByClassName( "popup" );// => NodeList with 0 or more elements

var links = document.links;// => NodeList with 0 or more elements

var header1 = document.querySelector( "#header" );var popups2 = document.querySelectorAll( ".popup" ); , , SEO - , HTML, CSS, JavaScript, Photoshop ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC " cloud "BG Coder - - online judge , " " , ASP.NET - , , C#, .NET, ASP.NET iPhone, Android, WP7, PhoneGapfree C# book, C#, Java, C# - - C# , , Querying the DOM (3)Some methods are applied to document onlySome could be applied to elements9var section = document.getElementById("section");

var divs = section.getElementsByTagName("div");

var popups = section.getElementsByClassName("popup");

var header = section.querySelector("#header");var popups2 = section.querySelectorAll(".popup"); , , SEO - , HTML, CSS, JavaScript, Photoshop ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC " cloud "BG Coder - - online judge , " " , ASP.NET - , , C#, .NET, ASP.NET iPhone, Android, WP7, PhoneGapfree C# book, C#, Java, C# - - C# , , Querying the DOMLive Demo , , SEO - , HTML, CSS, JavaScript, Photoshop ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC " cloud "BG Coder - - online judge , " " , ASP.NET - , , C#, .NET, ASP.NET iPhone, Android, WP7, PhoneGapfree C# book, C#, Java, C# - - C# , , Traversing the DOM , , SEO - , HTML, CSS, JavaScript, Photoshop ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC " cloud "BG Coder - - online judge , " " , ASP.NET - , , C#, .NET, ASP.NET iPhone, Android, WP7, PhoneGapfree C# book, C#, Java, C# - - C# , , Traversing the DOMYou are somewhere in the DOM and you need to get elsewhereMethods for adjacent nodesMethods for children collection12// Going UPnode.parentNode // parent node or null if node is document// Going DOWNnode.childNodes // collection of all the child nodesnode.fistChild // first node or null if nonenode.lastChild // last node or null if none// Going LEFTnode.previousSibling // preceding node or null if none// Going RIGHTnode.nextSibling // succeeding node or null if none , , SEO - , HTML, CSS, JavaScript, Photoshop ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC " cloud "BG Coder - - online judge , " " , ASP.NET - , , C#, .NET, ASP.NET iPhone, Android, WP7, PhoneGapfree C# book, C#, Java, C# - - C# , , Accessing Elements through the DOM Tree ExampleWarning: may not return what you expected due to Browser differences13var el = document.getElementById('div-tag');alert (el.childNodes[0].value);alert (el.childNodes[1]. getElementsByTagName('span').id);

test span

accessing-elements-demo.html , , SEO - , HTML, CSS, JavaScript, Photoshop ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC " cloud "BG Coder - - online judge , " " , ASP.NET - , , C#, .NET, ASP.NET iPhone, Android, WP7, PhoneGapfree C# book, C#, Java, C# - - C# , , Traversing the DOMLive Demo , , SEO - , HTML, CSS, JavaScript, Photoshop ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC " cloud "BG Coder - - online judge , " " , ASP.NET - , , C#, .NET, ASP.NET iPhone, Android, WP7, PhoneGapfree C# book, C#, Java, C# - - C# , , DOM ManipulationOnce we access an element, we can read and write its attributes

15function change(state) { var lampImg = document.getElementById("lamp"); lampImg.src = "lamp_" + state + ".png"; var statusDiv = document.getElementById("statusDiv"); statusDiv.innerHTML = "The lamp is " + state;}

DOM-manipulation.html , , SEO - , HTML, CSS, JavaScript, Photoshop ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC " cloud "BG Coder - - online judge , " " , ASP.NET - , , C#, .NET, ASP.NET iPhone, Android, WP7, PhoneGapfree C# book, C#, Java, C# - - C# , , Common Element PropertiesMost of the properties are derived from the HTML attributes of the tagE.g. id, name, href, alt, title, src, etcstyle property allows modifying the CSS styles of the elementCorresponds to the inline style of the elementNot the properties derived from embedded or external CSS rulesExample: style.width, style.marginTop, style.backgroundImage16 , , SEO - , HTML, CSS, JavaScript, Photoshop ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC " cloud "BG Coder - - online judge , " " , ASP.NET - , , C#, .NET, ASP.NET iPhone, Android, WP7, PhoneGapfree C# book, C#, Java, C# - - C# , , Common Element Properties (2)className the class attribute of the taginnerHTML holds all the entire HTML code inside the elementRead-only properties with information for the current element and its statetagName, offsetWidth, offsetHeight, scrollHeight, scrollTop, nodeType, etc17

, , SEO - , HTML, CSS, JavaScript, Photoshop ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC " cloud "BG Coder - - online judge , " " , ASP.NET - , , C#, .NET, ASP.NET iPhone, Android, WP7, PhoneGapfree C# book, C#, Java, C# - - C# , , DOM ManipulationLive Demo , , SEO - , HTML, CSS, JavaScript, Photoshop ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC " cloud "BG Coder - - online judge , " " , ASP.NET - , , C#, .NET, ASP.NET iPhone, Android, WP7, PhoneGapfree C# book, C#, Java, C# - - C# , , DOM Events

, , SEO - , HTML, CSS, JavaScript, Photoshop ASP.NET MVC HTML, SQL, C#, .NET, ASP.NET MVC " cloud "BG Coder - - online judge , " " , ASP.NET - , , C#, .NET, ASP.NET iPhone, Android, WP7, PhoneGapfree C# book, C#, Java, C# - - C# , , DOM EventsJ