JS文档对象模型（DOM）之从document获取元素的方法

发布时间：2023-05-19

JS的DOM提供了多个方法来获取页面上的HTML元素，这些方法都可以通过Document对象来调用。下面我将从多个方面对document获取元素的方法做详细的阐述。

一、Document对象获取元素的方法

Document对象是DOM的入口，该对象提供了许多方法来获取页面元素。其中，最常用的方法是getElementById和getElementsByTagName方法。 getElementById方法接受一个字符串参数，它是要获取的元素的ID属性的值。该方法返回一个具有给定ID的元素，如果没有与该ID匹配的元素，则返回null。 getElementsByClassName方法与getElementById方法类似，只不过它接受的是一个类名，返回具有该类名的元素的集合。 getElementsByTagName方法接受一个字符串参数，它是要获取的元素的标签名。该方法返回一个具有给定标签名的元素的集合。

// 找到ID为“logo”的元素
var logo = document.getElementById("logo");
// 找到类名为“nav”的所有元素
var nav = document.getElementsByClassName("nav");
// 找到所有的p元素
var p = document.getElementsByTagName("p");

二、Document创建元素

Document对象不仅可以获取页面元素，还可以通过createElement方法创建新的HTML元素。这个方法返回一个新的元素对象，可以给该对象设置属性。 Document.createElement是DOM提供的重要方法，它用于创建HTML元素，参数为创建的元素名称。HTML标签名必须是大写的，例如<IMG>而不是<img>或<Img>。 为创建的HTML元素添加文本内容，使用Document.createTextNode()方法创建文本节点，然后将该节点追加到所创建的元素上。

// 创建一个新的div元素
var newDiv = document.createElement("div");
// 给新创建的div元素添加内容
var newText = document.createTextNode("这是一段新的文本。");
newDiv.appendChild(newText);

三、通过ID获取页面元素

我们常常需要根据页面中的元素ID获取该元素的引用。可以使用getElementById方法获取该元素的引用。 例如，以下代码获取ID为"main"的元素：

var main = document.getElementById("main");

四、获取元素的值

使用getElementById方法获取元素后，可以通过该元素的属性来获取其值。常用的属性有：

  • value：获取表单元素的值。
  • innerHTML：获取元素的HTML内容。
  • src：获取<img>元素的URL。 例如，以下代码获取ID为"title"的元素的值：
var title = document.getElementById("title").innerHTML;

五、Document对象提供的方法

在JS的DOM中，Document对象还提供了很多其他有用的方法，例如：

  • createTextNode(text)：创建一个文本节点，其中文本为text。
  • createElement(tagName)：创建一个具有给定标记名称的元素。
  • appendChild(newNode)：将一个新的子节点添加到元素的子节点列表的末尾。
  • replaceChild(newNode, oldNode)：将新的子节点替换旧的子节点。
  • removeChild(node)：从元素的子节点列表中删除一个子节点。 以下代码演示了创建一个新的文本节点，并将其添加到一个新的div元素中：
var div = document.createElement("div");
var text = document.createTextNode("这是一段新文本");
div.appendChild(text);

六、Document获取class元素

JS的DOM还提供了通过class属性获取元素的方法。我们可以使用getElementsByClassName方法，该方法返回具有指定class的所有元素的集合。 例如，以下代码获取具有class"news-item"的所有元素：

var newsItems = document.getElementsByClassName("news-item");

七、Document隐藏元素的方法

在JS的DOM中，我们可以通过修改元素的style属性来更改元素的样式。我们可以设置元素的display样式为"none"来隐藏元素。 以下代码演示了如何隐藏ID为"main"的元素：

document.getElementById("main").style.display = "none";

以上就是从多个方面对document获取元素的方法做详细的阐述，包括Document对象获取元素的方法、Document创建元素、通过ID获取页面元素、获取元素的值、Document对象提供的方法、Document获取class元素、Document隐藏元素的方法。DOM提供的方法非常灵活，可以大大改善我们在web开发中操作DOM的效率。

推荐文章