JavaScript application analysis for DOM (3)_DOM

If this DOM element has no style, there will be no operation. 2. We can also directly use JS to dynamically write DOM elements into html.
Today in this chapter we will talk about these two applications
(1) Operate existing DOM elements in html.
As I said above, operating on existing DOM elements is nothing more than operating on styles. So we first need to be able to get the style of this DOM element. Before talking about getting the style of DOM elements. First let’s talk about the style linking method of DOM elements. There are three types.

One is to write styles directly in the html document such as

.

The second is to insert style tags in the head of the html document, such as
#dom{width:300px;height:200px;background:#000;}


The third is our commonly used linking methods, such as


These three methods of using JS to operate its style are not the same
The key point is that we talk about the third A link-in style operation, because it is the most commonly used and the most convenient.
The second linking style is troublesome to operate.
The third type of link style is troublesome to operate, and the style cannot be modified directly. If you want to modify it, you must use the first method, which means you can only see but not touch it

The first type of link How to operate the style

Example

To get its height attribute, the first step is to get the DOM element. Use the method in the previous chapters
var a = document.getElementById("dom ");
Get its height attribute again, it's very simple
var h = a.style.height;
And so on, get the width, get the background color
var w = a.style. width;
var bg = a.style.background;
Note that the margin attribute is margin-top;
To obtain this, you cannot write directly
var mt = a.style.margin-top;
It is necessary to use the camel writing method mentioned in JQ
var mt = a.style.marginTop;

Of course it is useless to obtain it. We need to be able to modify it, and it is very convenient to modify. For example, if we want to change its height to 100, it is very simple, just say
a.style.height = "100px";
The rest are the same, I won’t say more;


The second method of linking styles
This operation requires distinguishing between browsers. Because IE and FF have different codes for obtaining this, for example, the method of obtaining the height is
var domcss = document.styleSheets[0].cssRules||document.styleSheets[0].rules;
var a = domcss[ 0].style.height;
The modification is like this
domcss[0].style.height = "100px";
I don’t want to explain why it is written like this. If you are interested, check it out yourself;
The third method of linking style operation


This operation also needs to distinguish between browsers.
To obtain it, you usually write a function. The function is like this
function CurrentStyle(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}
Suppose there is a height attribute in our css.css file
The acquisition method is var a = CurrentStyle("dom").height;
It cannot be modified directly by the method here, and can only be modified by the first method.
I don’t want to explain why this is written like this. If you are interested, check it out yourself;

(2) Use JS to dynamically create DOM elements.

Actually, this is very simple, just a few JS methods, but it needs to be done step by step like building a house. For example, I want to create a DOM element like this:

The first step is to create a div node. var newobj = document.createElement("div");

The second step is to add an id attribute to this section, and the attribute name is dom. newobj.setAttribute("id","dom");

The third step is to add attributes to this node. There are two ways. One is to modify the style we mentioned earlier, like this newobj .style.width = "100px"; Another method is newobj.setAttribute("width", "100px") used in the second step, and so on for other attributes

The fourth step is To put this node into an html document, the method is like this: document.body.appendChild(newobj) means this. document.body obtains the body element
, and appendChild(newobj) adds a child element to the body element, which is the node we created.


If you want to remove this node, this is document.body.removeChild(newobj);
(This can be replaced with the one you want to add child elements to. Element, for example, if I want to add a node to the element with the id of con, we just write document.getElementById("con").appendChild(newobj))

This is complete. There are many methods similar to appendChild in JS. The usage is the same as this. If you are interested, you can go to Baidu. So I won’t talk about it here, as they are not commonly used. Okay, that’s it for this chapter. In the next chapter, I will teach you how to write some effects.