DOM 抓取

介紹兩個抓取 dom 的方法。

抓取單一 DOM

HTML

<div id="result">I'm Result</div>

JavaScript

var result = document.querySelector('#result');
console.log(result.innerHTML); // I'm Result

抓取多個 DOM

HTML

<ul>
    <li class="items">01</li>
    <li class="items">02</li>
    <li class="items">03</li>
    <li class="items">04</li>
    <li class="items">05</li>
    <li class="items">06</li>
    <li class="items">07</li>
    <li class="items">08</li>
    <li class="items">09</li>
    <li class="items">10</li>
</ul>

JavaScript

var items = document.querySelectorAll('.items');

var len = items.length;
for (var i = 0; i < len; i++) {
    console.log('Index ' + i + ': ' + items[i].innerHTML);
}

抓取回來是一個 NodeList 陣列,可以使用 for loop 來做迴圈取得各個 DOM 的值。