DOM

Question 1

div.id = i

Answer 1

event.target

Question 2

header. classList.add(‘header’)
header. classList.remove(‘header’)
header. classList.contains(“header”)

Answer 2

//add a classname to the div
div.className = "box"

Question 3

The syntax follows an element.style.property format, with the property representing a CSS property. For example, the following code selects the first element with a class of blue and assigns blue as the background-color:

let blueElement = document.querySelector('.blue');
blueElement.style.backgroundColor = 'blue';

Answer 3

document.querySelector(‘.blue’).style.fontFamily = ‘Roboto’;

Question 4

// style the <p> element

para.style.border = ‘1px solid black’
</p>

Answer 4

// header styling (not recommended this way)

header. style.width = ‘100%’
header. style.height = ‘100px’
header. style.background = ‘lightBlue’
header. textContent = ‘This is the menu’

header. style.display = ‘flex’
header. style.justifyContent = ‘center’
header. style.alignItems = ‘center’

Question 5

// create a new element

const header = document.createElement(‘header’);

Answer 5

const body = document.querySelector(‘body’);

The querySelector() method returns the first element that matches a CSS selector.

To return all matches (not only the first), use the querySelectorAll() instead.

Question 6

// add the element to the dom

body.appendChild(header)

Answer 6

//select  by classname
const div = document.querySelector('.test') 

console.log(‘div is’, div)

Question 7

//Create and Insert Elements

let paragraph = document.createElement(‘p’);

The .createElement() method creates a new element based on the specified tag name passed into it as an argument. In the example code above, the .createElement() method takes ‘p’ as its argument which creates an empty <p> element and stores it as the paragraph variable.

</p>

Answer 7

//Assign a value to the element

paragraph. id = ‘info’;
paragraph. innerHTML = ‘The text inside the paragraph’;

Above, we use the .id property to assign ‘info’ as ID and the .innerHTML property to set ‘The text inside the paragraph’ as the content of the <p> element.</p>

Question 8

// select an element by ID
const divById = document.getElementById('a1')
console.log('divbyid is', divById)

Answer 8

// create an element

const para = document.createElement(‘p’)

Question 9

// add a <p> element to the </p><div> (parent)

div.appendChild(para)
</div>

Answer 9

//add a text(string) to the <p> element
 para.innerText = 'Hello from JS'</p>

Question 10

//tweak the body element
document.body.innerHTML = 'The cat loves the dog.';

//tweak the <h2> element

document.body.innerHTML = ‘</h2><h2>This is a heading</h2>’;

Answer 10

//select and modify elements

The .querySelector() method allows us to specify a CSS selector as a string and returns the first element that matches that selector.

document.querySelector(‘p’);

Question 11

// access an elemetn by ID

document.getElementById(‘bio’).innerHTML = ‘The description’;

Answer 11

.getElementsByClassName()

document.getElementsByClassName(‘student’)[0].innerHTML = ‘Not yet registered’;

methods that return an array of elements, instead of just one element. You can use bracket notation to access individual elements of an array

Question 12

The .appendChild() method will add a child element as the parent element’s last child node. The following code appends the <p> element stored in the paragraph variable to the document body.

document.body.appendChild(paragraph);

The .appendChild() method does not replace the content inside of the parent, in this case, body. Rather, it appends the new element as the last child of that parent.</p>