用JavaScript覆盖DOM元素

Question

In a nutshell I'm trying to target an element within the DOM, then inject a class on the fly to later alter that element.

The situation is as follows, I am working with an application that has predetermined mark up (Manage Engine). It's a tool for system work flows, creating a centralized portal for ticket logging, asset management blah blah. So I use the tool to create templates for end users to log service requests. This is accessed via a web interface portal which in turn obviously has mark up.

So far I have been able to alter specific things such as background colors on table headers for example. I achieve this by creating a rule to fire within that template upon load time. So essentially I am allowing the template to load with its predetermined code and then I am applying a for loop to alter the code once it has loaded. (Hacky I know, however its working really well).

The issue I'm running into now is that certain things within the mark up are generic (no class or id associated to the element). My plan is to target that specific generic element as a variable then add my own class to it upon load. Is there a way to target an element that has a class and then target the child elements within, save that child as a variable to then add a class on the fly with javascript. Please see example below.

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

So with the example above what I am trying to achieve is add my own class with JavaScript to the <td> element. Obviously if i target just <td> it will alter all <td> elements within the markup. Can i get to that specific <td> via the <tr> parent with the test1 class. I am currently unable to use any jquery requests as the base code can not be touched.

Again I know this is a little backwards and hacky but it does work with anything I can specifically target (has a class or id). I need to be able to do this with pure JavaScript. Any suggestions or help is greatly appreciated, apologies if this is a noob approach or question, first time posting in a forum. Let me know if further examples or information is required.

Answer 1

document.querySelector（“ body”）。children可以获取body的所有子元素

Answer 2

step1: Select the class. The variable t1 will contain an Array of tr elements.

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

step2: Get the first value from the array t1 . So, tr_el1 contains one tr element.

var tr_el1 = t1[0];

step3: Get the children of tr . td_el contains an Array of td elements.

var td_el = tr_el1.children;

Now you can use the td from the td_el array

Answer 3

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

Now you got your inputs inside an array. You're welcome ;-)

Answer 4

Thanks a lot for the assistance, really appreciate it. The examples above helped me build a hybrid that although not exact has given me the outcome i needed.

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%";
} 

I am yet to wrap this up in a function but working as intended. Thanks again :) :)