JavaScript中对各种HTML元素属性的操作一览及代码案例

引言：
JavaScript是一种广泛应用于Web开发的脚本语言，它提供了丰富的API和方法，用于对HTML元素的属性进行操作。本篇博客将一一列举JavaScript中对各种HTML元素属性的操作方法，并提供相应的代码案例，帮助读者更好地理解和应用JavaScript在Web开发中的作用。

一、基本属性操作：

1. innerHTML：获取或设置元素的HTML内容。

代码案例：

// 获取元素的HTML内容
var element = document.getElementById("myElement");
var htmlContent = element.innerHTML;

// 设置元素的HTML内容
element.innerHTML = "<h1&gt;Hello, World!</h1&gt;";

2. innerText：获取或设置元素的文本内容（不包括HTML标签）。

代码案例：

// 获取元素的文本内容
var element = document.getElementById("myElement");
var textContent = element.innerText;

// 设置元素的文本内容
element.innerText = "Hello, World!";

3. value：获取或设置表单元素的值，如input、textarea等。

代码案例：

// 获取表单元素的值
var inputElement = document.getElementById("myInput");
var value = inputElement.value;

// 设置表单元素的值
inputElement.value = "Default Value";

4. className：获取或设置元素的类名。

代码案例：

// 获取元素的类名
var element = document.getElementById("myElement");
var className = element.className;

// 设置元素的类名
element.className = "newClass";

5. id：获取或设置元素的唯一标识符。

代码案例：

// 获取元素的唯一标识符
var element = document.getElementById("myElement");
var id = element.id;

// 设置元素的唯一标识符
element.id = "newId";

二、样式属性操作：

1. style：获取或设置元素的样式属性，如元素的宽度、高度、颜色等。

代码案例：

// 获取元素的样式属性
var element = document.getElementById("myElement");
var width = element.style.width;
var color = element.style.color;

// 设置元素的样式属性
element.style.width = "200px";
element.style.color = "red";

2. getComputedStyle()：获取元素的计算后样式，包括通过CSS样式表和内联样式计算后的结果。

代码案例：

// 获取元素的计算后样式
var element = document.getElementById("myElement");
var computedStyle = window.getComputedStyle(element);
var color = computedStyle.color;

三、事件属性操作：

1. onclick：设置元素被点击时触发的事件。

代码案例：

// 设置元素点击事件
var element = document.getElementById("myElement");
element.onclick = function() {
  console.log("Element clicked!");
};

2. onmouseover：设置鼠标悬停在元素上方时触发的事件。

代码案例：

// 设置

鼠标悬停事件
var element = document.getElementById("myElement");
element.onmouseover = function() {
  console.log("Mouse over element!");
};

3. onmouseout：设置鼠标移出元素时触发的事件。

代码案例：

// 设置鼠标移出事件
var element = document.getElementById("myElement");
element.onmouseout = function() {
  console.log("Mouse out of element!");
};

4. onkeydown：设置按下键盘按键时触发的事件。

代码案例：

// 设置键盘按键按下事件
document.onkeydown = function(event) {
  console.log("Key pressed: " + event.key);
};

5. onsubmit：设置表单提交时触发的事件。

代码案例：

// 设置表单提交事件
var form = document.getElementById("myForm");
form.onsubmit = function() {
  console.log("Form submitted!");
};

四、属性操作方法：

1. getAttribute()：获取元素的指定属性的值。

代码案例：

// 获取元素的指定属性值
var element = document.getElementById("myElement");
var attributeValue = element.getAttribute("data-custom");

2. setAttribute()：设置元素的指定属性的值。

代码案例：

// 设置元素的指定属性值
var element = document.getElementById("myElement");
element.setAttribute("data-custom", "new value");

3. hasAttribute()：检查元素是否具有指定的属性。

代码案例：

// 检查元素是否具有指定属性
var element = document.getElementById("myElement");
var hasAttribute = element.hasAttribute("data-custom");

4. removeAttribute()：移除元素的指定属性。

代码案例：

// 移除元素的指定属性
var element = document.getElementById("myElement");
element.removeAttribute("data-custom");

五、表单元素属性操作：

1. disabled：设置表单元素是否禁用。

代码案例：

// 设置表单元素禁用
var inputElement = document.getElementById("myInput");
inputElement.disabled = true;

2. checked：设置复选框或单选框是否被选中。

代码案例：

// 设置复选框或单选框选中
var checkbox = document.getElementById("myCheckbox");
checkbox.checked = true;

3. selectedIndex：获取或设置下拉列表选中项的索引。

代码案例：

// 获取或设置下拉列表选中项的索引
var selectElement = document.getElementById("mySelect");
var selectedIndex = selectElement.selectedIndex;
selectElement.selectedIndex = 2;

4. options：获取下拉列表的所有选项。

代码案例：

// 获取下拉列表的所有选项
var selectElement = document.getElementById("mySelect");
var options = selectElement.options;

六、图片元素属性操作：

1. src：获取或设置图片元素的源地址。

代码案例：

// 获取或设置图片元素的源地址
var imageElement = document.getElementById("myImage");
var src = imageElement.src;
imageElement.src = "newimage.jpg";

2. alt：获取或设置图片元素的替代文本。

代码案例：

// 获取或

设置图片元素的替代文本
var imageElement = document.getElementById("myImage");
var altText = imageElement.alt;
imageElement.alt = "New alternative text";

七、链接元素属性操作：

1. href：获取或设置链接元素的目标地址。

代码案例：

// 获取或设置链接元素的目标地址
var linkElement = document.getElementById("myLink");
var href = linkElement.href;
linkElement.href = "http://www.example.com";

2. target：获取或设置链接元素的目标窗口。

代码案例：

// 获取或设置链接元素的目标窗口
var linkElement = document.getElementById("myLink");
var target = linkElement.target;
linkElement.target = "_blank";

结论：
JavaScript提供了丰富的属性操作方法，用于操作各种HTML元素。通过对这些属性进行读取和设置，我们可以实现动态的页面效果、用户交互以及表单验证等功能。本篇博客介绍了基本属性操作、样式属性操作、事件属性操作、属性操作方法以及针对表单元素、图片元素和链接元素的属性操作方法，并提供了相应的代码案例。深入了解和应用这些操作方法将帮助开发者更好地利用JavaScript开发出更丰富和交互性强的Web应用程序。

参考文献：

1. JavaScript HTML DOM – w3schools.com
2. JavaScript: The Definitive Guide, 6th Edition (David Flanagan)

代码007普通

打赏 收藏 海报 链接