2017-10-13 234 views
1

簡而言之,我試圖在DOM中定位一個元素,然後立即注入一個類以稍後更改該元素。用javascript覆蓋DOM元素

情況如下,我正在使用具有預定標記(管理引擎)的應用程序。這是一個系統工作流程的工具,爲票據記錄,資產管理等等創建一箇中央門戶。所以我使用該工具爲最終用戶創建模板以記錄服務請求。這是通過一個Web界面門戶訪問,而這反過來顯然已經有了標誌。

到目前爲止,我已經能夠改變特定的東西,例如表格標題上的背景顏色。我通過在加載時創建一個在該模板中觸發的規則來實現此目的。所以基本上我允許模板加載它的預定代碼,然後我應用一個for循環來修改代碼,一旦它被加載。 (哈克我知道,但它的工作非常好)。

我現在遇到的問題是標記中的某些事物是通用的(沒有與元素關聯的類或id)。我的計劃是將該特定通用元素作爲變量,然後在加載時將自己的類添加到它。有沒有一種方法來定位一個擁有一個類的元素,然後將其中的子元素作爲目標,將該子元素保存爲一個變量,然後使用JavaScript即時添加一個類。請看下面的例子。

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

所以上面我所試圖達到的例子就是用JavaScript加上我自己的類的<td>元素。很顯然,如果我只是針對<td>,它會更改標記中的所有<td>元素。我可以通過父母與test1課程獲得特定的<td>。我目前無法使用任何jquery請求,因爲無法觸及基本代碼。

我再次知道這是一個有點倒退和黑客,但它確實與我可以專門針對的任何東西(有一個類或ID)。我需要能夠用純JavaScript來做到這一點。任何建議或幫助非常感謝,如果這是一個小鳥的方法或問題,首次在論壇發帖道歉。讓我知道是否需要進一步的例子或信息。

+0

它**聽起來像**你正在尋找[**事件代表**](https://learn.jquery.com/events/event-delegation/)。您可以將事件處理程序附加到頁面上默認存在的元素(例如''),然後將行爲委託給動態創建的元素。 –

+0

你有沒有聽說過「段落」這個詞 - 只是問:p –

+0

你只是想通過標籤名選擇元素嗎?例如,'document.getElementsByTagName('tr')' – Nick

回答

1

document.querySelector(「身體」)。孩子們能得到身體的各個子元素

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

現在你有一個陣列內的輸入。不客氣;-)

1

step1:選擇類。變量t1將包含一個數組tr元素。

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

步驟2:從陣列T1獲取第一值。因此,tr_el1包含一個tr元素。

var tr_el1 = t1[0]; 

第3步:獲取的TR孩子。 td_el包含一個數組td元素。

var td_el = tr_el1.children; 

現在你可以使用TDtd_el陣列

0

感謝很多的幫助,真的很感激。上面的例子幫助我建立了一個混合體,雖然不是確切的給了我需要的結果。

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

我還沒有把它包裝在一個函數中,但按預期工作。再次感謝:) :)