在前端开发中，有时需要从主干中获取单个模型，以便用户可以对其进行操作。本文将详细介绍如何从主干中获取单个模型，并提供示例代码。
什么是主干？
“主干”通常指的是DOM（文档对象模型）树结构的顶层元素。在HTML文档中，主干通常是<html>元素，而在XML文档中，主干则可以是任意元素。
如何获取主干？
在JavaScript中，可以使用document.documentElement属性来获取主干。例如：
const rootNode = document.documentElement;
这将把<html>元素存储在rootNode变量中。
如何获取单个模型？
一旦你拥有了主干元素，就可以使用DOM API中的方法来获取单个模型。例如，假设我们想获取页面中的第一个<p>元素：
const firstParagraph = document.querySelector('p');这将返回文档中第一个<p>元素，并将其存储在firstParagraph变量中。
类似地，如果我们想获取id为"myDiv"的<div>元素，可以使用以下代码：
const myDiv = document.querySelector('#myDiv');这将返回id为"myDiv"的<div>元素，并将其存储在myDiv变量中。
在某些情况下，可能需要获取所有匹配选择器的元素。例如，如果我们想获取所有<p>元素，可以使用以下代码：
const allParagraphs = document.querySelectorAll('p');这将返回文档中所有<p>元素，并将它们存储在名为allParagraphs的NodeList对象中。
结论
通过使用document.documentElement来获取主干元素，以及DOM API中的查询方法来获取单个或多个元素，您可以轻松地从页面中提取出所需的DOM元素。在实际的前端开发中，这种技术非常有用，并且应该成为每个开发者的基本技能。
示例代码：
-- -------------------- ---- -------
--------- -----
------
------
-----------------------
-------
------
---- -----------
-----------
-----------
------
--------
-- ----
----- -------- - -------------------------
-- --------------------
----- ----- - ---------------------------------
-- ----------
----- -------------- - ----------------------------
-- ---------
----- ------------- - -------------------------------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11065
