Detailed explanation of how JavaScript operates element attributes, styles and class names

DOM - Document Object Model

A complete set of properties and methods for operating document streams

• Label (element) of the operation page
  Check the addition, deletion and modification of the operation label
  The attributes of the operation label (id, class, type, …)
  The style of the operation label
  …

• Get to know some content
  -document: document flow, page, root node, but not element (tag)
  -html: the largest element that carries all tags, the root element Node
  -head: specifically carries the description tag of the current page, the content here is generally not displayed on the page
  -body: specifically carries the display tag of the current page, the actual content displayed on the webpage

Get elements

Use a variable to save one or some elements in the page
The methods of getting elements are divided into two categories
1. Get unconventional elements

• html：document.documentElement
• head：document.head
• body：document.body

2. Get regular elements

• Get elements based on id
  Syntax: document.getElementById
  Return value: If there is an element corresponding to id on the page, then it is this element, if not, it is null

• Get elements based on class name
  Syntax: document.getElementsByClassName('Element class name')
  Return value: must be a pseudo array
  If on the page If there are elements corresponding to the class name, then get as many as there are and put them in the pseudo array to return
  If there are no elements corresponding to the class name on the page, then it will be an empty pseudo array

• Get elements based on tag name
  Syntax: document.getElementsByTagName('tag name')
  Return value: must be a pseudo array
  If there is an element corresponding to the tag name on the page, Then get as many as you want and put them in the pseudo array to return
  If there is no element corresponding to the tag name on the page, then it is an empty pseudo array

• Get a tag based on the selector
  Syntax: document.querySelector('selector')
  Return value: If there is an element corresponding to the selector on the page, then return the first element corresponding to the selector
  If there is no corresponding selector on the page element, then it is null

• Get a set of tags based on the selector
  Syntax: document.querySelectorAll('selector')
  Return value: must be A pseudo array
  If there are elements corresponding to the selector on the page, get as many as there are, put them in a pseudo array and return
  If there are no elements corresponding to the selector on the page, then it will be an empty pseudo array Array

Operation element style

• There are three types of element styles to operate in JS
  1. Get the inline style of the element (can only get Inline style)
  2. Get the non-inline style of the element (including inline and non-inline)
  3. Set the style of the element (only inline style can be set)
  Note: involves styles with underscores When naming
  Convert to camel case
  Use array association syntax

• Get the inline style of the element
  Syntax: element.style.Style name

console.log(ele.style.width)
console.log(ele.style.height) // 非行内样式
console.log(ele.style.fontSize)
console.log(ele.style['font-size'])

• ·Get the non-inline style of the element
  Syntax: window.getComputedStyle (the element to get the style).Style name

console.log(window.getComputedStyle(ele).width)
console.log(window.getComputedStyle(ele).height)
console.log(window.getComputedStyle(ele).fontSize)
console.log(window.getComputedStyle(ele)['background-color'])

• Set the element Style (can only set inline style)
  Syntax: element.style.style name = style value

ele.style.backgroundColor = 'red'

Operation element class name

Purpose: change styles in batches

• className
  Operation of native attributes
  Because there is a key in JS called class, in order to avoid renaming it, it is called className
  Note: The value of the class name is a string , but the string may contain multiple class names

• classList
  Each element node has an attribute called classList
  which is a data structure similar to a prime group. Stores all the class names of the element
  Addition, deletion, modification and query are all operations on classList, and a dedicated api is given
  Add: element.classList.add(class name)
  Delete: element.classList. remove(class name)
  Switch: element.classList.toggle(class name)
  - Delete if it exists originally, add if it does not exist before

Related recommendations: [JavaScriptVideoTutorial】

The above is the detailed content of Detailed explanation of how JavaScript operates element attributes, styles and class names. For more information, please follow other related articles on the PHP Chinese website!