《大數(shù)據(jù)和人工智能交流》頭條號(hào)向廣大初學(xué)者新增C 、Java 、Python 、Scala、javascript 等目前流行的計(jì)算機(jī)、大數(shù)據(jù)編程語言，希望大家以后關(guān)注本頭條號(hào)更多的內(nèi)容。作者：軟件設(shè)計(jì)師天涯雨。

(一)javascript的DOM對(duì)象總結(jié)：輕松使用原生態(tài)js開發(fā)特效-1

一、創(chuàng)建文本

【1】方法1

1.創(chuàng)建文本對(duì)象

var textNode=document.createTextNode("創(chuàng)建了一個(gè)文本節(jié)點(diǎn)");

2.獲取 div對(duì)象

var divNode=document.getElementById("div_1");

3.將文本節(jié)點(diǎn)添加到div節(jié)點(diǎn)中

divNode.appendChild(textNode);

.c01{

width:200px;

height:200px;

border:5px blue solid;

}

【2】方法2：使用innerHTML屬性

.c01{

width:200px;

height:200px;

border:5px blue solid;

}

二、創(chuàng)建控件

【1】方法1：

1.創(chuàng)建一個(gè)按鈕節(jié)點(diǎn)

var buttonNode=document.createElement("input");

buttonNode.type="button";

buttonNode.value="新按鈕";

2.獲取 div節(jié)點(diǎn)

var divNode=document.getElementById("div_1");

3.將文本節(jié)點(diǎn)添加到div節(jié)點(diǎn)中

divNode.appendChild(buttonNode);

.c01{

width:200px;

height:200px;

border:5px blue solid;

}

【2】方法2：

.c01{

width:200px;

height:200px;

border:5px blue solid;

}

三、創(chuàng)建select控件的option節(jié)點(diǎn)

1、獲得select控件對(duì)象

var selectObj=document.getElementById("selectId");

2、創(chuàng)建option子節(jié)點(diǎn)：語法 new Option("文本值","控件值")

var optionObj=new Option("北京","010");

3、將option選項(xiàng)添加到控件select對(duì)象中

selectObj.options.add(optionObj);

示例1：

請(qǐng)選擇

示例2：

請(qǐng)選擇

/表格節(jié)點(diǎn)的操作(***)/

四、創(chuàng)建表格

【1】、 創(chuàng)建表格方法1

1、我們通過通過createElement創(chuàng)建元素形式來完成

(1)創(chuàng)建表格節(jié)點(diǎn)

var tableNode=document.createElement("table");

(2)創(chuàng)建tBody節(jié)點(diǎn)

var tbodyNode=document.createElement("tbody");

(3)創(chuàng)建tr節(jié)點(diǎn)

var trNode=document.createElement("tr");

(4)創(chuàng)建td節(jié)點(diǎn)

var tdNode=document.createElement("td");

tdNode.innerHTML="這是單元格";

2.關(guān)聯(lián)這些節(jié)點(diǎn)，進(jìn)行指定層次節(jié)點(diǎn)的添加

trNode.appendChild(tdNode);

tbodyNode.appendChild(trNode);

tableNode.appendChild(tbodyNode);

document.getElementsByTagName('div')[0].appendChild(tableNode);

例如：

table{

border:blue 1px solid;

width:800px;

border-collapse:collapse;

}

table td{

border:blue 1px solid;

padding:5px;

}

---

【2】創(chuàng)建表格方式2

通過table對(duì)象來完成

(1)創(chuàng)建表格對(duì)象

var tableNode=document.createElement("table");

(2)創(chuàng)建tr對(duì)象

var trNode=tableNode.insertRow();

(3)創(chuàng)建td節(jié)點(diǎn)

var tdNode=trNode.insertCell();

關(guān)聯(lián)這些節(jié)點(diǎn)，進(jìn)行指定層次節(jié)點(diǎn)的添加

document.getElementsByTagName('div')[0].appendChild(tableNode);

例子1：

table{

border:blue 1px solid;

width:800px;

border-collapse:collapse;

}

table td{

border:blue 1px solid;

padding:5px;

}

---

例子2：創(chuàng)建多行多列的代碼為

function createTable2()

{

//1.創(chuàng)建節(jié)點(diǎn)

//(1)創(chuàng)建表格節(jié)點(diǎn)

var tableNode=document.createElement("table");

for(var i=1;i<=6;i++)

{

//(2)創(chuàng)建tr節(jié)點(diǎn)

var trNode=tableNode.insertRow();

for(var j=1;j<=6;j++)

{

//(3)創(chuàng)建td節(jié)點(diǎn)

var tdNode=trNode.insertCell();

tdNode.innerHTML=i+"--"+j;

}

}

//2.關(guān)聯(lián)這些節(jié)點(diǎn)，進(jìn)行指定層次節(jié)點(diǎn)的添加

document.getElementsByTagName('div')[0].appendChild(tableNode);

document.getElementsByName("createButton")[0].disabled=true;

}

五、刪除表格

deleteRow()函數(shù)可以帶參數(shù)，形式如下：deleteRow(index)：index從0開始和上面兩個(gè)方法差不多的意思，就是刪除指定位置的行和單元格

【1】通過行的對(duì)象刪除

111	111	111
222	222	222
333	333	333

另外也可以通過document.getElementById("行的Id").removeNode();來進(jìn)行刪除

【2】循環(huán)刪除表格的行

100	200	300
111	222	333
111	222	333

【3】刪除列deleteCell

這里涉及表格2個(gè)重要集合(注意是集合)

1、rows:獲取來自于 table 對(duì)象的 tr (表格行)對(duì)象的集合

2、cells:獲取表格行或整個(gè)表格中所有單元格的集合

例如：

(1)

//1、獲取表格對(duì)象

var tableNode=document.getElementById("tableId");

//2、獲得行對(duì)象的數(shù)組，那么數(shù)組每個(gè)元素是個(gè)行對(duì)象

var arr=tableNode.rows;

//3、刪除第3行第3列

arr[2].deleteCell(2);

(2)計(jì)算第1行有多少列

var len=tableNode.rows[0].cells.length ;

alert(len);

(3)計(jì)算一共有多少行

var len=tableNode.rows.length ;

alert(len);

例如：

//刪除列，其實(shí)就是在刪除每一行中同一位置的單元格

function delCol()

{

//獲取表格對(duì)象

var tableNode=document.getElementById("tableid");

if(tableNode==null)

{

alert("表格不存在");

return;

}

var colnum=document.getElementsByName("delcol")[0].value;

if(colnum>=1 && colnum<=tableNode.rows[0].cells.length)

{

for(var i=0;i

{

tableNode.rows[i].deleteCell(colnum-1);

}

}

else

{

alert("列不存在");

}

}

六、動(dòng)態(tài)設(shè)置單元格與行的屬性

【1】方法1：setAttribute(屬性，屬性值)

111	111	111
222	222	222
333	333	333

【2】方法2：獲得對(duì)象的屬性，然后直接賦值，此方法以前講過

var objMyTable = document.getElementById("tableId");

objMyTable.border=5;//為表格設(shè)置邊框?yàn)?

(二)javascript的DOM對(duì)象總結(jié)：輕松使用原生態(tài)js開發(fā)特效-2

1、行對(duì)象的集合

由table對(duì)象可以獲得行對(duì)象大的集合

var trs=tableObj.rows;

2、獲得行的索引:由當(dāng)前行對(duì)象返回當(dāng)前的索引

var index=trObj.rowIndex;

3、列對(duì)象的集合

var tds=trObj.cells;

4、table對(duì)象有deleteRow(index)

5、使用this指針獲得當(dāng)前對(duì)象

Hello World

6、獲取父節(jié)點(diǎn)的對(duì)象

parentNode :獲取文檔層次中的父對(duì)象

示例1：

aaa0	aaa1
bbb0	bbb1
ccc0	ccc1

示例2：

aaa0	aaa1
bbb0	bbb1
ccc0	ccc1

示例3：新增一行單元格

table{

border:blue 1px solid;

width:200px;

border-collapse:collapse;

}

td{

border:blue 1px solid;

padding:5px;

}

商品編號(hào)	商品價(jià)格	操作
g001	100	刪除

示例4：刪除一行

商品編號(hào)	商品價(jià)格	操作
g001	100	刪除

《大數(shù)據(jù)和人工智能交流》的宗旨

1、將大數(shù)據(jù)和人工智能的專業(yè)數(shù)學(xué)：概率數(shù)理統(tǒng)計(jì)、線性代數(shù)、決策論、優(yōu)化論、博弈論等數(shù)學(xué)模型變得通俗易懂。

2、將大數(shù)據(jù)和人工智能的專業(yè)涉及到的數(shù)據(jù)結(jié)構(gòu)和算法：分類、聚類 、回歸算法、概率等算法變得通俗易懂。

3、最新的高科技動(dòng)態(tài)：數(shù)據(jù)采集方面的智能傳感器技術(shù)；醫(yī)療大數(shù)據(jù)智能決策分析；物聯(lián)網(wǎng)智慧城市等等。

根據(jù)初學(xué)者需要會(huì)有C語言、Java語言、Python語言、Scala函數(shù)式等目前主流計(jì)算機(jī)語言。

根據(jù)讀者的需要有和人工智能相關(guān)的計(jì)算機(jī)科學(xué)與技術(shù)、電子技術(shù)、芯片技術(shù)等基礎(chǔ)學(xué)科通俗易懂的文章。

總結(jié)

以上是生活随笔為你收集整理的table取tr对象 vue_javascript的DOM对象终极总结：你必看的js面向对象的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。