DOM创建table

DOM操作技巧详解

最新推荐文章于 2022-02-25 19:38:17 发布

原创最新推荐文章于 2022-02-25 19:38:17 发布 · 896 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table #header #object #c

WebLucene等开源项目同时被 2 个专栏收录

2 篇文章

订阅专栏

AJAX

1 篇文章

订阅专栏

本文介绍了DOM操作中的实用技巧，包括如何使用document.body直接定位到body节点进行操作、通过子节点的增删实现内容替换及更新、创建和插入表格元素等。文章通过具体的代码示例展示了这些操作的具体实现方式。

Dom笔记：

1。document.body可以直接定位到body 节点，如：onclick="reverseNode(document.body)"

var c = node.removeChild(kids[i]) //删除子节点，保存在c中。要删除的东西有返回值

2。var kid1 = table1.firstChild.firstChild.firstChild//定位到<td>节点
   var kid2 = table2.firstChild.firstChild.firstChild//定位到<td>节点
   var repKid = kid2.firstChild //定位到表格二<td>内容的TextNode节点
   kid1.replaceChild(repKid,kid1.firstChild);//用表格二的单元格内容替换表格一的单元格内容，表格二变成没有单元格内容

//下面注释如果开发，将出现object error ,因为表格二已经被改变，它已经没有子节点了（注意：没有子节点的就一定不能调用firstChild）

//kid2.replaceChild(kid1.firstChild,kid2.firstChild);

3.<tbody>隐含存在<table></table> firstChild为<tbody>

4. var node = document.getElementByTagName("table")[0];
   node.removeChild(node.childNodes[0]);//删除全部单元格
   var header = node.createTHead()//新建表格行头
   var headerrow = header.insertRow(0);//插入一个单元行
   var cell = headerrow.insertCell(0)//插入一个单元格

5.parNode.insertBefore(tbody,parNode.firstChild)将节点tbody插入到节点顶部
<td>内部的是<TextNode>节点