JS的一些常用知识点

XXX.className = 'xxx';

只有HTML元素上自带的“特性”才能通过 XXX.XX 的形式直接取值或赋值
否则其他属性只能get/set取值或赋值

XXX.setAttribute('xxx','xx');
//第一个属性 第二个属性值

XXX.getAttribute('xxx');

Math.rander()   // 左闭右开 [0,1）
Math.floor()   // 向下取整

demo 取[2, 5)区间的数值
  用Math.rander() * 区间差值 +/- 偏移量

当需要for循环创建大量标签，为了提高浏览器渲染速度，可采用fragment和 拼接字符串的形式

var oUL = document.getElementsByTagName('ul')[0];
var oFrag = document.createDocumentFragment();
for(var i = 0; i < 10000; i++){
  var oLi = document.createElement('li');
  oLi.innerHTML = i;
  ofrag.appendChild(oLi);
}
oUl.appenChild(ofrag);

封装getByClassName  能处理一些className命名不规范的兼容性问题

<div class=" demo   item  aa">
<span class="  item     demo  bb "></span>
<ul class=" oo  ">
<li class="nn"></li>
</ul>
</div>

<script type="text/javascript">
  
         Document.prototype.getByClassName = function(className){
          var filterArr = [],
             allDomArr = Array.prototype.slice.call(document.getElementsByTagName('*'));
         
          function dealClass (dom){        
          var  reg = /\s+/g;
          var newArr = dom.className.replace(reg,' ').trim();    
          return newArr;
          }
         
          allDomArr.forEach(function(ele, index){
          var itemClassName = dealClass(ele).split(' ');
          for (var i = 0; i < itemClassName.length; i++) {
          if(itemClassName[i] == className){
          filterArr.push(ele);
          break;
          }
          }
          })
          return filterArr;
         }
         
           var oDemo = document.getByClassName('demo');           

</script>