js获取元素指定属性值的方法，然后打印出来，简答教程

js获取元素指定属性值的方法，其实网上漫天教程，但是怎么说呢，那些教程都是大佬写的，而我们都是小白，所以大佬写的东西虽然好，但是适用性不高，我是这么觉得，其实小编我一直都是一个小白，但是自己学到的东西一定会分享出来，毕竟技术这东西分享出来才能体现价值对吧，下面是我自己是思路和教程算是非常详细了，而且列举了很多简单通俗易懂的例子。
前言
在网页开发中，经常需要用JavaScript来获取或者修改HTML元素的属性值。这篇文章将向你展示如何使用JavaScript来获取HTML元素的属性值。我们将从最基础的概念开始，一步步地进行，确保即使是新手小白也能轻松学会。
什么是HTML属性？
在HTML中，标签可以有属性，属性提供了关于HTML元素的额外信息。例如，<input> 标签可以有 type, value, id, class 等属性。

1. <input type="text" value="Hello, World!" id="greeting" class="input-field">

复制代码

在这个例子中，type 属性告诉浏览器输入框的类型是文本，value 属性定义了输入框的初始值，id 属性提供了元素的唯一标识符，而 class 属性通常用于指定CSS样式。
如何用JavaScript获取属性值？
要使用JavaScript获取HTML元素的属性值，你可以使用以下两种方法：
getAttribute(): 这个方法可以直接从元素上获取指定的属性值。
属性访问：可以直接通过元素的属性名来访问。
使用 getAttribute()
getAttribute() 方法可以从HTML元素中获取指定属性的值。你需要做的是先获取到元素本身，然后调用这个方法并传入你想要获取的属性名称。
以下是获取属性值的基本步骤：
使用 document.getElementById() 或其他选择器获取元素。
调用 getAttribute() 方法并传入属性名。
例子：
假设我们有如下HTML元素：
<a href="https://www.example.com" id="example-link">Visit Example.com</a>
要获取这个链接的 href 属性，你可以这样做：

1. // 获取元素
   
2. var link = document.getElementById('example-link');
   
3. // 获取属性值
   
4. var hrefValue = link.getAttribute('href');
   
5. // 输出属性值
   
6. console.log(hrefValue); // 输出: https://www.example.com

复制代码

使用属性访问
JavaScript允许你直接通过属性名称来访问大多数HTML属性。对于上面的链接元素，你也可以这样获取 href 属性：
例子：

1. // 获取元素
   
2. var link = document.getElementById('example-link');
   
3. // 直接访问属性
   
4. var hrefValue = link.href;
   
5. 
   
6. // 输出属性值
   
7. console.log(hrefValue); // 输出: https://www.example.com

复制代码

需要注意的是，有些属性在DOM中的属性名可能与HTML标记中的属性名有所不同，例如，class 属性在DOM中是 className，for 标签在DOM中是 htmlFor。
实践环境搭建
为了让你能够实践上述内容，你需要创建一个HTML文件，并在其中加入一些元素和JavaScript代码。你可以在本地使用任何文本编辑器创建这个文件，并在浏览器中打开它来看到结果。
总结
现在你已经知道了如何使用JavaScript来获取HTML元素的属性值。你可以使用 getAttribute() 方法或者直接通过属性名访问。记得，实践是学习的关键，所以动手试试看！

感谢楼主，写的确实非常详细

感谢楼主，写的确实非常详细

这个方法在任何情况下都适用吗

我试试，多实践

必须支持楼主