JS Write compatibility Dom operation

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,     &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 + ') ';
           }        }    }