如何在特定 HTML 列表元素中获取嵌套 div 的文本作为单击时的警报消息

Question

这是我的HTML文件结构：

var li = document.getElementById("myList").getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
    li.onclick = function () {
        alert(document.getElementsByClassName("title")[i].innerHTML);
    }
}

<div class="maincontent">
    <ul id="myList">
        <li>
            <div class="image">
                <img src="http://lorempixel.com/100/100/">
                <div class="button option-vertical-grid"></div>
            </div>
            <div class="info">
                <div class="url">lorempixel.com</div>
                <div class="title" id="title">M1</div>
                <div class="play"><section>0</section></div>
            </div>
            <div class="info2">
                <div class="date">30.11.2016</div>
                <div class="button option-vertical"></div>
            </div>
        </li>
        <li>
            <div class="image">
                <img src="http://lorempixel.com/102/100/">
                <div class="button option-vertical-grid"></div>
            </div>
            <div class="info">
                <div class="url">lorempixel.com</div>
                <div class="title">M2</div>
                <div class="play"><section>0</section></div>
            </div>
            <div class="info2">
                <div class="date">30.11.2016</div>
                <div class="button option-vertical"></div>
            </div>
        </li>
        <li>
            <div class="image">
                <img src="http://lorempixel.com/103/100/">
                <div class="button option-vertical-grid"></div>
            </div>
            <div class="info">
                <div class="url">lorempixel.com</div>
                <div class="title">M3</div>
                <div class="play"><section>0</section></div>
            </div>
            <div class="info2">
                <div class="date">30.11.2016</div>
                <div class="button option-vertical"></div>
            </div>
        </li>
    </ul>
</div>

第一个任务是：单击列表时，它应该显示一条警报消息，其中包含单击列表的标题，即div 类"title"中的文本，即(M1 或 M2....(

第二个任务是：单击div 类"按钮选项-垂直"时，它应该给我另一个警报，其中包含上面的任务中的类标题，此外还有来自div 类"图像"的 img src 值，例如：(http://lorempixel.com/100/100(

显示来自第二个任务的警报时，不应显示来自第一个任务的警报，反之亦然。请大家没有jQuery，只有JavaScript。

使用我上面尝试的 JavaScript，单击列表项不会给我任何警报消息。

Answer 1

getElementsByClassName()|getElementsByTagName 方法返回文档中具有指定类|标记名称的所有元素的集合，作为 NodeList 对象。
对象表示节点的集合。可以通过索引号访问节点。指数从 0 开始。

var li = document.getElementById("myList").getElementsByTagName("li"),
    len = li.length,
    i;
for (i = 0; i < len; i += 1) {
    li[i].onclick = function() {
        //Li only has one child with class "title"
        alert(this.getElementsByClassName("title")[0].innerHTML);
    }
}