使用javascript引用當前節點？

因此，我正在爲無法使用標記（或FTP訪問）的無法訪問的CMS進行重新設計。特別是有一個節點嚴重阻礙了我的進度 - 它使用內聯樣式&沒有類或ID，我必須更改它（不刪除它）。它看起來像：使用javascript引用當前節點？

<div style="background-color: blue"> 
<div class="editablecontent"> 
(stuff I can edit in the CMS goes here) 
</div> 
</div>

我不認爲getElementsByClassName會在這裏工作？但什麼樣的作品是非常醜陋的定義一個ID爲空的div然後document.getElementById.parentNode.parentNode.style.backgroundColor =「white」這顯然是骯髒的，並且在IE中無法正常工作，我需要IE8支持（至少）。我沒有使用框架，但有權訪問標題。

在此先感謝。

來源

2012-09-23 cozuya

最好的方法可能是使用jQuery。你可以做一個ID而不是一個班，但？你如何更新它？你可以在它旁邊添加一個ID嗎？ – slugonamission

假設你實際上包含一個id，爲什麼'document.getElementById（「x」）。parentNode.parentNode.style.backgroundColor =「white」'在IE中工作？ – nnnnnn

也許附近有東西可以選擇，並使用選擇器從那裏工作？（如果CMS使用jQuery，它可能（希望？）做？） – Laoujin

假設這些內容你的文檔中是唯一的（例如，這裏只有其中之一），你可以用它來找到它：

function changeColor() { 
    var divs = document.getElementsByTagName("div"); 
    for (var i = 0, len = divs.length; i < len; i++) { 
     if (divs[i].style.backgroundColor === "blue" && 
      divs[i + 1] && 
      divs[i + 1].parentNode === divs[i] && 
      divs[i + 1].className === "editablecontent") { 
      divs[i].style.backgroundColor = "white"; 
      return; 
     } 
    } 
}

此方法執行以下步驟：

獲取所有文檔中的div
找一個backgroundColor設置爲藍色並帶有內聯樣式設置
當您找到一個檢查以查看其後是否有另一個div
如果下一格是孩子
如果下一個div有一個className"editablecontent"
。然後，改變它的背景顏色。

如果您想要根據其他標準進行進一步檢查以確保找到正確的對象，您可以將這些添加到邏輯中，儘管這些檢查都是您向我們公開的。

工作例如：http://jsfiddle.net/jfriend00/NmxUn/

另一種方法是使用getElementsByClassName和安裝填充工具像這樣的，使其在老的瀏覽器工作：

// Add a getElementsByClassName function if the browser doesn't have one 
// Limitation: only works with one class name 
// Copyright: Eike Send http://eike.se/nd 
// License: MIT License 

if (!document.getElementsByClassName) { 
    document.getElementsByClassName = function(search) { 
    var d = document, elements, pattern, i, results = []; 
    if (d.querySelectorAll) { // IE8 
     return d.querySelectorAll("." + search); 
    } 
    if (d.evaluate) { // IE6, IE7 
     pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]"; 
     elements = d.evaluate(pattern, d, null, 0, null); 
     while ((i = elements.iterateNext())) { 
     results.push(i); 
     } 
    } else { 
     elements = d.getElementsByTagName("*"); 
     pattern = new RegExp("(^|\\s)" + search + "(\\s|$)"); 
     for (i = 0; i < elements.length; i++) { 
     if (pattern.test(elements[i].className)) { 
      results.push(elements[i]); 
     } 
     } 
    } 
    return results; 
    } 
}

而且，那麼你可以簡單地做這甚至在舊版本的IE上：

var items = document.getElementsByClassName("editablecontent"); 
if (items.length) { 
    items[0].parentNode.style.backgroundColor = "white"; 
}

來源

2012-09-23 23:33:07 jfriend00

使用javascript引用當前節點？

回答

相關問題