This is the 22nd day of my participation in the August More Text Challenge

We all know that HTML5 is a very different direction from HTML before, and the HTML5 specification has added a lot of DOM node manipulation. So let’s expand it out

The CSS class extensions

With the development of HTML4, the use of the class class has gradually become more and more, mainly we use more CSS properties, including two DOM extension methods are widely used. One is to get the elements of the CSS class, and the other is to add, delete, change the name of the class.

document.getElementsByClassName()

This method is very similar to the document.querySelector() method we talked about the other day, except that it gets the class name, and it doesn’t need a dot, and it doesn’t need the browser to determine whether we’re getting a class or an ID or a label name.

<body>
    <div class="box">
        <p class="name">I am Jackson</p>
    </div>
    <div class="box"></div>
</body>
<script>
    let box = document.getElementsByClassName("box");
    let name = document.getElementsByClassName("name");
    console.log(box);
    console.log(name);
Copy the code

You can see that I’ve put two classes called Box up here, and if there’s more than one, we’ll just print it out as a NodeList that contains the element class.This property is supported by browsers up to VERSION 9 of Internet Explorer.

ClassList properties

ClassList makes it easier to add and remove class classes, which also have length attributes and can be retrieved by item() or array parentheses. It has a couple of other methods, so let’s write them down.

  1. Add () adds the specified content to the class name, but does nothing if it has the value.
  2. Contains () determines whether the content exists in a class and returns a Boolean value
  3. Remove (); remove()
  4. Toggle () removes the specified content if it exists and adds it if it doesn’t.
box[0].classList.add('content');
Copy the code

We added a class called Content to the first class called Box, and you can see that we did, and that’s how we use it.

The focus of management

The document.ActiveElement method, which returns the element that currently has the focus, defaults to the body element.

 console.log(document.activeElement);//body
Copy the code

We can use the focus() method to give an element focus.

    let btn = document.getElementById('button');
    btn.focus();
    console.log(btn == document.activeElement);//true
Copy the code

There is also a document.hasfocus () method. It determines whether the current document has focus, returning a Boolean value.

console.log(document.hasFocus());
Copy the code

The reason we return false here is because the current focus is what Button gets.

This kind of focus management is still primarily used for accessible Web applications. Those of you who are interested can learn about accessible Web applications,