Common API for Element node

Element nodes

Attributes of the Element node

Feature attributes

Element.attributes  // Returns all attribute nodes of the current element node
Element.id          // Returns the id attribute of the specified element, readable and writable
Element.tagName     // Returns the uppercase tag name of the specified element
Element.innerHTML   // Returns the HTML code that this element contains, which is readable and writable
Element.outerHTML   // Returns all HTML code for the specified element node, including itself and all contained child elements, readable and writable
Element.className   // Returns the class attribute of the current element, which can be read and written
Element.classList   // Returns all classes of the current element node
Element.dataset     // Returns all data-* attributes in the element node.
Copy the code

The size attribute

Element.clientHeight   // Returns the height of the visible part of the element node
Element.clientWidth    // Returns the width of the visible portion of the element node
Element.clientLeft     // Returns the width of the left border of the element node
Element.clientTop      // Returns the width of the top border of the element node
Element.scrollHeight   // Returns the total height of the element node
Element.scrollWidth    // Returns the total width of the element node
Element.scrollLeft     // Returns the number of pixels that the horizontal scroll bar of the element node scrolls to the right
Element.scrollTop      // Returns the vertical scroll down pixel value of the element node
Element.offsetHeight   // Return the vertical height of the element (including border,padding)
Element.offsetWidth    // Return the horizontal width of the element (including border,padding)
Element.offsetLeft     // Returns the vertical offset of the upper-left corner of the current Element relative to the element.offsetParent node
Element.offsetTop      // Return the horizontal displacement
Element.style          // Returns the inline style of the element node
Copy the code

Node-related attributes

Element.children                // Includes all the children of the current element node
Element.childElementCount       // Returns the number of child HTML element nodes that the current element node contains
Element.firstElementChild       // Returns the first Element child of the current node
Element.lastElementChild        // Returns the last Element child of the current node
Element.nextElementSibling      // Returns the next sibling of the current element node
Element.previousElementSibling  // Returns the previous sibling HTML node of the current element node
Element.offsetParent            // Returns the closest element of the current element node, and CSS position does not equal the static parent element.
Copy the code

Method of the Element node

Location method

getBoundingClientRect()  
/ / getBoundingClientRect returns an object that contains the top, left, right, bottom, width, height/high/wide width and height elements itself
// The distance between the outer edge of the top element and the top of the window
// The distance between the right outer border and the top of the window
// The distance between the bottom outer boundary and the top of the window
// The left outer margin of the left element is the distance from the top of the window
// Width element width (including border,padding)
// Height element itself height (including border,padding)

getClientRects()   // Returns all the rectangles of the current element's parameters on the page.

// The offset of the element on the page
var rect = el.getBoundingClientRect()  
return {   
  top: rect.top + document.body.scrollTop,   
  left: rect.left + document.body.scrollLeft  
}
Copy the code

Property method.

Element.getAttribute()     // Reads the specified property
Element.setAttribute()     // Sets the specified properties
Element.hasAttribute()     // Returns a Boolean value indicating whether the current element node has the specified attribute
Element.removeAttribute()  // Remove the specified attribute
Copy the code

To find the way

Element.querySelector(selectors)      // A set of selectors used to match Element's descendants; Must be a valid CSS selector
Element.querySelectorAll(selectors)   // Returns a non-live NodeList containing the inactive nodes of all elements from the elements matching the specified CSS selector group.
Element.getElementsByTagName(tagName) HTMLCollection returns a dynamic HTML collection containing all the elements of the specified tag name
Element.getElementsByClassName()      // Return a live HTMLCollection that contains all the children of the specified class
Copy the code

Event method

Element.addEventListener(type, listener, options)	// Add the event callback function
Element.removeEventListener(type, listener[, options])	  // Remove the event listener
Element.dispatchEvent()		                       // Trigger the event
Element.preventDefault()		                 // Prevents the default click event from executing

//ie8
Element.attachEvent(oneventName,listener)
Element.detachEvent(oneventName,listener)

/ / the event object
var event = window.event||event;    

// The target node of the event
var target = event.target || event.srcElement;

// Event broker
ul.addEventListener('click'.function(event) {   
  if (event.target.tagName.toLowerCase() === 'li') {   
    console.log(event.target.innerHTML)   
  }  
});
Copy the code

other

Element.scrollIntoView()   								// Scroll the current element to the visible area of the browser

Element.insertAdjacentHTML(where, htmlString);		    // Parses the HTML string and inserts the resulting node into the DOM tree at the specified location.
Element.insertAdjacentHTML('beforeBegin', htmlString);  // Insert before the element
Element.insertAdjacentHTML('afterBegin', htmlString);   // Insert before the first child of the element
Element.insertAdjacentHTML('beforeEnd', htmlString);    // Insert after the last child of the element
Element.insertAdjacentHTML('afterEnd', htmlString);     // Insert after the element

Element.remove()  // Remove the current element node from the DOM
Element.focus()   // Used to shift the focus of the current page to the specified element
Copy the code

CSS operation

The name of the class action

/ / below ie8
Element.className                        // Get the class name of the element node
Element.className += ' ' + newClassName  // Add a new class name

// Determine if there is a class name
function hasClass(element,className){
  return new RegExp(className,'gi').test(element.className);
}

/ / remove the class
function removeClass(element,className){
  element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)'.'gi'),' ');
}

//ie10 
element.classList.add(className)     / / new
element.classList.remove(className)  / / delete
element.classList.contains(className)// Whether to include
element.classList.toggle(className)  //toggle class
Copy the code

Style operation

element.setAttribute('style'.' ')               // Sets an attribute value on the specified element

element.style.backgroundColor = 'red'

element.style.cssText                          // Use to read, write, or delete the entire style attribute

element.style.setProperty(propertyName,value)  // Set CSS properties
element.style.getPropertyValue(property)       // Get CSS properties
element.style.removeProperty(property)         // Delete the CSS properties
// Operate on non-inline styles
//ie8
element.currentStyle[attrName]
//ie9+
window.getComputedStyle(el,null)[attrName] 
window.getComputedStyle(el,null).getPropertyValue(attrName)
/ / class
window.getComputedStyle(el,':after')[attrName]
Copy the code