# Week 3 Tinker - Javascript Part 0
Team (Group 3): Huizhi, Xi Liao, Rainy Duan

## Developer Tools
- What seems to be the difference between what gets printed in the console when you do console.log vs console.dir ? Hint: click on the caret that appears before the output with the console.dir.

>When I type in console.dir(mySpan);
>I get: span#catBadge.badge.badge-success.mr-1
>And when I click on the caret, I get a list of properties.
>When I type in console.log(mySpan);
>I get:`<span id="catBadge" class="badge badge-success mr-1">Delish!</span>`

- In the Elements tool right-click on the #catBadge and do Copy > Copy Selector. Paste it somewhere - what do you get? Try this with another element.

>I get #catBadge as words when I paste this next to `<paragraph>.` 

- Like before, this time try Copy > Copy JS Path. Then, in your console type console.dir() and inside the parentheses paste what you copied. We are passing an argument into the console.dir() function call. Press ENTER to execute the code.Try this again but for the “Extremely Deadly” badge that is inside our Table.
- Based on your tinkering around with this tool, can you make any inferences about the code and how it works?

>Console. log() returns the object or our input in its string representation. Console. dir() recognizes the object and just outputs its properties. Both console. log and dir return the input string as a string.

## JS Objects
- What JS code do you need to write and execute in order to:
- GET the class name of the element?
>var x = document.getElementsByTagName("DIV")[0].className;
- READ the text content of the element?
>var x = document.getElementById("myBtn").textContent;
- CHANGE the ID of the element to “ABC123”?
>document.getElementById("demo").id = "newid";
- WRITE/REPLACE the text “Teachers College, Columbia U.” to this element?
>document.getElementById('Teachers College, Columbia U').innerHTML = document.getElementById('Teachers College, Columbia U').innerHTML.replace('%Jin%','Kuwata');
- ADD (not replace) a class “special” to the element?
>function myFunction() {
var element = document.getElementById("myDIV");
element.classList.add("Jin");

## Objects in Objects
- what JS code do you need to write and execute in order to:
- GET the anchor element object?
>var x = document.getElementById("Anchor");
- READ the content of the anchor element?
>var x = document.getElementById("Anchor").Content;
- Change the source of the image element to “images/unicorn.gif” ?
><a-image src="images/unicorn.gif"></a-image>
- ADD the class “important” to all elements in the children list?
>children: [.important
{ tagName: "IMG",
src: "http://myphoto.com"
},
{tagName: "A",
href: "http://mywebsite.com",
textContent: "My Name"
} ]

-What if there were 1000 children element objects in this list?
Then will All mark as important
-What if also, we only wanted to add the class “important” if the element is an anchor and NOT an image?
Add the class “important” behind anchor

- If I run some magical code that queries the page, finds, and returns to you an object that represents an element, and I give it the variable name specialEl… What code would you need to run in order to:
- GET the type of element this is?
>var elementType = document.getElementById("name").tagName;
alert(elementType);
- Check whether this element has an ID?
>var elementInner = document.getElementById( elementId );
- Change the text content of this element from “Code yuck” to “Code YES!”
> document.getElementById("p1").innerHTML = "New text!";

## Querying Elements from the DOM

Using Bootstrap Meowmix:

- Select and query elements of your choosing.
> let x = document.querySelector('div').className = "changedname"
- Read the values of different element properties.

>let attr of elem.attributes) { // (4) list all
alert( `${attr.name} = ${attr.value}` );
- Set or change the values of different element properties

>let headingElement = document.querySelector("#bigMessage");
headingElement.textContent = "Oppa Gangnam Style!";
---

## CSS Properties

- What are some of the key differences between the two?
>CSS can only nest CSS attributes. DOM can include everything and CSS can be nested as a form of array. DOM does not have a selector at the beginning but the attributes that show the elements’ identity is also nested in the curly bracket as the rest of the attributes.
- If you wanted to change the background color to “salmon” what would you write in the console (JS code?)
>document.querySelector(“.pet”)[1].style.backgroundColor = “salmon”;
- What are some style properties you’ve used in CSS before and can you manipulate them through JS?
>Child, id, text, onmouseover, parent, href, color, bcc, border-top-color, alignment, font, width, column...
- If an element is not using a style rule, how is that represented in the object as a property/value pair?
>propertyName: null;
- What do the values of these properties represent?
>it presents with attributes name:value, if no value is given, it represent “null”.
- What is the relationship between an element and the values of these above properties?
>Properties indicates the relative position an element has with its surrounding elements and even parents/sibling elements.
- How far does the rabbit hole go?
>It has children elements nested within parents elements and it covers all the properties an element has.
- What is the implication of this with respect to starting at some location within the structure of the DOM and getting to another location? In other words, “traversing the DOM”.
>With certain selector, we can traverse through the DOM and extract information we need without worrying about the sequences and hierarchy. But when selecting certain elements that nested deep in the parents elements, we will need to check their location before tracking.

---

## Challenge 1

    function changeColor(str) {
        document.body.style.Color = #e91e63;
    }   
    changeColor();

## Challenge 2

//try 1
document.querySelectorAll("#e91e63").onsubmit = function() {
    if (document.querySelector('#e91e63').value == '') {
        document.querySelector('#e91e63').style.background = 'red';
        return false;
    }
}
/* try 2: select all the elements through loop and put them into a new array in sequence, then compare if the classname equals to the parameter, if not, change it to the parameter.
    var list = [];
    var sel[] = document.querySelectorAll();
        if i < sel[].length {
            list[i]=sel[i]
            i++;
    }
    function changeName(para1,para2) {
        if (para!=list[i]) {
            element.SetAttribute() = "para";
    }
    }
    changeName();

## Challenge 3

- Additional Function 1

function colorizedEl(para) {
        document.body.style.Color = ""#e91e63"
        return document.getElementByClassName();
    }
colorizedEl();

- Additional Function 2

var elem = document.getElementById('Q');

function editedEl(e) {
    e.target.style.backgroundColor = 'red';
    e.target.removeEventListener('onmouseenter', editedEl);
};

elem.addEventListener('onmouseenter', editedEl);

//try2 what do you mean by text content? how does content different from message???????
function editedEl (para1,para2) {
    var content = document.getElementByClassName();
        var content = document.getElementByClassName();
        var message = document.getAttribute();
        content.setAttribute = para1;
        message.setAttribute = para2;
}

- Additional Function 3

 `var id = document.getElementById();`

function setId(para1) {
id = para1 + "-" + randomNum;
}
setId();

 - Additional Function 4

var id = document.getElementById();
function setId(para1) {
id = para1 + "-" + randomNum;
}
var list = [];
var sel[] = document.querySelectorAll();
if i < sel[].length {
list[i]=sel[i]
i++;
}
function changeName(para1,para2) {
if i % 2 ===0 {
function colorizedEl(para) {
document.body.style.Color = ""#e91e63"
return document.getElementByClassName();
}
}else {
function editedEl (para1,para2) {
var content =document.getElementByClassName();
var content =document.getElementByClassName();
var message = document.getAttribute();
content.setAttribute = para1;
message.setAttribute = para2;
}
}

}
}
setId();
changeName();