18_Dom_2 (5).pptxcbfncfncnnnnfnfnfnfnncn

ffxbxfbxbxvnxbxbxbxb

1. DOM (Part-2)

2. Getting/Setting Text Content To get/set an HTML element’s textual content we use a property called i nnerText . This  property can write dynamic text in the HTML element, but the text will not be interpreted as html text but as normal text . Syntax: <element>. innerText

3. PROGRAM In the code shown , write the body of the function operate( ) so that it coverts the text of all course names to upper case

4. Setting/Getting HTML Content To set/get an HTML element’s HTML content we use a property called i nnerHTML . This  property can write dynamic HTML in the page, and the text will be interpreted as html text This property is mostly used to generate the dynamic html such as registration form , comment form , links etc. Syntax: <element>. innerHTML

5. PROGRAM In the code shown , write the body of the function addNewCourse ( ) so that it accepts a course name from the user and adds it in the list of courses .

6. ASSIGNMENT In the code shown , write the body of the function showContactForm ( ) so that it generates a form inside the existing <div> tag for accepting name and contact no of the user .

7. Setting/Getting HTML Attribute To get/set an HTML element’s HTML attribute we use getAttribute () and setAttribute () methods. Syntax: < node_ref >. getAttribute (‘ attr_name ’); Syntax: < node_ref >. setAttribute (‘ attr_name’,’value ’);

8. PROGRAM In the code shown , write the body of the function changeLogo ( ) so that it changes the image shown on the page to sachin2.jpg

9. ASSIGNMENT Modify the previous code to change the image from sachin.jpg to sachin2.jpg and vice-versa on every button click

10. ASSIGNMENT In the code shown , write the body of the function showLink ( ) so that it prompts the user to input a website name and generates a dynamic link to that website on the page

11. Changing CSS Although setAttribute () allows us to change CSS styles also , by setting the style attribute , but it has a problem . The problem is that it simply overwrites the existing styles that we have set previously. For example: let heading= document.querySelector (“h3”); heading.setAttribute (“ style”,”text-align:center ;”); The above code will set the alignment of heading to center , but will overwrite all the styles set previously

12. Changing CSS To overcome this problem , JavaScript recommends not to use setAttribute () for styling . Rather it provides us a property called style in every HTML node element which allows us to set/get it’s CSS styles

13. Changing CSS The style property itself has child properties , which are used to set/get specific styles . Like: backgroundColor color borderColor fontFamily fontWeight : bold,bolder,lighter,normal,100to 900 fontStyle : normal,italic,oblique

14. PROGRAM In the code shown , write the body of the function showDate ( ) so that it displays current system date in the para . Make sure the month is in actual calendar style and text should be in crimson color and bold .

15. PROGRAM In the code shown, write the body of the function decorate( ) so that all the elements with the class value highlight get a red color solid border of 1 px .

16. Adding & Removing CSS Classes Although we can change CSS styles using style attribute but it becomes lengthy when we want to set multiple styles on same element . To solve this problem , JavaScript allows us to directly assign a CSS class to a DOM element . This is done by using the classList property

17. Adding & Removing CSS Classes The  classList  is a read-only property of an element that returns a live collection of CSS classes . Syntax: element.classList The  classList  is a collection of DOMTokenList   objects that represents the contents of the element’s class attribute.

18. Adding & Removing CSS Classes Even though the  classList  is read-only , but we can manipulate the classes it contains by using it’s various methods . Method Description add( class1, class2, ... ) Adds one or more class names to an element. remove( class1, class2, ... ) Removes one or more class names from an element. item( index ) Returns the class name with a specified index number from an element. Index starts at 0.Returns  null  if the index is out of range toggle( class) Toggles between a class name for an element.

19. PROGRAM In the code shown, write the body of the function decorate( ) so that all the paragraphs with the word error get the class error and all the paragraphs with the word success get the class success