DOM整理-3

增加、刪除和替換節(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():提交表單



最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、JS前言 (1)認(rèn)識(shí)JS 也許你已經(jīng)了解HTML標(biāo)記(也稱為結(jié)構(gòu)),知道了CSS樣式(也稱為表示),會(huì)使用HT...
    凜0_0閱讀 2,914評(píng)論 0 8
  • 下面是水平和垂直居中的方法: 1.Flex 方案 2.Grid 方案 3.absolute + transform...
    李奕錦liyijin閱讀 610評(píng)論 0 2
  • 本文整理自《高級(jí)javascript程序設(shè)計(jì)》 DOM(文檔對(duì)象模型)是針對(duì)HTML和XML文檔的一個(gè)API(應(yīng)用...
    SuperSnail閱讀 673評(píng)論 0 1
  • 工廠模式類似于現(xiàn)實(shí)生活中的工廠可以產(chǎn)生大量相似的商品,去做同樣的事情,實(shí)現(xiàn)同樣的效果;這時(shí)候需要使用工廠模式。簡(jiǎn)單...
    舟漁行舟閱讀 8,118評(píng)論 2 17
  • 真心好累,原來追求的越簡(jiǎn)單就越難!所以要貪得無厭? 有必要開家庭會(huì)議了!把某些事情攤開說。這樣才會(huì)戳到痛處!就會(huì)有...
    淡淡的好嗎閱讀 175評(píng)論 0 0

友情鏈接更多精彩內(nèi)容