JavaScript 三种方法实现获得和设置以及移除元素属性

在 JavaScript 中，我们可以通过以下三种不同的方法来获取、设置或者移除 DOM 元素的属性：

1. getAttribute() 和 setAttribute()
2. .属性名
3. .dataset

1. getAttribute() 和 setAttribute() 方法

getAttribute() 方法是用来获取 DOM 元素的属性值，其基本语法格式如下：

element.getAttribute(attributeName);

其中，attributeName是我们想要获取的属性的名称。

例如，在以下 HTML 代码中：

<button id="myButton" title="Click me">Button</button>

我们想要获取该 <button> 元素的 title 属性时，可以使用如下 JavaScript 代码：

var button = document.getElementById("myButton");
var title = button.getAttribute("title");

console.log(title); // 输出: "Click me"

同样的，我们也可以使用 setAttribute() 方法来设置一个元素的属性值。

其基本语法格式如下：

element.setAttribute(attributeName, attributeValue);

其中，attributeName是我们想要设置的属性的名称，而attributeValue则是我们想要设置的属性的值。

例如，在以下 HTML 代码中：

<button id="myButton">Button</button>

我们想要将该 <button> 元素的 title 属性设置为 "Click me" 时，可以使用如下 JavaScript 代码：

var button = document.getElementById("myButton");
button.setAttribute("title", "Click me");

console.log(button.title); // 输出： "Click me"

我们也可以使用 removeAttribute() 方法来移除一个元素的属性值，例如：

var button = document.getElementById("myButton");
button.removeAttribute("title");

console.log(button.title); // 输出: ""

2. .属性名

除了使用 getAttribute() 和 setAttribute() 方法之外，我们还可以直接通过 DOM 元素的属性名来访问和设置元素的属性值。

例如，在以下 HTML 代码中：

<button id="myButton" title="Click me">Button</button>

我们可以通过改变 myButton 元素的 title 属性值，来改变 <button> 元素的标题文本：

var button = document.getElementById("myButton");
button.title = "New title value";

console.log(button.title); // 输出: "New title value"

我们也可以使用这种方法来移除元素的属性值。例如：

var button = document.getElementById("myButton");
button.title = "";

console.log(button.title); // 输出: ""

3. .dataset

最后一种方法是通过访问元素的 .dataset 属性来获取和设置 HTML 元素的自定义属性。

例如，在以下 HTML 代码中：

<div id="myDiv" data-foo="Hello" data-bar="World"></div>

我们可以使用 .dataset 属性来访问自定义属性 data-foo 和 data-bar：

var myDiv = document.getElementById("myDiv");
var foo = myDiv.dataset.foo;
var bar = myDiv.dataset.bar;

console.log(foo); // 输出: "Hello"
console.log(bar); // 输出: "World"

同样的，我们也可以使用 .dataset 属性来设置自定义属性的值：

var myDiv = document.getElementById("myDiv");
myDiv.dataset.foo = "New value for data-foo";

console.log(myDiv.dataset.foo); // 输出: "New value for data-foo"

使用 .dataset 属性设置自定义属性值时，需要注意属性名不能包含大写字母和连字符外的任何字符。例如，如果我们想要设置一个名为 "data-some-variable" 的自定义属性，我们需要将其改为 "data-someVariable" 或者 "data-some_variable" 才能够成功设置。