5、dom 结构 *** 作怎样添加、移除、移动、复制、创建和查找节点

dom 结构 *** 作怎样添加、移除、移动、复制、创建和查找节点？（必会）

1、创建新节点

createDocumentFragment( ) //创建一个 DOM 片段

createElement( ) //创建一个具体的元素

createTextnode( ) //创建一个文本节点

2、添加、移除、替换、插入

appendChild( )

removeChild( )

replaceChild( )

insertBefore( ) //并没有 insertAfter()

3、查找

getElementsByTagName( ) //通过标签名称

getElementsByName( ) //通过元素的 Name 属性的值(IE 容错能力较强，会得到一个数组，其中包括 id 等于 name 值的)

getElementById( ) //通过元素 Id，唯一性

在vue的开发过程中，常常需要 *** 作表格元素，比如数据的分页呈现，某行数据的修改、删除等 *** 作，不可避免的需要 *** 作某行数据，本文描述了这一过程

首先，我们全局引入ant-design-vue，本文简称为antd，为蚂蚁金服推出的一款UI组件，在main.js中添加即可。

下面我们使用antd的表格组件，在dom元素中定义表格相关属性及数据的来源信息等。

dataSource为数据的来源，格式为数组，我们通过ajax的方式请求后台获取数据。

列信息需要和返回对象的属性对应，如果有些列不是对象的属性，比如 *** 作列，可以通过增加scopedSlots的方式。

名称为action的插槽(slot)，需要在dom元素中进行设置，添加在a-table的子元素中。slot-scope="text,record"中的record就是这行的数据值。

我们通过F12进行调试，将record的信息进行打印，不难发现，record确实记录了这行的数据信息

---