getElementById和getElementByTagName的区别

在原生js中获取元素的方法有很多，那么今天就重点说一下getElementById和getElementByTagName的区别：
1、getElementById前面必须是document；而getElementByTagName前面除了是document也可以是其他的元素；先来看一下简单的html代码

<ul><li></li><li></li><li></li>
</ul>
<ol><li></li><li></li><li></li>
</ol>

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

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

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

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

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

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

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

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

//和在body里添加内容是不一样，可以直接写在document后面， 给body添加一定要记得写innerHTML，而title却不一样
document.title="谢谢观看，请留下评论吧！";

getElementById和getElementByTagName的区别相关推荐

getElementByID() getElementsByName() getElementsByTagName()的区别 .
getElementByID() getElementsByName() getElementsByTagName()的区别 Web标准下可以通过getElementById(), getElemen ...
getElementById与querySelector的区别
getElementById与querySelector的区别首先对获取元素的几个方法有所了解 getElementById():返回对拥有指定id的第一个对象的引用 getElementsByNa ...
document.getElementById与getElementsByName的区别（注意后者多个S）
1:id 就像身分证号,是唯一的, name 就像姓名一样可以同名 2:一个元素定义了 id ,引用该元素时直接用 id 属性,而 name 通常用在 form ...
getElementByName与getElementByTagName的区别
今天写了一个简单的js特效,整半天没有整出效果,原来是自己用错了方法 getElementsByName() 方法与 getelementById()方法类似,但是他查询的是元素的name属性 ...
javascript getElementByID,getElementsByName,getElementsByTagName的区别
getElementByID,getElementsByName,getElementsByTagName区别注意:方法区分大小写! 以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人.小 ...
document.getElementById与getElementByName的区别
document.getElementById( "id_Number ") 得到的是单个元素 document.getElementsByName( "name & ...
getElementById 和 getElementByName的区别
getElementById 根据HTML元素指定的ID,获得唯一的一个HTML元素.如访问DIV层对像.图片Img对像等! getElementByName 根据HTML元素指定Name,获得 ...
getElementById()和$(#id)的区别
转自:https://blog.csdn.net/weixin_41989775/article/details/81063161 1.getElementById()获取的是js对象,$(" ...
firefox与ie 的javascript区别
Document.form.item 问题现有问题: 现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在 firefox ...

getElementById和getElementByTagName的区别

getElementById和getElementByTagName的区别相关推荐

最新文章

热门文章