Js dom, jsdom

Js dom, jsdom

DOM: document object model, a document object model, which consists of nodes. From the perspective that everything in Javascript is an object, the core of DOM is the attributes of these node objects and the methods for operating them. The video mainly introduces DOM in the following three aspects.

I. node search and operations

This part of the surface looks a little broken, but there are still many rules to follow. See the export chart:

Ii. CSS style of DOM

This part of content involves obtaining and operating CSS styles.

Obtain:

1. Intra-row:

var box=document.getElementById('box');alert(box.style.width);

2. Obtain rule

var sheet=document.styleSheets[0];var rule=(sheet.cssRules|| sheet.rules)[0];alert(rule.style.width);

3. Calculate and obtain

Var style = window. getComputedStyle? Window. getComputedStyle (box, null): null | box. currentStyle; // check whether the browser is compatible with style. width; style. height.

Operation: cross-browser compatibility

1. Insert

functioninsertRule(sheet,selectorText,cssText,position){    if(sheet.insertRule){      sheet.insertRule(selectorText+'{'+cssText+'}',position);                                                                     }else if(sheet.addRule){                                                                                                              sheet.addRule(selectorText,cssText,position);}

2. Delete

function deleteRule(sheet,position){

If (sheet. deleteRule) {// if this method exists in sheet. deleteRule (position); // non-IE} else if (sheet. removeRule) {sheet. removeRule (position );}

3. Modify: Modify the CSS style by assigning values.

Window. onload = function () {// cross-browser compatible with rulesvar sheet = document. styleSheets [0]; var rules=sheet.css Rules | sheet. rules; var rule1 = rules [0]; rule1.style. color = 'green'; // you can modify the specific attribute var box = document in the Link CSS style. getElementById ('box'); box. style. color = 'Blue '; // This method modifies the intra-row style}

Summary: CSS styles can be divided into three types: Intra-row, rule, and calculation. However, these three operations are only readable and writable, and the calculation style is only available and cannot be modified.

3. element size and position

Through the CSS style above, we can also obtain the size and position of each element in the DOM, but there is a drawback: When elements have pading and margin styles, these methods cannot obtain the true size and position of some elements. JS provides a method specifically used to obtain the element size and size.

Actual size: the actual size of elements depends on four factors: padding, margin, border, and scroll. The following methods are provided for different factors, there will be different results, just use as needed

Peripheral size:

 

 

Conclusion: DOM is the core content of JS learning. The attributes and basic operations of element nodes are also the most important components on the front-end page, in order to make JS's object-based thinking play a role. It can be said that everything on the B/S UI page is based on these elements.

Js dom operations

Dd. childNodes. length = 2 in IE
Dd. childNodes. length = 5 in firefox; why?
<Div id = "dd">
---- The blank text node is ignored in IE, and firefox is included according to the standard.
<A href = "#" id = 'A'> Read Network </a>
---- The blank text node is ignored in IE
<A href = "#" id = 'B'> Read Network </a>
---- The blank text node is ignored in IE
</Div>

What is the relationship between js and dom?

JavaScript is a Web Page scripting language that can achieve some dynamic effects on the web page.
DOM is the structure of HTML documents. In fact, it is a standard formulated to allow js to operate html elements. The root of dom is the document object. There are many attributes and methods to modify the object, such as creating a node, copying a node, removing a node, and modifying attributes.