javascript : DOM API (search, size, coordinates)

Search

//? document.getElementById()

// Returns the element retrieved by the value of the HTML `id` attribute.
// If multiple elements are found, only the first element found is returned.
// If there are no search results, return null.

const el = document.getElementById('child2');
console.log(el);

//? document.querySelector()

// Returns one element searched for with 'css selector'.
// If multiple elements are found, only the first element found is returned.
// If there are no search results, return null.

const el1 = document.querySelector('.child:first-child');
console.log(el1);

//? document.querySelectorAll()

// Returns the element searched for with 'css selector' as a NodeList.
// Can use .forEach()

const nodeList = document.querySelectorAll('.child');
console.log(nodeList); // Prototype 부분에 forEach가 있다.
nodeList.forEach((el) => console.log(el.textContent));

// If you want to use an array method, Array.from() converts a pseudo-array into an array.
console.log(Array.from(nodeList).reverse());

//? N.parentElement
// Returns the node's parent element.

//? E.closest()

// matches any 'CSS selector' among ancestor elements, including itself,
// return the closest element
// If no element is found, 'null' is returned.
// contains itself
const el3 = document.querySelector('.child');

console.log(el.closest('div'));
console.log(el.closest('body'));
console.log(el.closest('.hello'));

//? N.previousSibling / N.nextSibling
// Returns the node's previous sibling or next sibling node.

const el4 = document.querySelector('.child');
console.log(el.previousSibling);
console.log(el.nextSibling);

//? E.previousElementSibling / E.nextElementSibling
// Returns the previous sibling or next sibling of an element.
const el5 = document.querySelector('.child');
console.log(el5.previousElementSibling);
console.log(el5.nextElementSibling);

//? E.children
// Returns all child elements of an element.
const el6 = document.querySelector('.parent');
console.log(el6.children);

//? E.firstElementChild / E.lastElementChild
// Returns the first or last child element of an element.

console.log(el6.firstElementChild);
console.log(el6.lastElementChild);

size coordinates

//? window.innerWidth / window.innerHeight
// Get the size of the current screen (Viewport).

console.log(window.innerHeight);
console.log(window.innerWidth);

//? window.scrollX / window.scrollY
// Gets the horizontal or vertical scroll position of the current screen based on the top-left corner of the page.
console.log(window.scrollX, window.scrollY);

//? window.scrollTo() / E.scrollTo()
// Scrolls the target (screen, scroll element) to the specified coordinates.
// (target).scrollTo(x, y)
// (target).scrollTo({ top: Y, left: X, behavior: 'smooth' })

setTimeout(() => {
  window.scrollTo(0, 500);
}, 1000);

setTimeout(() => {
  window.scrollTo({
    left: 0,
    top: 500,
    behavior: 'smooth',
  });
}, 1000);

const parentEl = document.querySelector('.parent');
setTimeout(() => {
  parentEl.scrollTo({
    left: 0,
    top: 500,
    behavior: 'smooth',
  });
}, 1000);

//? E.clientWidth / E.clientHeight
// Gets the size of an element excluding the border.
// Measure only fully identifiable content. (Excluding the scroll bar)

console.log(parentEl.clientWidth, parentEl.clientHeight);

//? E.offsetWidth / E.offsetHeight
// Gets the size of an element including its border.
// Scroll bar is excluded.
console.log(parentEl.offsetWidth, parentEl.offsetHeight);

//? E.scrollLeft / E.scrollTop
// relative to the top left of the scroll element,
// Get the horizontal or vertical scroll position of the current scroll element.
console.log(parentEl.scrollLeft, parentEl.scrollTop);

//? E.offsetLeft / E.offsetTop
// Get the position of the element relative to the top left of the page.

console.log(parentEl.offsetLeft, parentEl.offsetTop);

//? E.getBoundingClientRect()
// the size of the element including the border
// Get relative position information on the viewport.
console.log(parentEl.getBoundingClientRect());