JavaScript浅显易懂(六)——选择元素的方法(一) getElementById、getElementsByTagName

最新推荐文章于 2024-07-12 08:35:59 发布

lvshun_19991027

最新推荐文章于 2024-07-12 08:35:59 发布

阅读量794

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43799743/article/details/106591899

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

getElementById

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。查找文档中的一个特定的元素最有效的方法。

getElementsByTagName

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。

如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。

实际操作如下图

实际操作、

HTML如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ColdPlay</title>

</head>
<body>
    <h1 id = "page-title">ColePlay</h1>
    <ul class="artist-list">
        <li>Chris Martin</li>
        <li>Jonny Buckland</li>
        <li>Guy Berryman</li>
    </ul>
    <script src="script.js"></script>
</body>
</html>

干货整理如下

 var pageTitle = document.getElementById('page-title');
 pageTitle.nodeName    返回元素节点名称
 pageTitle.innerText   返回元素文字内容
 pageTitle.parentNode   返回元素的父节点
 pageTitle.previousElementSibling  返回元素上一个兄弟节点
 pageTitle.nextElementsSibling 返回元素下一个兄弟节点
 pageTitle.nextElementsSibling.innerText 返回元素下一个兄弟节点的文字