编辑/ Javascript getElementsByClassName值返回未定义

Question

我正在尝试访问javascript中html元素的某些值，并在HTML文档中添加一些元素。

我尝试使用'value'或querySellectorAll，但是它一直返回'undefined'。确切的结果是未定义/未定义/未定义/未定义/未定义/未定义/未定义/未定义。

var books=document.getElementsByClassName("short bookname");
/*var books=document.querySelectorAll(".short bookname");
this is what i also tried but didn't work*/
var listString = ""
for (var i=0; i<books.length; i++){
    listString = listString + books[i].value;
    if (i==books.length-1){
    }else{
        listString = listString + " / "
    }
}
document.getElementById("book_titles").innerHTML=listString;

我希望代码可以访问每个索引并将其添加到listString，但是所有内容都是不确定的。 任何帮助表示赞赏。谢谢。

<section>
    <div class='section1'>
    <h2 class='section_title'>HTML5</h2>
    <article>
        <div class = 'articlebox'>
        <img src='./images/html_1.jpg' class = 'book_front'/>
        <h4 class='long'>HTML5 cookbook / Christopher Schmitt and Kyle Simpson.</h4>
        <h4 class='short bookname'>HTML5 cookbook / Schmitt, Christopher</h4>
        <div class= 'description'>
        <div>O'Reilly</div>
        <div>2012 / 1st ed</div>
        </div>
        </div>
        </article>
   </section>

我附上了html元素。 简短的书名只是一类的名称，而不是两类。