zoukankan      html  css  js  c++  java
  • getElementById和ByTagName的区别

    原生js中获取元素的方法有很多,那么今天就来重点说一下getElementById和ByTagName的区别:

    1、getElementById前面必须是document;而getElementByTagName前面除了是document也可以是其他的元素;先来看一下简单的html代码

     1 <ul>
     2     <li></li>
     3     <li></li>
     4     <li></li>
     5 </ul>
     6 <ol>
     7     <li></li>
     8     <li></li>
     9     <li></li>
    10 </ol>

    举例说明,就如上面的html,我们若是想要找到ol里的li,那么我们就应该先找到ol,然后找它里面的li,那么js代码获取就应该这么写

    1 var Ol=document.getElementById("ol");//就要先把ol上设个id,然后通过id找到它
    2 var li=Ol.getElementsByTagName("li");//接下来就找ol里的li

    2、getElementById算是一个静态方法,而getElementByTagName是一个动态方法,需注意的是ByTagName找到的元素肯定是一个集合,就算页面只有一个,那么也就说这个集合的长度为1,和数组类似。

    比如,一个页面里没有任何标签,但是我们想给它动态添加几个button,那么我们就应该先给body添加几个,应该这么写:

    1 document.body.innerHTML="<input type='button' value='按钮'/>,<input type='button' value='按钮'/>,<input type='button' value='按钮'/>" ;

     给body添加完按钮,那么我们想要找到这几个按钮中的第二个,那么就要通过ByTagName了,具体写法是这样的:

    1  var Btn=document.etElementsByTagName("input");//先获取页面的上的button;
    2      Btn[1].onclick=function(){//ByTagName获取到的相当于是一个集合,和数组类似,但是不太一样,所以也是从0开始的,想要找到第二个,那么后面就必须要跟[1]
    3          alert("我是第二个按钮")
    4         };

     既然这里说到给body添加标签,那么也再说一点,我们也可以改变页面上title里的内容,具体写法是:

    1 document.title="欢迎你";//和在body里添加内容是不一样,可以直接写在document后面

     给body添加一定要记得写innerHTML,而title却不一样。好了,今天就写到这里吧,明天继续!

  • 相关阅读:
    函数的四种调用模式.上下文调用.call.apply
    caller.arguments.callee.eval
    面向对象相关知识总结
    javascript与jQuery的each,map回调函数参数顺序问题
    HTML5自定义属性的设置与获取
    [bzoj1911][Apio2010]特别行动队
    [学习笔记]乘法逆元
    [日常训练]普通计算姬
    [学习笔记]线性筛
    [学习笔记]数论(一)
  • 原文地址:https://www.cnblogs.com/web001/p/7860863.html
Copyright © 2011-2022 走看看