JavaScript Common native DOM operations

Recently, I am casting resumes, looking for work, in the busy review, hope to share useful knowledge, is their own growth, can also help others. today, we share some common native JavaScript DOM operations.

OK, let's get started. O (∩_∩) o~~

One. View the browser viewport ruler?

Window.innerwidth/window.innerheight (IE8 and IE8 below cannot be used (′д ') ... SAN) document.documentelement.clientheight/document.documentelement.clientwidth (Standard mode can be used (good long ah!!! ) document.body.clientheight/document.body.clientwidth (weird mode available)

So many ways, some can use some can't use what to do??

Then encapsulate a getviewportoffset ()

1 functionGetviewportoffset () {2     if(window.innerwidth) {3         return {4 W:window.innerwidth,5 H:window.innerheight6                 }7}Else{8         if(Document.compatmode = = = ' Css1compat ')){9         return {Ten W:document.documentelement.clientwidth, One H:document.documentelement.clientheight A                     } -}Else{ -             return { the W:document.body.clientwidth, - H:document.body.clientheight -                 } -             } +         } -}

Here to illustrate:

Standard mode: Renders according to the current syntax of the browser

Quirks mode: (promiscuous mode) to prevent older browsers from being used on newer versions, take backward compatibility. Such as:

IE6 If promiscuous mode is turned on, it can be compatible IE4 and the IE5 The syntax

Judging is not a weird pattern: Document.compatmode .

Yes: Print Backcompat ; not: Printing Css1compat

How, this is all together, compatibility is not considered, is not very good!!!

Who's next???

Scroll bar, it's you.

So what's the scroll bar?!!

Scroll, get scroll position

Scrolling, there are three methods of scroll (), ScrollTo (), Scrollby ();

Parameter (x, y) position of the horizontal scroll bar

I have so many, don't worry, the difference is obviously also very good to remember ...

Scrollby () has a cumulative function, multiple calls, will be added on the original basis, the other two will not ... Everyone has read the novel, automatic reading work can be done, how to do it!!!

?

Window.setinterval (function  () {            Scrollby (0, +);        },30);

There is nothing wrong with that. (Don't hit Me)

Then the next can let him move, how to get his position!!!

That's

Window.pagexoffsetleft/window.pageyoffsettop (IE8 and the following can not be used, how is IE8 .... ）

Document.documentelement. Scrolltop/document.documentelement.scrollleft

Document.body.scrolltop/document.body.scrollleft (Eh, these two goods, looks familiar)

There is no mistake, they are the same prefix, because of the compatibility of the confusion, for IE8 and ie8↓ are easy to use, then, then, in the encapsulation of a!!!!! Getscrolloffset

?

functionGetscrolloffset () {if(window.pagexoffset) {return{x:window.pagexoffset, y:window.pageyoffset}}< /c0>Else{                return{x:document.documentelement.scrollleft+Document.body.scrollLeft, Y:document.documentelement.scrolltop+Document.body.scrollTop//for the two of them really do not know how to distinguish, then by the way to calculate, rest assured that the same method generation version browser only one!!!                 }            }        }

?

Well, I'll go and fix another one, so who's bad??

View element size!!!

Well, there's no such thing as annoying.

On the method

Elem.getboundingclientrect (): Good compatibility, O (∩_∩) o~~

The return value is such an object

?

? Here to explain the old version of IE did not achieve width and height, and here return width = border + padding + content,height the same, to remember clearly oh, since he did not realize, That had to be the JavaScript in the world of Daniel (blow bragging, don't take it seriously, really nothing);

It's coming (only the width and height compatibility is handled here)

?

?

function Getelementoffset (elem) {            var obj = elem.getboundingclientrect ();             if (obj.width) {                return  {                    w:obj.width,                    h:obj.height                }            }  else{                return  {                    - obj.left,                    - obj.top                }            }        

? It's not bad, don't worry, there's one last I promise!!!!

viewing element dimensions

Ele.offsetwidth/ele.offsetheight returns the width of the element, rather than the 100px!!!

View element Location

Ele.offsettop/ele.offsetleft gets the top/left of the element

View element Location

Ele.offsettop/ele.offsetleft gets the top/left of the element

Ele.offsetparent returns the parent that has been positioned recently!!!

Here's a little bit more to explain:

Returns the coordinates in the document for the non-anchored parent

Returns the position of the relative parent for the parent that has the location (you can have no positioning)!!!

Today to write so much, do not know how people think, this is the first time to write a blog, we look at the good, there is a problem, remember to feedback oh, well this article write these.

JavaScript Common native DOM operations