JS Write compatibility Dom operation

Source: Internet
Author: User
Tags add filter contains empty return string tagname

First, the preface

Because a very small project or a few pages but to catch up on jquery, of course, is not worth, gzip, at least, there are small dozens of K. In order to be able to operate the DOM conveniently, we need to write a lot of compatible native JS. Just when I look at leaflet's source code, I think it's domutil writing is still good.

Second, the specific Code analysis

First, we define a class, var domutil = {functionname:function () {}}; The following are expressed in the form of literal quantities.

(1) Get: Gets an element

Get:function (ID) {         return
			typeof id = = ' string '? document.getElementById (ID): ID     ;}

It's simple, but the rough return is the element or the incoming argument.

(2) GetStyle: Get the style of the element

Getstyle:function (EL, style) {
//ie:currentstyle
//firefox:defaultview
var value =        El.style[style]  (El.currentstyle && el.currentstyle[style]);

if ((!value  value = = ' auto ') && document.defaultview) {
var css = Document.defaultView.getCom            Putedstyle (EL, null);
Value = CSS?        Css[style]: null;
return

Value = = = ' auto '? Null:value;
}

(3) Create: Creates an element (you can put it into the parent element)

Create an element (you can put it into a parent element)
Create:function (TagName, ClassName, container) {
var el = document.createelement (TagName);
El.classname = ClassName;
Whether the parent container exists
if (container) {
Container.appendchild (EL);
}

Return el;
}

(4) Remove: removing elements

removing elements from
Gets the parent element, and then the parent element removes the child element
Remove:function (EL) {
var parent = El.parentnode;
if (parent) {
Parent.removechild (EL);
}
}

(5) Empty: Empty element inner child element

Empty an element's inner child element
Empty:function (EL) {
while (El.firstchild) {
El.removechild (El.firstchild);
}
}

(6) Tofront: Put the element out at the end of the team or the top of the overlay, like a pie, on one level up, but if the same element is referenced, there is only one element in the parent container.

//placed on top
    tofront:function (EL) {
        El.parentNode.appendChild (EL);
   }

(6) Toback: Placed at the bottom of the team head or overlay layer.

   //placed at the bottom
    toback:function (EL) {
     & nbsp;  var parent = El.parentnode;
       //insertbefore:insertbefore (newchild,refchild)
         Parent.insertbefore (el, Parent.firstchild);
   }

(7) Hasclass: Is there a CSS style

//Return class set
    getclass:function (EL) {
  & nbsp;     return el.className.baseVal = = undefined? El.className:el.className.baseVal;
   } The

Classname.baseval is a way to get SVG, className is to get a collection with a space class name.

Is there a CSS class
hasclass:function (EL, name) {
//first to determine whether the classlist,classlist contains has, add, remove, and other methods
if (el.classlist!== undefined) {return
el.classList.contains (name);
var className = L.domutil.getclass (EL);
Return classname.length > 0 && New RegExp (' (^\\s) ' + name + ' (\\s$) '). Test (className);
}

Line 8th above, test whether the string contains this pattern with regular test.

(8) AddClass: Add Class Style

//Set class 
    setclass:function (el, name) {
        if (El.className.baseVal = = undefined) {
            El.classname = name;
       } else {
            //In case of SVG element
            El.className.baseVal = name;
       }
   }
Add Class String     addclass:function (el, name) {        if el.classlist!= = undefined) {            var classes = L.util.splitwords (
name);             for (var i = 0, len = classes.length i < len; i++)
{               //Call classlist Add                 El.classList.add (
Classes[i]);            }        } else if (! L.domutil.hasclass (el, name) {            var className = L.
Domutil.getclass (EL);            //setclass, overriding the previous class string              L.domutil.setclass (el, className? ClassName + ': ') + name);        }    }

(9) Removeclass: Remove class

Remove class
Removeclass:function (el, name) {
if (el.classlist!== undefined) {
El.classList.remove (name);
} else {
Replace as a string
L.domutil.setclass (el, L.util.trim (' + l.domutil.getclass (EL) + '). Replace (' + name + ', '));
}
}

(10) Set transparency

 //Set Transparency     setopacity:function (EL, value) {       // If there are opactity properties         if (' opacity ' in El.style) {    

        el.style.opacity = value;        } else if (' filter ' in El.style) {//Presence filter              var filter = False,          

       filtername = ' DXImageTransform.Microsoft.Alpha ';            //Filters collection throws an error if we try to ret Rieve a filter that doesn ' t exist             try {                 filter = El.filters.item (
FilterName);             catch (e) {                //don ' t set opacity to 1 if we haven ' t already set a opacity, &NBSP;&NBSP;&NBSP;&NBSP;&NB
sp;          //It isn ' t needed and breaks transparent pngs.                 if (value = = 1) {return ; }            }        

     value = math.round (value * 100);             if (filter) {                 filter.
Enabled = (value!== 100);                 filter.
Opacity = value;            } else {             
   El.style.filter + = ' ProgID: ' + filtername + ' (opacity= ' + value + ') ';
           }        }    }


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.