增加、刪除和替換節(jié)點(diǎn)
創(chuàng)建元素
document.createElement('元素名');
var table = document.createElement('table');
console.log( table.nodeName );
創(chuàng)建文本節(jié)點(diǎn)
document.createTextNode(''text);
var msg= document.createTextNode('hello');
console.log( msg.nodeName );
console.log( msg.nodeValue );
創(chuàng)建注釋節(jié)點(diǎn)
document.createComment('comment');
var c = document.createComment('container begin');
console.log( c.nodeName );
console.log( c.nodeValue?
插入節(jié)點(diǎn)
appendChild用于為一個(gè)父元素追加最后一個(gè)子節(jié)點(diǎn)
var div=document.createElement('div');
var txt=document.createTextNode('版權(quán)聲明');
div.appendChild(txt);
document.body.appendChild(div);
insertBefore 用于在父元素指定子節(jié)點(diǎn)之前添加一個(gè)新的子節(jié)點(diǎn)
parentNode.insertBefore(newChild,existingChild);
<ul id="menu">
<li>首頁</li>
<li>聯(lián)系我們</li>
var ul=document.getElementById("menu");
var ?newLi=document.createElement('li');
newLi.appendChild(document.createTextNode('新聞');
ul.insertBefore(newLi,ul.lastChild);
刪除和替換節(jié)點(diǎn)
刪除 parentNode.removeChild(childNode);
<ul id='menu'>
<li>首頁</li>
<li>聯(lián)系我們</li>
</ul>
var ul= document.getElementById('menu');
ul.removeChild( ul.lastElementChild );
替換 ?parentNode.replaceChild(newNode,oldNode);
<ul id='menu'>
<li>首頁</li>
<li>聯(lián)系我們</li>
</ul>
var ul=document.getElementById('menu');
var newLi=document.createElement('li');
newLi.appendChild(document.create.textNode(招聘));
ul.relaceChild(newLi,ul.lastChild);
常用的HTML DOM對(duì)象
Image代表嵌入的圖像<img>出現(xiàn)一次,就會(huì)創(chuàng)建一個(gè)image對(duì)象
也可以使用new image()創(chuàng)建image對(duì)象
常用屬性:src ?width ?height
Table 對(duì)象 代表一個(gè)html表格
常用屬性:rows
常用方法:insertRow(index); ? ?//返回Tablerow對(duì)象
? ? ? ? ? ? ? ?deleteRow(index);
TableRow對(duì)象
常用屬性
cells、innerHTML、rowIndex
常用方法
insertCell(index):返回 TableCell 對(duì)象
deleteCell(index)
TableCell對(duì)象
標(biāo)簽表示一個(gè) TableCell 對(duì)象
常用屬性
cellIndex、innerHTML、colSpan、rowSpan
HTML select對(duì)象
Select 對(duì)象代表 HTML 表單中的一個(gè)下拉列表標(biāo)簽即表示一個(gè) Select 對(duì)象
常用屬性
options、selectedIndex、size
常用方法
add(option)、remove(index)
事件
onchange
Option對(duì)象
Option 對(duì)象代表 HTML 表單中下拉列表中的一個(gè)選項(xiàng)標(biāo)簽表示一個(gè) Option 對(duì)象
創(chuàng)建對(duì)象
var o = new Option(text,value);
常用屬性
index、text、value、selected
HTML Form對(duì)象
Form 對(duì)象代表一個(gè) HTML 表單。在 HTML 文檔中
每出現(xiàn)一次,F(xiàn)orm 對(duì)象就會(huì)被創(chuàng)建。
常用屬性:
action
method
enctype
length:表單中的元素?cái)?shù)目
elements[]:包含表單中所有元素的數(shù)組
常用方法:
reset()
submit():提交表單
