关闭

前端开发错误记录

标签: 前端开发基础
85人阅读 评论(0) 收藏 举报
分类:

引言

    加入csdn已经几个月了,最开始只是在水区看看帖子,后来转到了web开发板块。期间也回答了一些别人的问题,当然也看了许多前辈们的精彩回答。做前端开发两年多了,回头看看自己什么都没留下!在工作中有遇到很多之前遇到过的问题只因为没记录下来,再次遇到的时候又会花时间去解决。所以我觉得应该把这些东西记录下来,时间真的可以让一起都变得模糊。

首次发帖,如有错误还请各位指正。

HTML

关于DOM无法获取

  • 页面元素还未被加载在js里面就获取了dom导致找不到。
<script>
  var el = document.getElementById('main');
  console.log(el);//null
  //html的解析是按照顺序的,在加载script的时候页面的dom还不存在所以是获取不到的
</script>
<body>
    <div id='main'></div>
</body>
  • 解决方法一
<body>
    <div id='main'></div>
<script>
  var el = document.getElementById('main');
  console.log(el);//<div id="main">
</script>
</body>
  • 解决方法2
<script>
  window.onload = function(){
   var el = document.getElementById('main');
   console.log(el);//<div id="main">
  }
  //或者使用jq ready
</script>
<body>
    <div id='main'>
    <p>p1</p>
    </div>
</body>

之前看到别人的提问的问题是动态添加的dom元素无法响应事件,也是属于这种情况。如果使用jquery on绑定子节点事件就没问题了$(‘#main’).on(‘click’, ‘p’, function(){//do somesthing})。为了避免遇到这些错误可以在最后面写script或者引入外部的js文件


关于动态添加的dom元素

  • 存在一些子节点用appendChild
 <ul id='main'>
     <li>已存在</li>
 </ul>
 <script>
     var el = document.getElementById('main'),html='';
     function createElement(){
      for(var i = 0; i<5; i++){
         var li = '<li>li_'+(i+1)+'<li>';
         el.appendChild(li);
      }
     }

 </script>
  • 不存在子节点一次性添加,减少dom操作次数
<ul id='main'></ul>
<script>
    var el = document.getElementById('main');
    function createElement(){
        var arr = [];
        for(var i = 0; i<5; i++){
            var html = '<li>li_'+(i+1)+'</li>';
            arr.push(html);
        }
        el.innerHTML = arr.join('');
    }
    createElement();
</script>

Array

  • splice删除替换
var arr = [1,2,3,4];
console.log(arr.splice(2,2,1,3,6,4));//3,4这里返回的是被删除的部分类型是Array
console.log(arr);//1,2,1,3,6,4这个才是最后的数组

之前没好好看api一直在想怎么splice返回的结果和想到不一样,主要还是和slice搞混了。splice会改变原数组,slice不会

目录

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:164次
    • 积分:20
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档