ࡱ > J L I O P ^ " bjbjBGBG 5 -_ -_f D F F & & & : : : 8 r V : M : $ ( L L S! v ! $ ! }M M M M M M M $ P S M & " S! " " M F F L M 30 30 30 " F L ^ & }M 30 " }M 30 30 eI @ K ) r 1J iM M 0 M KJ "T -. x "T 4 K K D "T & M X " " 30 " " " " " M M / " " " M " " " " "T " " " " " " " " " X : JavaScript HTML DOM The HTML DOM Tree of Objects EMBED MSPhotoEd.3 All Elements are Objects JavaScript can change all the HTML elements in the page JavaScript can change all the HTML attributes in the page JavaScript can change all the CSS styles in the page JavaScript can remove existing HTML elements and attributes JavaScript can add new HTML elements and attributes JavaScript can react to all existing HTML events in the page JavaScript can create new HTML events in the page DOM Document
tag element var paragraph = document.createElement("p"); paragraph.id = 'p2'; paragraph.style = 'color: red;'; paragraph.innerHTML = 'Hello World!'; // add it to the HTML document var div = document.getElementById("div1"); div.appendChild(paragraph); // remove it div.removeChild(div.lastElementChild); DOM Events Enter your name: JS Form Validation
Window Methods window.open() - open a new window window.close() - close the current window window.moveTo() -move the current window window.resizeTo() -resize the current window var jsWindow = window.open( 'https://www.w3schools.com/js', '_blank', 'height=600,width=600'); jsWindow.close(); Window Location Assign Thewindow.location.assign()method loads a new document.JavaScript setTimeout Demo
Window Cookies Create a Cookie with JavaScript document.cookie="username=John Doe"; document.cookie="username=John Doe; expires=Thu, 18 Dec 2017 12:00:00 UTC"; document.cookie="username=John Doe; expires=Thu, 18 Dec 2017 12:00:00 UTC; path=/"; Read a Cookie with JavaScript varx = document.cookie; Window Storage TheStoragetype stores only string data! const settings = { backgroundColor: '#fff', color: '#111', theme: 'light' }; Set object in Storage localStorage.setItem('settings', JSON.stringify(settings)); Get object in Storage var settings = localStorage.getItem('settings'); Remove object in Storage localStorage.removeItem('settings'); LEARN MORE! HYPERLINK "https://www.w3schools.com/js/" https://www.w3schools.com/js/ HYPERLINK "https://www.javascripttutorial.net/" https://www.javascripttutorial.net/ JavaScript HTML DOM PAGE 1/ NUMPAGES 14 HYPERLINK "https://www.w3schools.com/js/tryit.asp?filename=tryjs_onchange" https://www.w3schools.com/js/tryit.asp?filename=tryjs_onchange HYPERLINK "https://www.w3schools.com/js/tryit.asp?filename=tryjs_validation_js" https://www.w3schools.com/js/tryit.asp?filename=tryjs_validation_js HYPERLINK "https://www.w3schools.com/js/tryit.asp?filename=tryjs_confirm" https://www.w3schools.com/js/tryit.asp?filename=tryjs_confirm HYPERLINK "https://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt" https://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt HYPERLINK "https://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock" https://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock 2 3 4 H I J K L f g r | $ K V a w hU B*CJ OJ QJ aJ ph -hU 5B*CJ OJ PJ QJ \^J aJ ph (*hU 5B*CJ OJ QJ \aJ ph %hU 5B*CJ OJ QJ \aJ ph j hU UmH nH u j] hU UVj hU U)hU 5B*CJ3 OJ QJ \^J aJ3 ph hU . 2 3 L f g K hd d d -D M [$\$^h &