通過類和ID獲取元素內的元素 - JavaScript

好吧，我之前曾經在JavaScript中涉獵過，但我寫的最有用的東西是CSS樣式切換器。所以我對此有點新鮮。比方說，我有這樣的HTML代碼：通過類和ID獲取元素內的元素 - JavaScript

<div id="foo"> 
    <div class="bar"> 
     Hello world! 
    </div> 
</div>

我將如何更改「Hello world！」「再見世界！」？我知道document.getElementByClass和document.getElementById是如何工作的，但我想要更具體一些。對不起，如果之前已經問過。

來源

2011-10-19 Tanner Babcock

126

哦，首先你需要選擇一個功能如getElementById的元素。

var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];

getElementById只返回一個節點，但getElementsByClassName返回一個節點列表。由於只有一個具有該類名稱的元素（據我所知），您可以只獲取第一個元素（這就是[0]的原因 - 就像數組一樣）。

然後，您可以用.innerHTML更改html。

targetDiv.innerHTML = "Goodbye world!";

var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0]; 
 
targetDiv.innerHTML = "Goodbye world!";

<div id="foo"> 
 
    <div class="bar"> 
 
     Hello world! 
 
    </div> 
 
</div>

來源

2011-10-19 00:47:49

在這種情況下，不需要通過ID獲取父母。 'document.getElementsByClassName'會正常工作。 – rvighne

@rvighne OP的確切要求是他「想獲得更具體的」。問這個問題的人問他在DOM樹遍歷中如何更具體。 getElementByClassName的使用不是一個混淆的地方，但我可以看到有人可能會輕易地認爲我指出兩者都是必要的。他們不是。如果只想定位某個給定ID的特定節點下的某個類的元素，而不是相同類的元素，則這是您將使用的元素。 –

@JosephMarikle我明白了。我相信我讀得太快了。 – rvighne

你可以這樣說：

var list = document.getElementById("foo").getElementsByClassName("bar"); 
if (list && list.length > 0) { 
    list[0].innerHTML = "Goodbye world!"; 
}

，或者，如果你想用更少的錯誤檢查和更簡潔做到這一點的，它可以在一個線路就像這樣：

document.getElementById("foo").getElementsByClassName("bar")[0].innerHTML = "Goodbye world!";

在說明：

你得到id="foo"的元素。
然後，您可以找到該對象中包含的具有class="bar"的對象。
返回一個類似數組的節點列表，以便引用該節點中的第一個項目
然後，您可以設置該項目的innerHTML以更改其內容。

注意事項：一些舊版瀏覽器不支持getElementsByClassName（例如舊版本的IE）。如果缺少該功能，可以將其填充到位。

這是我建議使用內置了CSS3選擇器的支持，而不用擔心瀏覽器的兼容性自己一個庫（讓別人做所有的工作）。如果你只想要一個圖書館來做到這一點，那麼Sizzle將會很好。在灒，這將是就像這樣：

Sizzle("#foo .bar")[0].innerHTML = "Goodbye world!";

jQuery有滋滋聲庫內置在jQuery的，這將是：

$("#foo .bar").html("Goodbye world!");

來源

2011-10-19 00:46:59 jfriend00

謝謝你，我是有與document.getElementBy *有關。 jQuery讓事情變得更容易。 –

如果需要在IE 7中工作或降低你要記住，getElementsByClassName方法並不適用於所有的瀏覽器存在。正因爲如此，你可以創建你自己的getElementsByClassName，或者你可以試試這個。

var fooDiv = document.getElementById("foo"); 

for (var i = 0, childNode; i <= fooDiv.childNodes.length; i ++) { 
    childNode = fooDiv.childNodes[i]; 
    if (/bar/.test(childNode.className)) { 
     childNode.innerHTML = "Goodbye world!"; 
    } 
}

來源

2011-10-19 00:53:10

'getElementsByClassName'在IE8中也不起作用，但您可以在其位置使用'querySelectorAll'（幾乎總是）。 – user113716

@Ӫ_._Ӫ...大聲笑...你的正確，但你只是證明我的答案更。如果您的頁面需要跨多個瀏覽器運行，則不能依賴getElementsByClassName。 jQuery肯定會成爲一個選項，但是如上面的代碼一樣。 –

是的，我的意思是支持你的回答，但也指出可以在代碼中使用'qSA'，這樣你仍然可以在IE8中使用本機代碼。儘管仔細研究瞭解決方案，但還是有一些需要解決的問題。 – user113716

-3

你不應該使用的document.getElementById，因爲它僅適用於哪個ID是固定的客戶端的控制工作。你應該像下面的例子那樣使用jquery。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>                            
<div id="foo"> 
    <div class="bar"> 
      Hello world! 
    </div> 
</div>

使用本：

$("[id^='foo']").find("[class^='bar']") 

// do not forget to add script tags as above

如果你想刪除任何編輯，然後進行任何操作只需添加

「」後面做操作

來源

2015-08-01 18:22:11

會起作用，但是稍微矯枉過正。當Javascript在其基本代碼中提供該功能時，使用一個多kb jQuery庫來選擇一個元素會稍微矯枉過正。 – Danejir

遞歸函數：

function getElementInsideElement(baseElement, wantedElementID) { 
    var elementToReturn; 
    for (var i = 0; i < baseElement.childNodes.length; i++) { 
     elementToReturn = baseElement.childNodes[i]; 
     if (elementToReturn.id == wantedElementID) { 
      return elementToReturn; 
     } else { 
      return getElementInsideElement(elementToReturn, wantedElementID); 
     } 
    } 
}

來源

2015-10-18 13:17:56

這樣做最簡單的方法是：

function findChild(idOfElement, idOfChild){ 
    let element = document.getElementById(idOfElement); 
    return element.querySelector('[id=' + idOfChild + ']'); 
}

或更好的可讀性：

findChild = (idOfElement, idOfChild) => { 
    let element = document.getElementById(idOfElement); 
    return element.querySelector(`[id=${idOfChild}]`); 
}

來源

2017-10-27 22:47:32

通過類和ID獲取元素內的元素 - JavaScript

回答

相關問題