Mad9013 - DOM Manipulation sample

Developer
Mobile Application Design-Development
Size
3,113 Kb
Views
26,312
  1. Mad9013 - DOM Manipulation sample Previews
  2. Mad9013 - DOM Manipulation sample HTML Codes
  3. Mad9013 - DOM Manipulation sample CSS Codes
  4. Mad9013 - DOM Manipulation sample JS Codes

How do I make an mad9013 - dom manipulation sample?

What is a mad9013 - dom manipulation sample? How do you make a mad9013 - dom manipulation sample? This script and codes were developed by Mobile Application Design-Development on 10 August 2022, Wednesday.

Mad9013 - DOM Manipulation sample Previews
IQ Test

Mad9013 - DOM Manipulation sample - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>mad9013 - DOM Manipulation sample</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head> <title>DOM Manipulation</title> </head> <body> <div class="wrapper"> <section class="main"> <h1>This is a heading</h1> <p><img src="http://placebeard.it/g/480/320" alt="beard"/>Some text inside of a paragraph. Lorem Ipsum La La La. Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium.</p> <p><img src="http://placebeard.it/g/320/240" alt="beard"/>Some text inside of a paragraph. Lorem Ipsum La La La. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p> </section> <footer class="footer"> <p>&copy; 2014 Squid Inc.</p> </footer> </div> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

Mad9013 - DOM Manipulation sample - Script Codes CSS Codes

*{ padding:0; margin: 0;
}
html, body{ background-color: #333;
}
.wrapper{ background-color: #eee; width: 960px; margin:10px auto;
}
h1{ font-size: 3rem; padding: 1rem 3rem; font-family: serif;
}
p{ padding: 1rem 3rem; font-size: 1.2rem; line-height: 1.6; clear: both; font-family: sans-serif;
}
p img{ float:left; margin:0 1rem 1rem 0; /* notice the images sticking out the bottom of the paragraphs */
}
p:nth-child(2){ background-color: rgba(66,122,240, 0.32); /* paragraph that is the 2nd child of something */
}
p:nth-of-type(2){ background-color: rgba(122,240,66, 0.32); /* second paragraph on the page */
}
.footer{ background-color: #666; margin-top: 6rem; clear:both;
}
.footer p{ color: #d4d4d4; font-size: 1rem;
}

Mad9013 - DOM Manipulation sample - Script Codes JS Codes

/***********************************
Properties
parentNode
childNodes[]
nextSibling
prevSibling
nodeType
nodeName
Methods
appendChild()
removeChild()
getAttribute()
setAttribute()
cloneNode()
createElement()
createTextNode()
***********************************/
document.addEventListener("DOMContentLoaded", init);
function init(){ //html, css, js are now loaded var img = document.querySelector(".main>h1+p>img"); //.main p:nth-child(2) img var p = document.querySelector(".main p+p"); //second paragraph inside .main p.appendChild( img ); var alt = img.getAttribute("alt"); //retrieve the alt text from the image img.setAttribute("alt", "An Awesome Beard"); //change the alt text img.title = "This is the mouseover text"; //p.innerHTML = "asdfasdfasd" var txt = document.createTextNode("Some new text"); p.appendChild(txt); var img2 = document.querySelector(".main>p+p>img"); p.removeChild( img2 ); var copy1 = img2.cloneNode(); var copy2 = img2.cloneNode(); //var p1 = document.querySelector(".main>h1+p"); var p1 = p.previousSibling; p1.appendChild(copy1); //p1.appendChild(copy2); var tInP = p1.childNodes[0]; //first node inside the first paragraph p1.insertBefore(copy2, tInP); var main = document.querySelector(".main"); for(var i=0; i<main.childNodes.length; i++){ //alert( i + " :: " +main.childNodes[i].nodeType ) if( main.childNodes[i].nodeType === 1){ // main.childNodes[i]["nodeType"] //This is an Element Node main.childNodes[i].style.color = "red"; } } for( prop in document ){ //prop is the variable, document is the object to loop through console.log( prop + " is " + document[prop] ); }
}
Mad9013 - DOM Manipulation sample - Script Codes
Mad9013 - DOM Manipulation sample - Script Codes
Home Page Home
Developer Mobile Application Design-Development
Username mad-d
Uploaded August 10, 2022
Rating 3
Size 3,113 Kb
Views 26,312
Do you need developer help for Mad9013 - DOM Manipulation sample?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mobile Application Design-Development (mad-d) Script Codes
Name
MAD9013 - Float Images with Content
Contact Manager
Party Starter
MAD9022 Refactoring Practice
HTML Modal Windows
Closure Failure
MAD9022 Simple Pie Chart
Practice querySelector
MAD9013-Sass Equal Spaced Layout Mixin
Mobile Web App Starter
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!