setAttribute，和，getAttribute，的用法

setAttribute和getAttribute是JavaScript中DOM（文档对象模型）中的方法，通过这两种方法可以操作HTML元素的属性。setAttribute方法可以设置HTML元素的属性，而getAttribute方法可以获取HTML元素的属性。在实际开发中非常常用，本文将详细介绍这两种方法的用法，并通过案例进行说明。

一、setAttribute方法

setAttribute方法用于设置HTML元素的属性。具体语法如下：

```

element.setAttribute(attribute, value);

```

其中element表示要设置属性的HTML元素，attribute表示要设置的属性名，value表示要设置的属性值。

例如，下面的代码可以设置一个图片的src属性：

```

```

在上面的代码中，我们使用了getElementById方法获取了一个img元素，并使用setAttribute方法设置了图片的src属性。当我们在浏览器中运行该代码时，图片的src将被设置为“images/cat.jpg”。

除此之外，setAttribute方法还可以给元素设置自定义的属性，例如：

```

```

上面的代码中，我们给一个div元素设置了一个自定义的data-name属性，并将其值设置为“myDiv”。

二、getAttribute方法

getAttribute方法用于获取HTML元素的属性。具体语法如下：

```

element.getAttribute(attribute);

```

其中element表示要获取属性的HTML元素，attribute表示要获取的属性名。

例如，下面的代码可以获取一个图片的src属性：

```

```

在上面的代码中，我们使用了getElementById方法获取了一个img元素，并使用getAttribute方法获取了图片的src属性。当我们在浏览器中运行该代码时，控制台将输出“images/cat.jpg”。

除此之外，getAttribute方法还可以获取元素的自定义属性，例如：

```

```

上面的代码中，我们获取了一个div元素的自定义属性data-name的值，并将其输出到控制台。当我们在浏览器中运行该代码时，控制台将输出“myDiv”。

三、案例说明

为了更好地理解setAttribute和getAttribute方法的用法，我们来看一下一个简单的案例。

假设我们有一个登录界面，用户需要输入用户名和密码才能登录。我们可以使用一个表单实现这个功能，其中包含两个输入框和一个提交按钮。在用户输入完用户名和密码并点击提交按钮后，我们需要使用JavaScript来获取用户名和密码，并将其提交到后端进行验证。

下面是一个简单的HTML代码示例：

```

```

在上面的代码中，我们创建了一个表单，里面包含了两个输入框和一个提交按钮。其中用户名输入框的id为“username”，密码输入框的id为“password”，提交按钮的onclick事件绑定了一个名为submitForm的函数。

下面是一个简单的JavaScript代码示例：

```

function submitForm() {

var username = document.getElementById("username").value;

var password = document.getElementById("password").value;

var xhr = new XMLHttpRequest();

xhr.open("POST", "/login", true);

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

console.log(xhr.responseText);

}

};

xhr.send("username=" + username + "&password=" + password);

}

```

在上面的代码中，我们定义了一个名为submitForm的函数。在该函数中，我们使用了两次getElementById和两次value属性获取了用户名和密码，并将其存储到了变量username和password中。接着，我们使用XMLHttpRequest对象创建了一个POST请求，并将用户名和密码作为参数提交到了后端进行验证。最后，在请求成功时，我们使用console.log方法输出了后端返回的响应内容。

在这个案例中，我们使用了setAttribute和getAttribute方法来获取和设置HTML元素的属性。其中，我们使用了getElementById方法获取了两个输入框元素，然后使用value属性获取了它们的值。接着，我们将获取到的用户名和密码通过POST请求提交到了后端进行验证。这就是使用setAttribute和getAttribute方法实现登录表单的简单示例。

总结：

setAttribute和getAttribute方法是JavaScript操作HTML属性的重要方法，在开发中经常用到。setAttribute方法可以设置HTML元素的属性，而getAttribute方法可以获取HTML元素的属性。通过本文的介绍和案例实践，相信大家已经掌握了setAttribute和getAttribute方法的用法和使用场景。在实际开发中，我们可以根据具体需求，灵活运用这两种方法来操作HTML元素的属性。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/