DOM杂学

1.函数（箭头，普通匿名）中this问题（在表单中禁用效果）

表单中可以操作的属性
type、value、checked、selected、disabled

this无效

this指向函数调用者

操作属性

element.style.属性

 btn.onclick=function(){
       this.style.backgroundColor='#ccc';//驼峰命名法，行内样式权重高
            box.style.display='none';
        }

例子;模仿常规密码明文显示
(注：ie浏览器自带图标）

<div id="password">  
        <input type="password" name="">
        <label for="">
            <ion-icon name="eye-off-outline"></ion-icon>
            <!-- <ion-icon name="eye-outline"></ion-icon> -->
        </label>
    </div>

    var ion=document.querySelector('ion-icon');
        console.log(ion);
        var id=document.querySelector('#password');
        var type=document.querySelector('input');
        var flag=0;
        ion.onclick=function(){
            if(flag==0){
                this.name='eye-outline';
            console.log( this.name);
            type.type='text';
            flag=1;
            }else{
                this.name='eye-off-outline';
            console.log( this.name);
            type.type='password';
            flag=0;
            }
           
        }

内容创建

   //   document.write()页面重绘 window.οnlοad=function(){}
        document.write('<span>w</span>')
        innerhtml 拼接耗时长.数组形式拼接效率高
        creatElement 结构更清晰

     //innerHtml拼接方式，效率比creatElement低
     var div=document.querySelector('div');
        for (var i =0;i < 100;i++) {
            div.innerHTML+='<p>好的</p>';
            
        }
        //数组方式 效率比creatElement高
        var array=[];
        for (var i = 0; i < 100; i++) {
           array.push('<p>好的</p>');
            
        }
        div.innerHTML=array.join('');

    //creatElement 结构更清晰
       for (var i = 0; i < 100; i++) {
         var span=document.createElement('span');
         div.appendChild(span);
        
       }