Evaluating and Manipulating elements

[vikramlc]

[vikramlc]

Attributes vs Properties:

[vikramlc]

Traversing DOM elements and Manipulating DOM elements:

const h1 = document.getElementById('main-title');

h1.textContent = 'Some new title!';
h1.style.color = 'white';
h1.style.backgroundColor = 'black';

const li = document.querySelector('li:last-of-type');
li.textContent = li.textContent + ' (Changed!)';

const body = document.body;

// const listItemElements = document.querySelectorAll('li');
const listItemElements = document.getElementsByTagName('li');

for (const listItemEl of listItemElements) {
  // console.dir(listItemEl);
}

const button = document.querySelector('button');
const section = document.querySelector('section');

section.className = 'red-bg';

button.addEventListener('click', () => {
  section.classList.toggle('invisible');
});

[vikramlc]

Difference between children(only 3 elements) vs childNodes(has 7 elements with whitespace as well which are text nodes):

[vikramlc]

style: white-space: pre;

[vikramlc]

Selecting parentNode and parentElement:

Selecting sibling elements: