大家好这里是X🚅🚅🚅，今天带来JavaScript的两个很重要的方法,例子和方法说明都很清楚啦,大家快来学习一下吧~P:欢迎留言和收藏一波噢
先来简述一下它们的基本作用：
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的无序元素,好啦,今天这两个方法的解释到这里结束了噢
