当前位置：网站首页>Js4day (DOM start: get DOM element content, modify element style, modify form element attributes, setinterval timer, carousel Map Case)

Js4day (DOM start: get DOM element content, modify element style, modify form element attributes, setinterval timer, carousel Map Case)

2022-07-02 12:44:00 【By the Difeng River】

List of articles

DOM brief introduction

DOM（Document Object Model—— Document object model ） Is used to present and interact with any HTML or XML Document interaction API
Insert picture description here

obtain DOM object

1. according to CSS Selector to get DOM Elements ( a key )

Select the first element that matches

grammar ：

document.querySelector('css Selectors ')

Parameters :
Contains one or more valid CSS Selector string
Return value ：
CSS Selectors The first element of the match , One HTMLElement object .
If it doesn't match , Then return to null.

See documentation ：

Select multiple matching elements

grammar ：

document.querySelectorALL('css Selectors ')

Parameters :
Contains one or more valid CSS Selector string
Return value ：
CSS Selectors Matching elements NodeList aggregate .
What you get is a Pseudo array ：
 An array with length and index number
 But no pop()push() Equal array method
Want to get every object inside , You need to traverse （for） The way to get .
Even if there is only one element , adopt querySelectAll() What you get is also a pseudo array , There's only one element in it
If it doesn't match , Then return to null.

Set up / modify DOM Element content

If you want to modify the contents of the label element , You can use the following methods ：

document.write() Method
Only the text content Additional To </body> Front position
Labels contained in the text Will be parsed

document.write('<strong> I little interesting ~</strong>')

object .innerText attribute
Add text content to / Update to Any label position
Labels contained in the text Will not be parsed

box.innerText = ' I little interesting ~'

object .innerHTML attribute
Add text content to / Update to Any label position
Labels contained in the text Will be parsed

box.innerHTML = '<strong> I little interesting ~</strong>'

Set up / Modifying elements Common styles attribute

grammar ：
object . attribute = value

        // 1. Get elements   picture 
        let pic = document.querySelector('img')
        // Operational elements 
        pic.src = `./images/1.webp`
        pic.title = ' I'm the picture '

Set up / Modifying elements style attribute

1. adopt style Attribute operation CSS

Be careful ：style Attributes can only be Get and set inline styles , The style defined in the class style passes style Can't get .
Insert picture description here

      let box = document.querySelector('div')
      box.style.background = 'skyblue'
      box.style.width = '400px'
      box.style.marginTop = '100px'

Label selection body when , because body Is the only label , You can write directly document.body.style

	document.body.style.backgroundImage = `url(./images/desktop_${
      num}.jpg)`

2. Operation class name (className) operation CSS

If you change more styles , Directly through style Property modification is cumbersome , We can do it by means of css The form of class name .

      let box = document.querySelector('div')
      box.className = 'active'

defects ： If div There are classes from the central plains that will cover the original classes （ Because it's equivalent to giving div Of class Reassign ）.

3. adopt classList Operation class control CSS

In order to solve className It is easy to overwrite the previous class name , We can go through classList Add and delete the class name

    box.classList.add('active')				//  Append a class 
    box.classList.remove('active')			//  Delete a class 
    //  Switch classes , Element has active Just delete , No, active Just add 
    box.classList.toggle('active')

** summary ：** Use className and classList The difference between ？
className You can modify multiple styles at the same time , But directly className Assignment will overwrite the previous class name
classList It is convenient to modify less styles , classList Yes, the addition and deletion do not affect the previous class name