整理JavaScript对DOM中各种类型的元素的常用操作

整理JavaScript对DOM中各种类型的元素的常用操作攻略

DOM是文档对象模型(Document Object Model)的缩写，JavaScript通过DOM对HTML页面中的各种元素进行操作，从而实现动态网页效果。在DOM中，各种类型的元素均可以通过JavaScript进行操作。下面，我们将详细讲解如何使用JavaScript对DOM中各种类型的元素进行常用操作。

获取元素对象

使用JavaScript操作DOM，首先需要获取目标元素的对象。常用的获取元素对象的方法有以下三种：

1. 通过ID获取

可以通过document.getElementById(id)方法获取指定ID的元素对象。例如，以下代码将获取页面中id为demo的元素对象，并将其赋值给变量element：

var element = document.getElementById("demo");

2. 通过标签名获取

可以通过document.getElementsByTagName(tagName)方法获取指定标签名的元素对象。例如，以下代码将获取页面中所有p标签的元素对象，并将其存储在类数组对象elements中：

var elements = document.getElementsByTagName("p");

3. 通过类名获取

可以通过document.getElementsByClassName(className)方法获取指定类名的元素对象。例如，以下代码将获取页面中所有类名为example的元素对象，并将其存储在类数组对象elements中：

var elements = document.getElementsByClassName("example");

获取和设置元素属性

DOM元素的各种属性可以通过JavaScript进行获取和设置。

1. 获取元素属性

可以使用element.getAttribute(name)方法来获取指定元素的属性值。其中，name是属性名。例如，以下代码将获取元素<img>的src属性值，并将其赋值给变量srcValue：

var img = document.getElementById("myImg");
var srcValue = img.getAttribute("src");

2. 设置元素属性

可以使用element.setAttribute(name, value)方法来设置指定元素的属性值。其中，name是属性名，value是属性值。例如，以下代码将设置元素<img>的src属性为"images/newpic.jpg"：

var img = document.getElementById("myImg");
img.setAttribute("src", "images/newpic.jpg");

获取和设置元素样式

元素的样式可以通过JavaScript来操作。

1. 获取元素样式

可以使用element.style.property来获取指定元素的样式值。其中，property是样式名。例如，以下代码将获取元素<p>的字体颜色（color）：

var p = document.getElementById("myP");
var colorValue = p.style.color;

2. 设置元素样式

可以使用element.style.property = value来设置指定元素的样式值。其中，property是样式名，value是样式值。例如，以下代码将设置元素<p>的字体颜色为红色：

var p = document.getElementById("myP");
p.style.color = "red";

以上是JavaScript常用的操作DOM中各种类型的元素的操作攻略，希望这些内容能对你有所帮助。