一:两种获取元素方式的区别。1.var aLi = oUl.getElementsByTagName('li');TagName前面可以加其他东西,id就只能是document,2,Id是静态的,tagname是动态的,前者的获取无法获取后来js又添加的元素,3: tagname获取到的是很多元素。是一个集合,但不是数组,不过可以利用数组相似的特征属性,而且访问的时候要用xx【0】
4第三种特别的方法当获取的元素师页面唯一的时候 document.body.innerHtml="<input  type="button">或者直接字符串文字也可以的。document.title="这是标题内容"这两个有点区别,要注意。
二:什么时候用for循环,重复执行某些代码,每次执行,有一个数字在变化,以此来简化操作。
三:新手开始不知道js哪里错误的时候,可以用alet()进行逐行测试,自己取名理解为断点测试,
四:innerHtml的添加内容就是+=替换是=
body.innerHtml=插入的文字内容这个等号是替换的,赋值,也就是全部改变了。要想全部都要,需要这样,innerHtml body.innerHtml+=插入的文字内容(innerHtml 写法错误)
五:性能问题,for循环页面加载2000个按钮,将会产生5到10秒的页面延迟加载。
  1. var arr = [ '今天', '明天', '后天' ];
  2. var len = arr.length;
  3. for( var i=0; i<len; i++ )
  4.  
上面的代码做了优化,提前吧长度计算出来并且保存着,如果直接是i<arr.length,这样每次循环都要计算一次,性能优化很不好的
  1. for( var i=0; i<6000; i++ ){
  2. document.body.innerHTML += '<input type="button" value="按钮" />';
  3.  
for本身并没有问题,但是上面的代码 document.body.innerHTML += '<input type="button" value="按钮" />';太坑爹会导致,每次都要进入body,一个一个进行查找,添加,特别费力,也要做优化的,
  1. var str = '';
  2. for( var i=0; i<6000; i++ ){
  3. // document.body.innerHTML += '<input type="button" value="按钮" />';
  4. str += '<input type="button" value="按钮" />';
  5. }
  6. document.body.innerHTML = str;
  7.  
这样的话,只是单纯的计算字符串,并没有和页面body发生关系,也就变得很快了、
六:很重要的一个。innerHTML这个比较特殊,后面都是大写,必须注意。不然就会发生错误
七:oBtn.disabled=true;就让按钮不能按了。并不是每次都是style,本来写在css中是、、、
 
 

获取元素Bytagname区别/for循环应用的更多相关文章

  1. javascript querySelector和getElementById通过id获取元素的区别

    querySelector和getElementById通过id获取元素的区别 <!DOCTYPE html> <html> <head> <meta cha ...

  2. 原生JS与JQ获取元素的区别

    刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...

  3. querySelectorAll和getElementsByClassName获取元素的区别

    querySelectorAll()方法是HTML5新增的方法,通过传入一个css选择符,返回所有匹配的元素而不仅仅是一个元素.这个方法返回的是一个NodeList的实例.那么它和通过getEleme ...

  4. mui选择器和dom获取元素的区别(记得把mui对象转为dom对象才能调用用dom方法)

    <!DOCTYPE html><html> <head><meta charset="UTF-8"><meta name=&q ...

  5. JS——通过标签获取元素、循环语句、数组去重

    通过标签获取元素: var aLi = document.getElementsByTagName('Li'); aLi[0].style.backgroundColor = 'gold'; 选中部分 ...

  6. JQ的offset().top与JS的getBoundingClientRect区别详解,JS获取元素距离视窗顶部可变距离

     壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...

  7. document.getElementById 和 document.getElementsByClassName获取DOM元素的区别

    想必小伙伴们对于 JS 获取DOM的几种方法早已烂熟于心,了然于胸,   尤其是 document.getElementById 和 document.getElementsByClassName, ...

  8. js中用tagname和id获取元素的3种方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. JS获取元素CSS值的各种方法分析

    先来看一个实例:如何获取一个没有设置大小的字体? <!DOCTYPE html> <html lang="en"> <head> <met ...

随机推荐

  1. 制作HUD

    转自:http://www.cnblogs.com/NEOCSL/archive/2012/03/05/2380341.html 1. HUD不仅仅能提供基本的显示信息给玩家,例如玩家的生命值等.在I ...

  2. stm32之时钟控制

    本文提到的有以下内容: 时钟系统与总线矩阵 SysTick系统定时器 RTC实时时钟 看门狗定时器 通用定时器 一.时钟系统与总线矩阵 stm32F4的时钟树如下图所示: 在STM32中,有五个时钟源 ...

  3. jquery 插件 国外

    http://www.jqueryrain.com/demo/jquery-portfolio-gallery-plugin/

  4. java.lang.NoClassDefFoundError: org/springframework/dao/support/DaoSupport

    转自:https://blog.csdn.net/lzx159951/article/details/79753493 1. 缺少:org.springframework.transaction-3. ...

  5. Eclipse插件:tomcatPluginV33.zip 安装

    一.下载 地址:http://www.eclipsetotale.com/tomcatPlugin.html 二.安装 1.解压tomcatPluginV33.zip到Eclipse的\feature ...

  6. [golang] Glide 包管理工具,在windows10 64位系统上的bug修复方案

    bug重现 [ERROR] Unable to export dependencies to vendor directory: Error moving files: exit status 1. ...

  7. go语言中将函数作为变量传递

    在Go中函数也是一种变量,我们可以通过type来定义它,它的类型就是所有拥有相同的参数,相同的返回值的一种类型,函数当做值和类型在我们写一些通用接口的时候非常有用,通过下面这个例子我们可以看到test ...

  8. Elasticsearch Query DSL查询入门

    本篇为学习DSL时做的笔记,适合ES新手,大佬请略过~ Query DSL又叫查询表达式,是一种非常灵活又富有表现力的查询语言,采用JSON接口的方式实现丰富的查询,并使你的查询语句更灵活.更精确.更 ...

  9. <!--[if !IE]> 的用法

    除IE外都可识别

  10. 51nod 1831 小C的游戏

    小C和小L是好朋友,她们在玩一个游戏. 一开始有一个大小为n的石子堆,小C先手. 每次可以对这个石子堆拿走一个或者把这个石子堆分成等量的几份并只取其中一份(不能不变或只剩下一个). 如果取走最后一个人 ...