《大數據和人工智能交流》頭條號向廣大初學者新增C 、Java 、Python 、Scala、javascript 等目前流行的計算機、大數據編程語言，希望大家以后關注本頭條號更多的內容。作者：軟件設計師天涯雨。

(一)javascript的DOM對象總結：輕松使用原生態js開發特效-1

一、創建文本

【1】方法1

1.創建文本對象

var textNode=document.createTextNode("創建了一個文本節點");

2.獲取 div對象

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

3.將文本節點添加到div節點中

divNode.appendChild(textNode);

.c01{

width:200px;

height:200px;

border:5px blue solid;

}

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

.c01{

width:200px;

height:200px;

border:5px blue solid;

}

二、創建控件

【1】方法1：

1.創建一個按鈕節點

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

buttonNode.type="button";

buttonNode.value="新按鈕";

2.獲取 div節點

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

3.將文本節點添加到div節點中

divNode.appendChild(buttonNode);

.c01{

width:200px;

height:200px;

border:5px blue solid;

}

【2】方法2：

.c01{

width:200px;

height:200px;

border:5px blue solid;

}

三、創建select控件的option節點

1、獲得select控件對象

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

2、創建option子節點：語法 new Option("文本值","控件值")

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

3、將option選項添加到控件select對象中

selectObj.options.add(optionObj);

示例1：

請選擇

示例2：

請選擇

/表格節點的操作(***)/

四、創建表格

【1】、 創建表格方法1

1、我們通過通過createElement創建元素形式來完成

(1)創建表格節點

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

(2)創建tBody節點

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

(3)創建tr節點

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

(4)創建td節點

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

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

2.關聯這些節點，進行指定層次節點的添加

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】創建表格方式2

通過table對象來完成

(1)創建表格對象

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

(2)創建tr對象

var trNode=tableNode.insertRow();

(3)創建td節點

var tdNode=trNode.insertCell();

關聯這些節點，進行指定層次節點的添加

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：創建多行多列的代碼為

function createTable2()

{

//1.創建節點

//(1)創建表格節點

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

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

{

//(2)創建tr節點

var trNode=tableNode.insertRow();

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

{

//(3)創建td節點

var tdNode=trNode.insertCell();

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

}

}

//2.關聯這些節點，進行指定層次節點的添加

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

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

}

五、刪除表格

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

【1】通過行的對象刪除

111	111	111
222	222	222
333	333	333

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

【2】循環刪除表格的行

100	200	300
111	222	333
111	222	333

【3】刪除列deleteCell

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

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

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

例如：

(1)

//1、獲取表格對象

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

//2、獲得行對象的數組，那么數組每個元素是個行對象

var arr=tableNode.rows;

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

arr[2].deleteCell(2);

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

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

alert(len);

(3)計算一共有多少行

var len=tableNode.rows.length ;

alert(len);

例如：

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

function delCol()

{

//獲取表格對象

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("列不存在");

}

}

六、動態設置單元格與行的屬性

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

111	111	111
222	222	222
333	333	333

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

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

objMyTable.border=5;//為表格設置邊框為5

(二)javascript的DOM對象總結：輕松使用原生態js開發特效-2

1、行對象的集合

由table對象可以獲得行對象大的集合

var trs=tableObj.rows;

2、獲得行的索引:由當前行對象返回當前的索引

var index=trObj.rowIndex;

3、列對象的集合

var tds=trObj.cells;

4、table對象有deleteRow(index)

5、使用this指針獲得當前對象

Hello World

6、獲取父節點的對象

parentNode :獲取文檔層次中的父對象

示例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;

}

商品編號	商品價格	操作
g001	100	刪除

示例4：刪除一行

商品編號	商品價格	操作
g001	100	刪除

《大數據和人工智能交流》的宗旨

1、將大數據和人工智能的專業數學：概率數理統計、線性代數、決策論、優化論、博弈論等數學模型變得通俗易懂。

2、將大數據和人工智能的專業涉及到的數據結構和算法：分類、聚類 、回歸算法、概率等算法變得通俗易懂。

3、最新的高科技動態：數據采集方面的智能傳感器技術；醫療大數據智能決策分析；物聯網智慧城市等等。

根據初學者需要會有C語言、Java語言、Python語言、Scala函數式等目前主流計算機語言。

根據讀者的需要有和人工智能相關的計算機科學與技術、電子技術、芯片技術等基礎學科通俗易懂的文章。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。