原生js操作dom汇总，不断添加中

2019独角兽企业重金招聘Python工程师标准>>>

有时候，一些很小的东西，去使用jquery之类的库显得太麻烦了，还是用原生js来得简洁。

原生js获取元素，并获取元素的内部元素列表

    var li_list = window.document.getElementById('img_list').children;
    
    for(var i =0; i < li_list.length ; i++){
        var img_list = li_list[i].children;
        for(var j=0;j<img_list.length;j++){
            if(img_list[j].nodeName.toLowerCase() == 'img'){
                img_list[j].addEventListener('click',function(){
                    document.getElementById("view").setAttribute('content','width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes');
                    document.getElementById('show_gallery').innerHTML = '<img src="' + this.getAttribute('big_img') + '" />';
                    document.getElementById('show_gallery').style.display = 'flex';

                })                
            }
        }
    }

原生js为元素添加事件：

                img_list[j].addEventListener('click',function(){
                    document.getElementById("view").setAttribute('content','width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes');
                    document.getElementById('show_gallery').innerHTML = '<img src="' + this.getAttribute('big_img') + '" />';
                    document.getElementById('show_gallery').style.display = 'flex';

                })     

//原生js操作元素样式，改变元素内容

                    document.getElementById('show_gallery').innerHTML = '<img src="' + this.getAttribute('big_img') + '" />';
                    document.getElementById('show_gallery').style.display = 'flex';

 

 

转载于:https://my.oschina.net/u/3007124/blog/1839478