3.1 DOM

• 查找 html 元素
• 修改元素内容
• 修改元素属性
• 修改 CSS

文档对象模型（Document Object Model）

查找 html 元素

• id getElementById

<p id="demo">0</p>
<p class="test">0</p>
<p class="test">0</p>
<p>0</p>

<script>
    var p = document.getElementById('demo');
    p.innerHTML = 'hello word';
</script>

• 元素标签 getElementsByTagName

<p id="demo">0</p>
<p class="test">0</p>
<p class="test">0</p>
<p>0</p>

<script>
    var plist = document.getElementsByTagName('p');
    for (var a=0;a<plist.length;a++) {
        var elem = plist[a];
        elem.innerHTML = '检查到：第：' + a + '个';
    }
</script>

• 类名 getElementsByClassName

<p id="demo">0</p>
<p class="test">0</p>
<p class="test">0</p>
<p>0</p>

<script>
    var plist = document.getElementsByClassName('test');
    for (var a=0;a<plist.length;a++) {
        var elem = plist[a];
        elem.innerHTML = '检查到：第：' + a + '个';
    }
</script>

修改元素内容

• innerHTML 上面用过了，略；

修改元素属性

    var p = document.getElementById('demo');

    p.style = 'color: red';
    p.class = 'test-p';

修改 CSS

    p.style.color = 'red';

注：直接修改属性中的 style 类似；
这个修改更详细；