JavaScript中document对象使用详解

当我们通过JavaScript来控制网页的时候，我们不可避免地要使用到document对象。document对象是DOM层次结构中的根节点，表示整个HTML文档。在这里我将为大家提供JavaScript中document对象的使用详解。

获取元素

1. 通过ID获取元素

var element = document.getElementById("my-element");

上面这一行代码表示通过id为“my-element”的元素的DOM对象，并将其赋值给变量element。使用getElementById方法只能获取一个元素，如果有多个元素具有相同的ID，则只能获取到第一个。

1. 通过标签名获取元素

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

上面这一行代码表示通过标签名为“p”的元素的DOM对象数组，并将它们赋值给变量elements。使用getElementsByTagName方法可以获取到所有匹配的元素。

1. 通过类名获取元素

var elements = document.getElementsByClassName("my-class");

上面这一行代码表示通过类名为“my-class”的元素的DOM对象数组，并将它们赋值给变量elements。使用getElementsByClassName方法可以获取到所有匹配的元素。

创建元素

var newElement = document.createElement("div");

上面这一行代码表示创建了一个新的div元素，并将其赋值给变量newElement。我们可以使用appendChild方法将其添加到页面中。

修改元素

1. 修改元素的文本

element.innerHTML = "Hello world!";

上面这一行代码表示将id为“my-element”的元素的文本内容修改为“Hello world!”。

1. 修改元素的属性

element.setAttribute("id", "new-id");

上面这一行代码表示将id为“my-element”的元素的id属性修改为“new-id”。

以上是JavaScript中document对象的使用详解，希望对大家有所帮助。