DOM / DOM操作表格

DOM

 【获取层次节点的常用属性】

1 .childNodes:(数组)获取UL里面的所有子节点(包含元素节点/文本节点);

2 .firstChild:获取元素的第一个子节点;

3 .lastChild: 获取元素的最后一个子节点;

4 .ownerDocument:获取当前文档根节点。在HTML文档中,为document节点;

5 .parentNode: 获取当前节点的父节点;

6 .previousSibling:获取当前节点的前一个兄弟节点;

7 .nextSibling: 获取当前节点的后一个兄弟节点;

8 .attributes:获取当前元素节点的所有属性节点;

注:上述属性,均会获得所有的元素节点和文本节点,如果只需要元素节点,需要使用对应ELemengt属性,例如,firstChild-->firstElementChild

【创建并新增节点】

1 .createElement("标签名"):创建一个新的节点。需要配合 .setAttriibute()方法设置新节点的相关属性;

2 .appendChild(节点名):在某元素的最后追加一个新节点

3 .insertBefore(新节点名,目标节点名):将新节点,插入到目标节点之前

4 .克隆对象 .cloneNode(true/false):需要克隆谁,就用谁去调用克隆对象;

>>>传递参数可以为true或false:

①true表示:克隆当前节点及所有子节点

②false表示: 只克隆当前节点,不克隆子节点。

【删除/替换节点】

1、 .removeChild(需要删除节点):从父容器中,删除指定节点;

2、 .replaceChild(新节点,被替换节点):用新节点替换制定节点。如果新节点为页面中已有节点,将会被此节点删除后,替换到指定节点。

DOM操作表格

【表格对象】

1、 rows属性: 返回表格中的所有行,数组;

2、 insertRow(index): 在表格的第index+1行,插入一个新行

3、 deleteRow(index): 删除表格的第index+1行。

 【表格的行对象】

1、 cells属性: 返回当前行中的所有单元格,数组;

2、 rowIndex属性: 返回当前行,在表格中的索引顺序,从0开始;

3、 insertCell(index): 在当前行的第index+1处插入一个<td>

4、 deleteCell(index): 删除当前行的第index+1个<td>

【表格的单元格对象】

1、 cellIndex属性:返回单元格在改行的索引顺序,从0开始;

2、 innerHTML属性: 返回或设置当前单元格中的HTML代码;

3、 align属性: 设置当前单元格的水平对齐方式;

4、 className属性: 设置单元格的class名称;

时间: 2024-10-20 16:24:00

DOM / DOM操作表格的相关文章

DOM之操作表格

table元素节点的属性和方法: caption         获取表格中的标题节点 tHead           获取表格的thead元素节点 tFoot             获取表格的tfoot元素界定啊 tBodies         获取表格的所有tbody元素节点 createTHead()     创建thead元素节点并添加(如果没有的话,才会创建) createTFoot()      创建tfoot元素节点并添加(如果没有的话,才会创建) createCaption()

JavaScript学习9:DOM操作表格及样式

DOM在操作生成HTML上,还是比较简单明了的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.那本文今天就来了解一下DOM如何操作表格和样式. 一 操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTML DOM来操作它. 下面我们就使用DOM来创建一个表格: <span style="font-size:18px;">window.onload=function(){ var table

JavaScript操作表格及CSS样式

概述 在前端开发中,表格主要用于存储结构化的数据,CSS主要用于修饰DOM元素,如何通过DOM来操作表格及CSS呢?本文主要通过一些简单的小例子,简述DOM对表格和CSS的常见操作方法,仅供学习分享使用,如有不足之处,还请指正. 获取表格及数据 假如当前有一个表格,id为tb01,如下所示: 1 <table id="tb01" width="300" border="1" cellspacing="2" cellpad

DOM操作表格

前面的话 表格table元素是HTML中最复杂的结构之一.要想创建表格,一般都必须涉及表示表格行.单元格.表头等方面的标签.由于涉及的标签多,因而使用核心DOM方法创建和修改表格往往都免不了要编写大量的代码.本文将详细介绍DOM操作表格的属性和方法 需求 要通过DOM实现下列格式的表格结构 <table border = "1" width = "100%">     <tbody>         <tr>           

19.DOM操作表格及样式

DOM操作表格及样式 学习要点:1.操作表格2.操作样式 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一.操作表格<table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTML DOM来操作它.(PS:HTML DOM提供了更加方便快捷的方式来操作HTML,有手册). //需要操作table<table border = "1

轻松学习JavaScript二十三:DOM编程学习之操作表格

一使用HTML标签创建表格: 代码: <span style="font-size:18px;"><table border="1px"width="300px"> <caption>人员表</caption> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th>

DOM系列---DOM操作表格

DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本篇章主要了解一下DOM操作表格. 一.操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTML DOM来操作它.(PS:HTML DOM提供了更加方便快捷的方式来操作HTML,有手册). html代码部分: //需要操作的table 1 <table border="1" width="300&

第21章 DOM操作表格及样式

学习要点: 1.操作表格 2.操作样式 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一.操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTML DOM来操作它.(PS:HTML DOM提供了更加方便快捷的方式来操作HTML,有手册). //需要操作的table <table border="1" w

JavaScript(第二十天)【DOM操作表格及样式】

DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一.操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTML DOM来操作它.(PS:HTML DOM提供了更加方便快捷的方式来操作HTML,有手册). //需要操作的table <table border="1" width="300"