暴打JavaScript语法之getElementById()、getElementsByTagName()全能解释

最新推荐文章于 2023-11-03 10:06:08 发布

我是X大魔王

最新推荐文章于 2023-11-03 10:06:08 发布

阅读量2.5k

点赞数 4

分类专栏： javascript🎈 文章标签： javascript html html5

转载必须声明

本文链接：https://blog.csdn.net/Xmumu_/article/details/120105296

版权

javascript🎈 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

大家好这里是X🚅🚅🚅，今天带来JavaScript的两个很重要的方法,例子和方法说明都很清楚啦,大家快来学习一下吧~P:欢迎留言和收藏一波噢

在这里插入图片描述
先来简述一下它们的基本作用：

getElementById():返回一个对象，该对象对应着文档中一个特定的元素节点
getElementsByTagName():返回一个对象数组，它们分别对应着文档中一个特定的节点

getElementById()接收一个参数：就是要取得的元素的ID🪐
如果找到了该ID就返回该元素，如果不存在就返回null，该ID必须和页面中的ID严格匹配🏴如果说页面当中多个元素的ID值都相同,那么getElementById()只会返回文档中第一次出现的元素❗❗❗

document.getElementById("your_ID")

记住：该方法将返回一个对象
getElementsByTagName()方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素，该方法也是只有一个参数，参数就是标签名字，该方法与上一个函数方法不同的地方就是该方法返回的是一个数组，以下是具体使用方法👇👇👇

alert(document.getElementsByTagName("li").length);//返回数组长度
//小栗子
var your_list = document.getElementsByTagName("li");
alert(your_list.items(1).src);//可以输出该元素的某特性

💙以下是一个我的一个很棒的小习惯

就是每次要使用getElementsByTagName的时候很麻烦,可以先将document.getElementsByTagName赋值给一个变量,然后要用的时候就去访问这个变量就可以了,举个例子💨💨💨

在这里插入图片描述

var my_items = document.getElementsByTagName("li");
for(var i=0; i<my_items.length; i++){
  alert(typeof items[i]);
}//只是举个小栗子,这样要访问就比较方便

如果你想知道文档里总共有多少个元素节点:

alert(document.getElementsByTagName("*").length);
//使用*,并且*必须放在双引号里面,为的就是与乘法通配符分开

getElementsByTagName()方法也常常用在想要改变列表元素这种问题上
不懂的话就再来看一个例子🤍🤍🤍

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul><li>X MONSTER</li><li>XY</li></ul>
<p id="demo">点击我试试改变列表元素</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var list=document.getElementsByTagName("ul")[0]
	list.getElementsByTagName("li")[0].innerHTML="X";
};
</script>
</body>
</html>

运行前:
在这里插入图片描述
运行后:

两个方法结合使用💜

一般这两个方法会放在一起使用,具体看下:

var my_books = document.getElementById("books");
var my_items = my_books.getElementsByTagName("*");

上面两行代码执行结果就是my_items数组里包含其id属性为books的无序元素,好啦,今天这两个方法的解释到这里结束了噢

在这里插入图片描述

我是X大魔王

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
暴打JavaScript语法之getElementById()、getElementsByTagName()全能解释

大家好这里是X????????????，今天带来JavaScript的两个很重要的方法先来简述一下它们的基本作用：getElementById():返回一个对象，该对象对应着文档中一个特定的元素节点getElementsByTagName():返回一个对象数组，它们分别对应着文档中一个特定的节点getElementById()接收一个参数：就是要取得的元素的ID????如果找到了该ID就返回该元素，如果不存在就返回null，该ID必须和页面中的ID严格匹配????document.get
复制链接

扫一扫