用 javascript 覆盖 DOM 元素答案

【问题标题】：Override DOM elements with javascript用 javascript 覆盖 DOM 元素
【发布时间】：2017-10-13 13:15:40
【问题描述】：

简而言之，我试图定位 DOM 中的一个元素，然后动态注入一个类以稍后更改该元素。

情况如下，我正在使用具有预定标记（管理引擎）的应用程序。它是系统工作流程的工具，为工单记录、资产管理等创建集中门户。因此，我使用该工具为最终用户创建模板以记录服务请求。这是通过一个 Web 界面门户访问的，该门户显然有标记。

到目前为止，我已经能够更改特定的东西，例如表格标题上的背景颜色。我通过创建一个在加载时在该模板内触发的规则来实现这一点。因此，基本上我允许模板加载其预定代码，然后我应用一个 for 循环来更改加载后的代码。（Hacky 我知道，但它工作得非常好）。

我现在遇到的问题是标记中的某些内容是通用的（没有与元素关联的类或 ID）。我的计划是将特定的通用元素定位为变量，然后在加载时将我自己的类添加到它。有没有办法定位一个具有类的元素，然后定位其中的子元素，将该子元素保存为变量，然后使用 javascript 动态添加一个类。请参阅下面的示例。

<tr class=test1>   
  <td>
   <input>
   <input>
   <input>
  </td>
<tr/>

因此，对于上面的示例，我想要实现的是将我自己的带有 JavaScript 的类添加到 <td> 元素。显然，如果我只针对<td>，它将改变标记中的所有<td> 元素。我可以通过带有test1 类的<tr> 父级访问特定的<td>。我目前无法使用任何 jquery 请求，因为无法触及基本代码。

我再次知道这有点落后和 hacky，但它确实适用于我可以专门针对的任何内容（具有类或 id）。我需要能够用纯 JavaScript 做到这一点。非常感谢任何建议或帮助，如果这是新手方法或问题，第一次在论坛上发帖，我们深表歉意。如果需要更多示例或信息，请告诉我。

【问题讨论】：

它听起来就像你在寻找event delegation。您可以将事件处理程序附加到页面上默认存在的元素（例如<body>），然后将行为委托给动态创建的元素。
你听说过“段落”这个词吗——只是问一下：p
您只是想按标签名称选择元素吗？例如，document.getElementsByTagName('tr')
^ 我很想格式化问题，但 IMO，它仍然完全清晰 :)
给定您按类或其他选择的特定元素，然后您可以使用各种 DOM 导航方法/属性根据它们在 DOM 树中的关系或使用方法来获取直接子级或较低级别的后代像 .querySelectorAll() 和 .querySelector() 这样可以让您指定元素类型以及类或 ID。

标签： javascript html css dom

【解决方案1】：

document.querySelector("body").children 可以获得body的所有子元素

【讨论】：

【解决方案2】：

第一步：选择班级。变量 t1 将包含一个 tr 元素数组。

var t1 = document.querySelector('.test1');

step2：从数组t1中获取第一个值。因此，tr_el1 包含一个 tr 元素。

var tr_el1 = t1[0];

step3：获取tr的孩子。 td_el 包含一个 td 元素数组。

var td_el = tr_el1.children;

现在您可以使用 td_el 数组中的 td

【讨论】：

【解决方案3】：

var tr = document.getElementsByClassName('test1')[0]
var td = tr.children[0]
var inputs = Array.prototype.slice.apply(td.children)

现在您将输入放在一个数组中。不客气；-)

【讨论】：

【解决方案4】：

非常感谢您的帮助，非常感谢。上面的例子帮助我建立了一个混合体，虽然不准确，但给了我需要的结果。

var parent = document.querySelector(".roweven").children;
var nS;
for (nS = 0; nS < parent.length; nS++) {

parent[nS].style.position = "absolute";
parent[nS].style.width = "100%";
}

我还没有将它封装在一个函数中，但可以按预期工作。再次感谢:) :)

【讨论】：