javascript - 获取子属性

Question

我一个接一个地多次出现此 HTML 代码:

<li>
   <img src="path/to/my/picture.jpg" alt="my picture" />
   <span>picture title</span>
</li>

我试图获取变量中 img 标记的 src 属性内的路径值，以及另一个变量中跨度内的文本。

我尝试了这段代码，但它不起作用:

clickedLi.onclick = function() {
    var imgPath = clickedLi.firstChild;
    var pathLi = imgPath.getAttribute("src");

    var imgTitle = clickedLi.lastChild;
    var titleLi = imgTitle.data;

clickedLi 变量只是一个循环遍历包含文档中所有 li 标记的数组的变量。

这是我拥有的完整 JavaScript 代码:

var myLis = document.getElementsByTagName('li');
var liCnt = myLis.length; 
for(var i = 0; i < liCnt; i++) {
    var currentLi = myLis[i];
    currentLi.onclick = function() {                

        var imgPath = firstElementChild(this);
        var pathLi = imgPath.getAttribute("src");

        var imgTitle = lastElementChild(this);
        var titleLi = imgTitle.firstChild.data;

        var myImgDiv = document.getElementById("test");
        myImgDiv.innerHTML = '<h2>' + titleLi + '</h2>';
        myImgDiv.innerHTML = '<img src="' + pathLi + '" alt="' + titleLi + '">' 

    }
}

Answer 1

使用.firstElementChild和.lastElementChild来避免空白文本节点。

如果您支持旧版浏览器，则需要一个填充程序。

function firstElementChild(el) {
    var child = el.firstElementChild;
    if (!child) {
        child = el.firstChild;
        while (child && child.nodeType !== 1)
            child = child.nextSibling;
    }
    return child;
}

function lastElementChild(el) {
    var child = el.lastElementChild;
    if (!child) {
        child = el.lastChild;
        while (child && child.nodeType !== 1)
            child = child.previousSibling;
    }
    return child;
}

<小时/>

clickedLi.onclick = function() {
    var imgPath = firstElementChild(this); //<-- use "this", not "clickedLi"
    var pathLi = imgPath.getAttribute("src");

    var imgTitle = lastElementChild(this); //<-- use "this", not "clickedLi"
    var titleLi = imgTitle.firstChild.data;

    var myImgDiv = document.getElementById("test");

      // Concatenate the strings to do a single assignment to .innerHTML
    myImgDiv.innerHTML = '<h2>' + titleLi + '</h2>' +
                         '<img src="' + pathLi + '" alt="' + titleLi + '">';
};