The daily record of the front siege lion in the tea room

Relationship between nodes

We use the following DOM structure to discuss obtaining node properties based on node relationships

<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
    <div id="child3"></div>
</div>
Copy the code

The parent node

// Always get an element or null
document.getElementById('child1').parentElement
// It may be an element, or a document node, or a document fragment
document.getElementById('child1').parentNode
Copy the code

Child nodes

// It must be an element
document.getElementById('parent').children
// May get text nodes or document fragments other than elements
document.getElementById('parent').childNodes
Copy the code

⚠️ Note: the data structure returned is an array of classes. If you need to use the array method to process, you still need to convert to an array

First child node

// It must be an element
document.getElementById('parent').firstElementChild
// It doesn't have to be anything
document.getElementById('parent').firstChild
Copy the code

The last child node

// It must be an element
document.getElementById('parent').lastElementChild
// It doesn't have to be anything
document.getElementById('parent').lastChild
Copy the code

Brother nodes

Last sibling node

// It must be an element
document.getElementById('child2').previousElementSibling
// It doesn't have to be anything
document.getElementById('child2').previousSibling
Copy the code

Next sibling node

// It must be an element
document.getElementById('child2').nextElementSibling
// It doesn't have to be anything
document.getElementById('child2').nextSibling
Copy the code

Node operation

  • parentDOM.appendChild(childDOM)Append child node
  • parentDOM.removeChild(childDOM)Deleting child Nodes
  • parentDOM.replaceChild(newDOM, oldDOM)Replace child node
  • parentDOM.insertBefore(newDOM, positionDOM)Insert child nodes. Here,positionDOMWhich child node do you want to insert before
  • DOM.setAttribute(key, value)Set properties
  • DOM.setAttribute(key)Retrieve attributes

The element size

⚠️ note that if you use JS to get the size of an element, unless width and height are specified in inline style, element.style.width and element.style.height are both ”.

offsetWidth offsetHeight

It is a read-only property that returns the pixel width and height of the element, including inner margins, borders, and scrollbars (if present and rendered), but not pseudo-elements. And it’s an integer.

scrollWidth scrollHeight

It is a read-only property that returns the height of the element’s content, including content that is not visible in the view due to overflow, as well as pseudo-elements, but excluding margins, borders, and scrollbars.

clientWidth clientHeight

It is a read-only property that returns the content width of the element, including the inner margin, but excluding borders and scrollbars. That’s the same integer.

getBoundingClientRect()

I picked this out because it works so well. In particular, it is used to determine whether an element is in the viewport.

This method returns a set of data describing the position of the size, except for width and height, which are left and top based on the viewport.

There are many more common ones, but this is just a list of DOM operations that ARE common to me, but not that common.