javascript的DOM对象终极总结：你必看的js面向对象

数字化与智能化 08-25 263

前言：

而今各位老铁们对“js集合对象”可能比较注重，各位老铁们都需要了解一些“js集合对象”的相关文章。那么小编在网上收集了一些关于“js集合对象””的相关知识，希望兄弟们能喜欢，姐妹们快快来学习一下吧！

《大数据和人工智能交流》头条号向广大初学者新增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);

<style>

.c01{

width:200px;

height:200px;

border:5px blue solid;

}

</style>

</div>

function show()

{

//1、.创建文本对象

var txt=document.createTextNode("Hello")

//2、获得div对象

var objs=document.getElementsByTagName("div");

var divObj=objs[0];

//3、将文本节点添加到区域对象中

divObj.appendChild(txt);

}

</script>

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

<style>

.c01{

width:200px;

height:200px;

border:5px blue solid;

}

</style>

</div>

function show()

{

var objs=document.getElementsByTagName("div");

var divObj=objs[0];

divObj.innerHTML="hello";

}

</script>

二、创建控件

【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);

<style>

.c01{

width:200px;

height:200px;

border:5px blue solid;

}

</style>

</div>

function show()

{

//1、创建一个按钮节点

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

node.type="button";

node.value="确定";

//2、获取区域对象

var objs=document.getElementsByTagName("div");

var divObj=objs[0];

//3、将控件对象加入区域对象

divObj.appendChild(node);

}

</script>

【2】方法2：

<style>

.c01{

width:200px;

height:200px;

border:5px blue solid;

}

</style>

</div>

function show()

{

//2、获取区域对象

var objs=document.getElementsByTagName("div");

var divObj=objs[0];

divObj.innerHTML="<input type='button' value='ok'>";

}

</script>

三、创建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：

</select>

function show()

{

//1、获得select控件对象

var selObj=document.getElementById("s001");

//2、创建option子节点

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

//3、将option选项添加到控件select对象中

selObj.options.add(optObj);

}

</script>

示例2：

</select>

function show()

{

var arr=["北京","上海","天津"];

//1、获得select控件对象

var selObj=document.getElementById("s001");

selObj.length=1;

//2、创建option子节点

for(var i=0;i<arr.length;i++)

{

var optObj=new Option(arr[i],i);

//3、将option选项添加到控件select对象中

selObj.options.add(optObj);

}

</script>

/////////////////////////////////////////////表格节点的操作（***）/////////////////////////////////////////////////////

四、创建表格

【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);

例如：

<html>

<head>

<style>

table{

border:blue 1px solid;

width:800px;

border-collapse:collapse;

}

table td{

border:blue 1px solid;

padding:5px;

}

</style>

</head>

<body>

<hr/>

<div>

</div>

</body>

</html>

//通过createElement创建元素形式来完成

function createTable()

{

//1.创建节点

//(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);

}

</script>

【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：

<html>

<head>

<style>

table{

border:blue 1px solid;

width:800px;

border-collapse:collapse;

}

table td{

border:blue 1px solid;

padding:5px;

}

</style>

</head>

<body>

<hr/>

<div>

</div>

</body>

</html>

//通过table对象来完成

function createTable2()

{

//1.创建节点

//(1)创建表格节点

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

//(2)创建tr节点

var trNode=tableNode.insertRow();

//(3)创建td节点

var tdNode=trNode.insertCell();

tdNode.innerHTML="Hello World";

//2.关联这些节点，进行指定层次节点的添加

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

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

}

</script>

例子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】通过行的对象删除

</table>

<br>

function deleteRow()

{

//1、获取表格对象

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

//2、获得行的对象

var row=document.getElementById("trid2");

//3、获取改行的索引

var index=row.rowIndex;

//4、从表格对象中将该行删除

tableNode.deleteRow(index);

}

</script>

另外也可以通过document.getElementById("行的Id").removeNode();来进行删除

【2】循环删除表格的行

</table>

<br>

function deleteRow()

{

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

//tableNode.deleteRow(1);

var length= tableNode.rows.length;

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

{

tableNode.deleteRow(i);

}

</script>

【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.length;i++)

{

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

}

else

{

alert("列不存在");

}

六、动态设置单元格与行的属性

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

</table>

<br>

function setAtt()

{

//1、获取表格对象

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

objMyTable.setAttribute("border",5);//为表格设置边框为1

//为TD设置高度

var objCell = document.getElementById("cell333");

objCell.setAttribute("height",50);//为单元格设置高度为50

}

</script>

【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指针获得当前对象

<p onclick="show(this)">Hello World</p>

function show(obj)

{

alert(obj.innerHTML);

}

</script>

6、获取父节点的对象

parentNode :获取文档层次中的父对象

示例1：

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

function show()

{

var tableObj=document.getElementById("table001");

var trObjs=tableObj.rows;

var tdObjs1=trObjs[1].cells;

var v=tdObjs1[1].innerHTML;

alert(v);

}

</script>

示例2：

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

function show()

{

var tableObj=document.getElementById("table001");

var trObjs=tableObj.rows;

var index=trObjs[1].rowIndex;

alert(index);

}

</script>

示例3：新增一行单元格

<style>

table{

border:blue 1px solid;

width:200px;

border-collapse:collapse;

}

td{

border:blue 1px solid;

padding:5px;

}

</style>

<tr>

</tr>

<tr>

</tr>

</table>

function show()

{

//1、获得table对象

var tableObj=document.getElementById("table001");

//2、由table对象得到tr对象

var trObj=tableObj.insertRow();

//3、由tr对象生成列对象

//第0个对象

var tdObj0=trObj.insertCell(0);

tdObj0.innerHTML="<input type='text'>";

//第1个对象

var tdObj1=trObj.insertCell(1);

tdObj1.innerHTML="<input type='text'>";

//第2个对象

var tdObj2=trObj.insertCell(2);

tdObj2.innerHTML="<input type='button' value='删除'>";

}

</script>

示例4：删除一行

<tr>

</tr>

<tr>

</tr>

</table>

function show()

{

//1、获得table对象

var tableObj=document.getElementById("table001");

//2、由table对象得到tr对象

var trObj=tableObj.insertRow();

var index=trObj.rowIndex;

alert(index);

//3、由tr对象生成列对象

//第0个对象

var tdObj0=trObj.insertCell(0);

tdObj0.innerHTML="<input type='text'>";

//第1个对象

var tdObj1=trObj.insertCell(1);

tdObj1.innerHTML="<input type='text'>";

//第2个对象

var tdObj2=trObj.insertCell(2);

tdObj2.innerHTML="<input type='button' value='删除' onclick='del("+index+")'>";

}

function del(x)

{

//1、获得table对象

var tableObj=document.getElementById("table001");

tableObj.deleteRow(x);

}

</script>

《大数据和人工智能交流》的宗旨

1、将大数据和人工智能的专业数学：概率数理统计、线性代数、决策论、优化论、博弈论等数学模型变得通俗易懂。

2、将大数据和人工智能的专业涉及到的数据结构和算法：分类、聚类、回归算法、概率等算法变得通俗易懂。

3、最新的高科技动态：数据采集方面的智能传感器技术；医疗大数据智能决策分析；物联网智慧城市等等。

根据初学者需要会有C语言、Java语言、Python语言、Scala函数式等目前主流计算机语言。

根据读者的需要有和人工智能相关的计算机科学与技术、电子技术、芯片技术等基础学科通俗易懂的文章。

本文地址：http://www.longkongtuishu.com/cadafDWsCAFoHDl0.html

标签： #js集合对象 #jsdom对象属性 #jsnode对象 #js数据对象