Week 8 – DOM Manipulation

Standard

I met with my group and we had a chance to discuss our team plan for the upcoming project. We decided to break into two groups, one doing front end and the other working on backend. I’ll be with Kyle and Zane doing the backend portion. We are going to have an extra meeting each week while we work on our tasks.

I worked a lot on understanding and using DOM manipulation. I ended up making a small quiz with a dynamic button that created a picture and showed a label for it – it was way exciting!!

DOM Manipulation

…The HTML DOM is a standard for how to get, change, add, or delete HTML elements.”

Browsers make a map, or tree of all the HTML on the web page and define them as objects

Then Javascript can:

  • Change the elements, attributes, CSS styles
  • Add new elements or attributes
  • Remove existing elements and attributes
  • Create new HTML events
  • React to all existing HTML events in the page

 

What are the pieces of DOM?

  • property: is a value that you can get or set (think, “What do I want to change?”)
  • method: an action you can do (think, “What change do I want to make?”)

Ex:

<p id=“demo”></p>

<script>

document.getElementById(“demo”).innerHTML = “Hello World!”;

</script>

 

property: innerHTML — this can be used to get or change any HTML element *it’s super useful

  • method: getElementById — good way is  to target a specific HTML element is to use an id that is assigned to it

 

How to Find What You Want to Change

  • Id
  • tag name
  • class
  • CSS selectors
  • HTML object collections

http://www.w3schools.com/js/js_htmldom_elements.asp

Test

createElement, appendChild, insertBefore, removeChild

   <p>What is the strongest bone in the human body?</p>

   <button onclick=”quizCard()”>Quiz Me</button>

   

   function quizCard() {

       var quiz1 = document.createElement(“IMG”);

       quiz1.setAttribute(“src”, “/image/femur_quiz.jpg”);

 

       quiz1.setAttribute(“alt”, “Femur Card”);

       document.body.appendChild(quiz1);

     

       var quiz_answer = document.createElement(‘p’);

     quiz_answer.className = ‘quiz-card’; // can style

     quiz_answer.innerHTML = ‘Femur’;

      

     document.body.insertBefore(quiz_answer, quiz1);

   }

   

Resources

http://www.w3schools.com/js/js_htmldom.asp

http://www.w3schools.com/js/js_htmldom_document.asp – How to access and manipulate HTML

http://coursesweb.net/javascript/createelement-insertbefore

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_create

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s