JS常用功能

W3C英文
W3C中文

※基本

window.onload = function(){
    let input = document.getElementsByTagName('input')[0];
    input.value = 'xxx';
    
    document.getElementById('btn').onclick = function(){
        document.getElementsByName('cb')[2].checked = true;
        document.getElementsByName('ro')[0].checked = true;
    }
    
    document.getElementsByName('cb')[1].defaultChecked = true;
    
    let cls = document.getElementsByClassName('cls')[0];
    let select = document.createElement('select');
    let op1 = document.createElement('option');
    let op2 = document.createElement('option');
    
    select.appendChild(op1);
    select.appendChild(op2);
    
    cls.appendChild(select);
    
    op1.text = 'option1';
    op1.value = 0;
    
    op2.text = 'option2';
    op2.value = 1;
    op2.defaultSelected = true;
}
--------------------
<input /><br />
<button id="btn">click me</button><br />
<input type="checkbox" name="cb" />c1
<input type="checkbox" name="cb" />c2
<input type="checkbox" name="cb" />c3<br />
<div class="cls"></div>
<input type="radio" name="ro" />r1
<input type="radio" name="ro" />r2
<input type="radio" name="ro" />r3<br />

※基本上就是對照上面的網址就很夠用了，只是要特別注意瀏覽器有沒有支援，裡面都有寫，如果是HTML5也有特別標記的圖示

※document.getElement除了Id外，其他都有加s，所以有s還要用[]指定哪一個

※表格

var table = document.getElementById('tab');
table.setAttribute('border', '1');
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
var td = document.createElement('td');
    
// 上下
var tabBody = table.appendChild(tbody);
var a00 = tabBody.appendChild(tr);
a00.appendChild(td).appendChild(document.createTextNode('00'));
    
table.insertRow().insertCell().appendChild(document.createTextNode('10'));
    
var a20 = table.insertRow();
a20.insertCell().appendChild(document.createTextNode('20'));
    
// 左右
a00.insertCell().appendChild(document.createTextNode('01'));
a20.insertCell().appendChild(document.createTextNode('21'));

※表格要注意有tbody的存在，雖然不寫也可以，但有時會有不如預期的行為

※appendChild只能使用一次，且一定要有一次(除非寫在HTML)