javascript : DOM API (modify / creation query)

//? document.createElement()
// Creates and returns a new html element that only exists in memory.

const divEl = document.createElement('div');
console.log(divEl);

//? E.prepend() / E.append()
// Inserts a node as the first or last child of an element.

const parentEl = document.querySelector('.parent');

const el = document.createElement('div');
el.textContent = 'Hello';

parentEl.prepend(new Comment(' 주석 '));
parentEl.append(el, 'text');
parentEl.append('text');

//? E.remove()
// Remove element.
const el1 = document.querySelector('.child');
el1.remove();

//? E.insertAdjacentElement()
// Inserts a 'new element' at the designated location of the 'target element'.

/* html */ `
<!-- 'beforebegin' -->
<div class="target">
    <!-- 'afterbegin' -->
    Content!
    <!-- 'beforeend' -->
</div>
<!-- 'afterend' -->
`;

const childEl = document.querySelector('.child');
const newEl = document.createElement('span');
newEl.textContent = 'Hello~';

childEl.insertAdjacentElement('beforebegin', newEl);

//? N.insertBefore()
// Inserts a 'node' in the previous form of a 'reference node' that is a child of a 'parent node'.
const parentEl1 = document.querySelector('.parent');
const childEl1 = document.querySelector('.child');
const newEl = document.createElement('span');
newEl.textContent = 'Hello~';

parentEl.insertBefore(newEl, childEl);

//? N.contains()
// Checks whether the 'given node' is a descendant including itself.

console.log(parentEl.contains(childEl));

//? N.textContent
// Get or change all text of a node.

const el = document.querySelector('.child');
console.log(el.textContent);

el.textContent = '7';
console.log(el.textContent);

//? E.innerHTML
// get all HTML content of an element as one character,
// Specify the new html.

const el = document.querySelector('.parent');
console.log(el.innerHTML);

el.innerHTML = '<span>Hello</span>';

//? E.dataset
// Gets or sets the value of each `data-` attribute of an element.

const el = document.querySelector('.child');
const str = 'hello world';
const obj = { a: 1, b: 2 };

el.dataset.helloWorld = str;
el.dataset.object = JSON.stringify(obj);

console.log(el.dataset.helloWorld);
console.log(el.dataset.object);
console.log(JSON.parse(el.dataset.object));

//? E.tagName
// Returns the element's tag name.
console.log(parentEl.tagName);

//? E.id
// Gets or sets the value of the element's `id` attribute.
console.log(el.id);
el.id = 'child1';
console.log(el.id);

//? E.className
// Gets or sets the value of the element's `class` attribute.
const el = document.querySelector('.child');
console.log(el.className);

el.className += ' child1 active';
console.log(el.className);

//? E.classList
// Controls the value of the element's 'class' attribute.
// .add() : add new value
// .remove() : remove existing value
// .toggle() : toggle value
// .contains() : check the value

el.classList.add('active');
console.log(el.classList.contains('active')); // true

el.classList.remove('active');
console.log(el.classList.contains('active')); // false

el.addEventListener('click', () => {
  el.classList.toggle('active');
  console.log(el.classList.contains('active'));
});

//? E.style
// Gets or sets the css attribute value of the element's 'style' attribute (inline style).
// Reflecting inline style is difficult to overwrite because the default score is 1000 points.
// So it's actually better to apply the css in a separate file.
const el = document.querySelector('.child');

// individual designation
el.style.width = '100px';
el.style.fontSize = '20px';

// assigned at once
Object.assign(el.style, {
  width: '100px',
  fontSize: '20px',
});

console.log(el.style);
console.log(el.style.width);
console.log(el.style.fontSize);
console.log(el.style.backgroundColor);
console.log(el.style.position);

//? window.getComputedStyle()
// Returns the style object applied to the element.
const styles = window.getComputedStyle(el);

console.log(styles.width);
console.log(styles.fontSize);

//? E.getAttribute() / E.setAttribute()
// Get or set the value of a specific attribute on an element.
el.setAttribute('title', 'hello world');
console.log(el.getAttribute('title'));

//? E.hasAttribute() / E.removeAttribute()
// Check or remove a specific attribute from an element.

console.log(el.hasAttribute('class')); // true
el.removeAttribute('class');
console.log(el.hasAttribute('class')); // false