Question

我一个接一个地多次使用这个HTML代码：

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

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

我尝试了这段代码，但它没有工作：

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 + '">';
};

Answer 2

下面的代码可以满足您的需求：

<!DOCTYPE HTML>
<html>
    <head>
        <script>
            var p = {
                onload: function() {
                    var lis = document.getElementsByTagName("li");
                    for(var i = 0, ceiling = lis.length; i < ceiling; i++) {
                        lis[i].onclick = function() {
                            var childNodes = this.childNodes;
                            for(var j = 0, ceiling2 = childNodes.length; j < ceiling2; j++) {
                                if(childNodes[j].nodeType == 1) {
                                    if(childNodes[j].nodeName == "IMG") {
                                        alert(childNodes[j].src);
                                    } else if(childNodes[j].nodeName == "SPAN"){
                                        alert(childNodes[j].innerHTML);
                                    }
                                }
                            }
                        }
                    }
                }
            };
        </script>
    </head>
    <body onload="p.onload()">
        <ul>
            <li>
                <img src="path/to/my/picture1.jpg" alt="my picture" /> <span>picture title1</span>
            </li>
            <li>
                <img src="path/to/my/picture2.jpg" alt="my picture" /> <span>picture title2</span>
            </li>
        </ul>
    </body>
</html>

Answer 3

使用此HTML：

<ul id="mylist">
    <li>
       <img src="path/to/my/picture1.jpg" alt="my picture" />
       <span>picture title 1</span>
    </li>
    <li>
       <img src="path/to/my/picture2.jpg" alt="my picture" />
       <span>picture title 2</span>
    </li>
    <li>
       <img src="path/to/my/picture3.jpg" alt="my picture" />
       <span>picture title 3</span>
    </li>
</ul>

你可以这样做：

var listItems = document.getElementById("mylist").getElementsByTagName("li");
for (var i = 0, len = listItems.length; i < len; i++) {
    listItems[i].onclick = function() {
        var spanObj = this.getElementsByTagName("span")[0]; 
        var spanText = spanObj.textContent || spanObj.innerText;
        var imgSrc = this.getElementsByTagName("img")[0].src;
        // now you have imgSrc and spanText here to do with as you please
    };
}

此处的演示演示：http://jsfiddle.net/jfriend00/ju9uZ/

在加载文档后运行此代码。最简单的方法是将此代码放在</body>标记之前，无论是内联还是包含在.js文件中。

获取子属性

3 个答案: