DOM: Provides properties and methods for manipulating documents;
BOM: Provides properties and methods for operating the browser.
We in the document. The getElementsByTagName for example simple understanding through JS DOM operation principle:
Set the background color for the first LI tag.
1, first write a few li tags in the page,
2, through the document. The getElementsByTagName (” li “) access to all the li tag
3. Print on the console
And you can see at this point we’ve got all of them liThe label;
4, And each LI tag is preceded by a numeric index, we can obtain each LI through the corresponding index, this obtained LI set, we call the class array.
List [0] = ‘li’;
5. When expanded, we can see that li contains many key-value pairs, so li is an object.
6, since it is an object, then we need to open up a heap memory, used to store this object;
In fact, our li refers to the address of the heap where the object is stored.
A closer look reveals several familiar figures:
If we want to change the background color of the current li, we can change the background color of the current li.
9, so we need to find the heap that li refers to by the spatial address first;
10, then modify the background color in heap memory (background color is a style information);
11. Now that we know that the background color belongs to the style information, we need to find it by style first
12. Open style and discover that it is also an object.
13, since it is an object, then we need to open up a heap memory, used to store the object….
14. If we want to change the background color, we also need to find the heap based on the space address pointed to by the style, and then modify it.
15. In the figure above we have found the background color property, which is currently an empty string because we have not set the background color before.
16. We now want to set
Let’s find the first oneliThe heap pointed tolist[0];
And then find what’s in the heapstyle:list[0].style;
Based on thestyleThe space address pointed to was foundbackgroundColor:list[0].style.backgroundColor;
The current forAn empty string, and reassign to the color we wantString red;
We’re finally done
Second, principle summary
According to the above case of changing LI’s background color, we already know that
In fact, it uses the principle that the object finds the corresponding attribute value through the attribute name to complete the operation of obtaining and replacing the value.
And since it’s an object, you can find and replace it, and of course you can add it, which is called in this caseCustom attributes
So once we understand that, let’s look at a problem we did before, and it’ll make a lot of sense
let box = document.getElementById('box');
box.style.color = 'red';
letboxSty = box.style; BBBFFF000 boxSty. Color = BBBFFF000 boxSty'red';
lettext = box.style.color; //=> get the initial color value' ', the basic type value, stored directly in stack memory text ='red'; * /Copy the code
