使用HTML和Javascript訪問嵌套對象

Question

html中的相關部分：

<td id="a07" bgcolor="brown">
    <button type="button" name="blabla">
        <img name="wknight" src="img/wknight.png" height="45" />
    </button>
</td>

我打算在javascrip中做什么：

var knightsource = document.getelementbyid("a07").blabla.wknight.src

javascript中的此代碼無法正常工作。 我是javascript新手。

我想獲取圖像的src並將其放在變量中，並且還希望能夠更改src。

Answer 1

使用類似以下內容的方法，可以使html的格式保持不變，並通過將“ a07”更改為容器ID來訪問其他實例（如果存在）。

document.getElementById("a07").getElementsByTagName("img")[0].src

Answer 2

轉這行：

<img name ="wknight" src=  "img/wknight.png" height ="45"/>

到這個：

<img name ="wknight" id="wknight" src=  "img/wknight.png" height ="45"/>

然后您可以像這樣獲得wknight ：

var knightsource = document.getElementById("wknight").src

Id是頁面上唯一的元素，因此您可以直接獲取它

Answer 3

我想您錯過了javascript區分大小寫的問題。 使用此行：

var knightsource = document.getElementById("a07").blabla.wknight.src

Answer 4

這是給您的示例，假設您的標記始終采用相同的格式。

的CSS

.imgwk {
    height: 45px;
}

的HTML

<table id="table01">
    <thead></thead>
    <tbody>
        <tr>
            <td id="a01" bgcolor="brown">
                <button type="button" name="blabla">
                    <img class="imgwk" name="wknight" src="http://thumb1.shutterstock.com/thumb_small/98550/98550,1278941506,3/stock-photo-white-chess-knight-56993335.jpg" />
                </button>
            </td>
            <td id="a02" bgcolor="brown">
                <button type="button" name="blabla">
                    <img class="imgwk" name="wknight" src="http://thumb1.shutterstock.com/thumb_small/98550/98550,1278941506,3/stock-photo-white-chess-knight-56993335.jpg" />
                </button>
            </td>
            <td id="a03" bgcolor="brown">
                <button type="button" name="blabla">
                    <img class="imgwk" name="wknight" src="http://thumb1.shutterstock.com/thumb_small/98550/98550,1278941506,3/stock-photo-white-chess-knight-56993335.jpgg" />
                </button>
            </td>
            <td id="a04" bgcolor="brown">
                <button type="button" name="blabla">
                    <img class="imgwk" name="wknight" src="http://thumb1.shutterstock.com/thumb_small/98550/98550,1278941506,3/stock-photo-white-chess-knight-56993335.jpg" />
                </button>
            </td>
            <td id="a05" bgcolor="brown">
                <button type="button" name="blabla">
                    <img class="imgwk" name="wknight" src="http://thumb1.shutterstock.com/thumb_small/98550/98550,1278941506,3/stock-photo-white-chess-knight-56993335.jpg" />
                </button>
            </td>
            <td id="a06" bgcolor="brown">
                <button type="button" name="blabla">
                    <img class="imgwk" name="wknight" src="http://thumb1.shutterstock.com/thumb_small/98550/98550,1278941506,3/stock-photo-white-chess-knight-56993335.jpgg" />
                </button>
            </td>
            <td id="a07" bgcolor="brown">
                <button type="button" name="blabla">
                    <img class="imgwk" name="wknight" src="http://thumb1.shutterstock.com/thumb_small/98550/98550,1278941506,3/stock-photo-white-chess-knight-56993335.jpg" />
                </button>
            </td>
        </tr>
    </tbody>
</table>

Java腳本

function getImgSrc(tableID, tdId) {
    var table = document.getElementById(tableID),
        tds = table.getElementsByTagName("td"),
        img,
        src;

    Array.prototype.some.call(tds, function (td) {
        if (td.id === tdId) {
            img = td.getElementsByTagName("img");
            if (img && img.length) {
                src = img[0].src;
                return true;
            }
        }

        return false;
    });

    return src;
}

function setImgSrc(tableID, tdId, src) {
    var table = document.getElementById(tableID),
        tds = table.getElementsByTagName("td"),
        img;

    Array.prototype.some.call(tds, function (td) {
        if (td.id === tdId) {
            img = td.getElementsByTagName("img");
            if (img && img.length) {
                img[0].src = src;
                return true;
            }
        }

        return false;
    });

    return src;
}

alert(getImgSrc("table01", "a07"));

setImgSrc("table01", "a07", "http://img135.imageshack.us/img135/8067/daciathaliabe5.jpg"

）;

在jsfiddle上

注意事項：

使用ID代替NAME作為ID必須是唯一的，而NAME則不是。 根據情況，這可能與您的標記無關，也可能與您的標記無關。

使用CSS類而不是內聯樣式： 內聯樣式與類

這種選擇方法不是獲得所需結果的唯一方法，您還可以使用document.querySelectorAll或外部庫（如jquery）