JS it dom

Dom:document object model. The Document Object model. It is mainly by many nodes. The DOM core is the attribute of the node object and the Operation method based on all the angles of the JS object. The DOM is introduced in the following three ways.

One, node lookup and operation

This part of the surface looks a little bit broken, but digging still has a very big rule to follow.

See Guide map:

second, Dom CSS style

For this part of the content, is also related to the CSS style acquisition and manipulation.

Get:

1. In-line:

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

2.rule get

var sheet=document.stylesheets[0];var rule= (sheet.cssrules| | sheet.rules) [0];alert (Rule.style.width);

3. Compute Access

var style = window.getComputedStyle? window.getcomputedstyle (box, NULL): null | | box.currentstyle;//consider each browser compatible style.width;        Style.height

Action: Implement cross-browser compatible operations

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) {//Assume such a way exists    sheet.deleterule (position);//Non-ie}else if (sheet.removerule) { Sheet.removerule (position);}

3. Change: Change the CSS style by assigning values

Window.onload=function () {//cross-browser compatible Rulesvar Sheet=document.stylesheets[0];var rules=sheet.cssrules | | sheet.rules; var rule1=rules[0];rule1.style.color= ' green '; This can be changed in the link CSS style detailed properties var box=document.getelementbyid (' box '); box.style.color= ' Blue '; This method changes the inline style}

Summary: For a CSS style, whether it is a property or a manipulation of it. Can be divided into three cases, rule, and calculation. And these three kinds of only in-line and rule operations are readable and writable, and the calculation style is only available for acquisition and cannot be changed.

dimensions and position of elements

With the CSS style described above, we are also able to get the size and position of each element in the DOM, but there is one drawback: when these styles are pading,margin in elements, these methods cannot get the true size and position of some elements.

JS provides a way for you to get the size and size of an element.

Actual size: The actual size of the element. Mainly related to four factors, padding. Margin,border,scroll. The following methods are provided for different factors. will have different results and can be used only on demand

Perimeter size:

Summary: DOM is a core content of JS learning. The attributes and basic operations of the element nodes involved are also the most important components of the foreground page, through which the ability to make the object-based ideas in JS play a role. To be able to say, b/S UI page everything is based on these elements.

Copyright notice: This article blog original articles, blogs, without consent, may not be reproduced.

JS it dom