Shulou(Shulou.com)06/03 Report--

JavaScript DOM is what, I believe that many inexperienced people are helpless about this, this article summarizes the reasons for the problem and solutions, through this article I hope you can solve this problem.

In fact, it is some ability to manipulate tags in html

What can we do?

Get an element

Remove an element

Create an element

Add an element to the page

Binding events to elements

Gets the attributes of an element

Add some CSS style to the element

...

The core object of DOM is the docuemnt object

document object is a built-in object in the browser, which stores various methods specifically used to manipulate elements

DOM: tags in the page, we get through js, we call this object DOM object

Get an element

Get tags from pages by js code

Once we get it, we can manipulate these tags.

getElementById is to get the tag by its id name

Because the id is unique in a page, what you get is an element.

getElementById

var box = document.getElementById('box')

console.log(box) //

The div tag with id box in the page is obtained

getElementsByClassName is the class name of the tag used to get the tag

Because there may be multiple elements in the page with the same class name, what you get is a group of elements.

Even if you get only one class, you are still getting a set of elements, but only one DOM element in this set.

getElementsByClassName

var box = document.getElementsByClassName('box')

console.log(box) // [] console.log(box[0]) //

Get a set of elements, is a data structure that looks like an array, but is not an array, is a pseudo-array

This set of data is also arranged according to the index, so if we want to accurately get this div, we need to use the index to get it.

getElementsByTagName is the tag name used to get the tag

Because there may be multiple elements in the page with the same tag name, what you get is a group of elements.

Even if there is really only one tag name, then it is still getting a group of elements, but only one DOM element in this group.

getElementsByTagName

var box = document.getElementsByTagName('div')

console.log(box) // [] console.log(box[0]) //

As with getElementsByClassName, what you get is an element that looks a lot like an array

Indexing is necessary to get accurate DOM elements

querySelector gets elements the way a selector does.

In other words, according to the selector when we write css to get

This method can only get one element, and it is the first element in the page that meets the condition.

querySelector

console.log(document.querySelector ('div ')) //Get the first div element in the page console.log(document.querySelector ('. box')) //Get the first element with the class name box in the page console.log(document.querySelector ('#box')//Get the first element with the id name box in the page

querySelectorAll

querySelectorAll is to get the elements in the way of selectors

This method gets all the elements that satisfy the condition and returns them as a pseudo-array.

console.log (document.querySelectorAll ('div ')) //Get all div elements in the page console.log (document.querySelectorAll ('. box')) //Get all elements in the page that have the class name box

What you get is a set of data, and you need to use indexes to get exactly each DOM element.

After we get the tags in the page in various ways to get the elements

We can directly manipulate the attributes of DOM elements and display the effects directly on the page.

Gets the HTML structure inside an element

Action Properties innerHTML

hello

var div = document.querySelector('div')

console.log(div[xss_clean])

/*

hello

*/

Set the content of an element

var div = document.querySelector('div')

div[xss_clean] = '

hello

'

After setting, the div element in the page will nest a p element.

Get the text inside the element (only get the text content, not the html tag)

innerText

hello

var div = document.querySelector('div')

console.log(div.innerText) // hello

You can set the text inside the element

var div = document.querySelector('div')

div.innerText = '

hello

'

After setting up, it will

hello

Appears as text inside div elements without parsing p into tags

Gets an attribute of an element (including custom attributes)

getAttribute

var div = document.querySelector('div')

console.log(div.getAttribute('a')) // 100 console.log(div.getAttribute('class')) // box

setAttribute

Set an attribute (including custom attributes) to an element

var div = document.querySelector('div')

div.setAttribute('a', 100)

div.setAttribute('class', 'box')

console.log(div) //

removeAttribute

Remove an attribute of an element directly

var div = document.querySelector('div')

div.removeAttribute('class')

console.log(div) //

style

Designed to add css styles to elements

All added are inline styles

var div = document.querySelector('div')

div.style.width = "100px"

div.style.height = "100px"

div.style.backgroundColor = "pink"

console.log(div)

//

The div in the page will become a width and height of 100, the background color is pink

A class name specifically used to manipulate elements

className

var div = document.querySelector('div')

console.log(div.className) // box

You can also set the class name of the element, but it is a full coverage operation.

var div = document.querySelector('div')

div.className = 'test'

console.log(div) //

When setting, regardless of whether there is a class name before, it will all be overwritten by the set value.

After reading the above, do you know how DOM works in JavaScript? If you still want to learn more skills or want to know more related content, welcome to pay attention to the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.