如何使用JavaScript從父元素的父元素的ID中獲取元素的屬性？

所以我有以下的HTML ...如何使用JavaScript從父元素的父元素的ID中獲取元素的屬性？

HTML：

<div id="col1"> 
    <img src="1.jpg"> 
</div>

而且我實現HTML5拖放功能，其中col1內HTML是拖動的元素的內部HTML改變 - 所以列基本上改變了他們的內容。

我有另一個div（我們稱之爲swap-text），在那裏我想根據col1裏面的圖像改變它的文本內容。

這就是爲什麼我想弄清楚我如何通過JavaScript獲得col1的img元素的src屬性值，所以我可以寫一篇if語句來更改swap-text取決於內容上的圖像是在col1。

我可以添加ID的img元素，但我仍然不知道如何寫條件來檢查是否說，img-id1父母是col1。

嘗試（S）：

var doc = document.getElementById("col1"); 
var children = null; 
var imgEle; 

//gets img node, but also got 1/2 text object(s)? 
for (var i = 0; i < doc.childNodes.length; i++) { 
    children = doc.childNodes[i]; 
    console.log(children); 
} 

//document.getElementById("img") 
//children[1].getAttribute('src'); - cannot call method 'getAttribute' of undefined 


//imgEle = doc.childNodes[0].getElementById('img'); - Object #<Text> has no method 'getElementById' 

console.log(imgEle); 
console.log(children);

來源

2014-04-02 Rich

'的document.getElementById（「COL1」）的getElementsByTagName（」 img「）[0] .src' – Passerby

這項工作很好純javascript：

document.getElementById("col1").getElementsByTagName("img")[0].getAttribute("src");

來源

2014-04-02 11:42:25

這個工作非常完美，並以最簡單的方式保存爲簡單的JavaScript格式。 +代表初步評論的路人，並感謝rdonatoiop進行格式編輯。 – Rich

我建議你使用jQuery，所以你可以簡單地使用：

$("img").attr("id"); //Return the id of the img element

來源

2014-04-02 11:31:26

檢查：

var column = document.getElementById("col1"); 
var imgSrc = column.getElementsByTagName("img")[0].getAttribute("src");

或者只是使用了jQuery - 更簡單：

$('#col1 img').attr('src');

來源

2014-04-02 11:35:02 Natalia

因爲您將只有col1（img）中有一個子節點，請更改for循環。

var doc = document.getElementById("col1"); 
var children = null; 
var imgEle; 

//gets img node, but also got 1/2 text object(s)? 
//for (var i = 0; i < doc.childNodes.length; i++) { 
// children = doc.childNodes[i]; 
// console.log(children); 
//} 

childen = doc.childNodes[0]; 
// or children = doc.firstChild; 

console.log(children); 

//document.getElementById("img") 
console.log(children.getAttribute('src')); - children is single object 


//imgEle = doc.childNodes[0].getElementById('img'); - Object #<Text> has no method 'getElementById' 

console.log(imgEle); 
console.log(children);

來源

2014-04-02 11:36:34 eventHandler

var doc = document.getElementById("col1"); 
var img = document.getElementsByTagName('img')[0]; 
var imgParent = img.parentElement;

這是你如何判斷元素的父/

來源

2014-04-02 11:39:05 lennon626

謝謝您的補充，以及很好的瞭解。 – Rich

如何使用JavaScript從父元素的父元素的ID中獲取元素的屬性？

回答

相關問題