原生js获取元素的方法：getElementById和ByTagName的区别

内容摘要
这篇文章主要为大家详细介绍了原生js获取元素的方法：getElementById和ByTagName的区别，具有一定的参考价值，可以用来参考一下。
文章正文

这篇文章主要为大家详细介绍了原生js获取元素的方法：getElementById和ByTagName的区别，具有一定的参考价值，可以用来参考一下。

对此感兴趣的朋友，看看idc笔记做的技术笔记。原生js中获取元素的方法有很多，
那么今天就来重点说一下getElementById和ByTagName的区别：
1、getElementById前面必须是document；而getElementByTagName前面除了是document也可以是其他的元素；
先来看一下简单的html代码 html代码如下： 

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

/**
 * getElementById和ByTagName的区别
 *
 * @param 
 * @arrange （www.idcnote.com）
 **/
 var Ol=document.getElementById("ol");//就要先把ol上设个id，然后通过id找到它
 var li=Ol.getElementsByTagName("li");//接下来就找ol里的li
2、getElementById算是一个静态方法，而getElementByTagName是一个动态方法，需注意的是ByTagName找到的元素肯定是一个集合，
就算页面只有一个，那么也就说这个集合的长度为1，和数组类似。
比如，一个页面里没有任何标签，但是我们想给它动态添加几个button，那么我们就应该先给body添加几个，应该这么写：
JS代码如下： 

/**
 * getElementById和ByTagName的区别
 *
 * @param 
 * @arrange （www.idcnote.com）
 **/
 document.body.innerHTML="<input type='button' value='按钮'/>,<input type='button' value='按钮'/>,<input type='button' value='按钮'/>" ;
给body添加完按钮，那么我们想要找到这几个按钮中的第二个，那么就要通过ByTagName了，具体写法是这样的： JS代码如下： 

/**
 * getElementById和ByTagName的区别
 *
 * @param 
 * @arrange （www.idcnote.com）
 **/
var Btn=document.etElementsByTagName("input");//先获取页面的上的button；
      Btn[1].onclick=function(){//ByTagName获取到的相当于是一个集合，和数组类似，但是不太一样，所以也是从0开始的，想要找到第二个，那么后面就必须要跟[1]
          alert("我是第二个按钮")
         };
既然这里说到给body添加标签，那么也再说一点，我们也可以改变页面上title里的内容，具体写法是：
JS代码如下： 

/**
 * getElementById和ByTagName的区别
 *
 * @param 
 * @arrange （www.idcnote.com）
 **/
document.title="欢迎你";//和在body里添加内容是不一样，可以直接写在document后面
给body添加一定要记得写innerHTML，而title却不一样。

注：关于原生js获取元素的方法：getElementById和ByTagName的区别的内容就先介绍到这里，更多相关文章的可以留意
代码注释
上一篇原生JS for循环获取坐标的简单示例下一篇原生js解决图片点击左右切换（简单轮播图）的简单示例

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！