JS学习笔记（五）DOM增删改

0x00

好好学习吧真的，想啥520呢

0x01 DOM增删改

创建节点：

创建元素节点==>创建文本节点==>将文本节点设置成元素节点子节点==>添加到页面的节点下

1

2

3

4

将节点插入到节点中：

替换节点：

删除节点：

也可以获取父元素之后直接删除子节点：

读取节点内的HTML代码：

设置节点内的HTML代码：

在原来的基础上添加子节点：

使用innerHTML也可以完成DOM的增删改的相关操作

但是注意：这种方式会删除原有的所有html代码，然后再添加新的

所以我们一般综合使用两种方式的折中：

0x011 删除练习

0x012 添加新员工

1.获取用户添加的员工信息

2.方法一：创建一个tr大节点然后整体插入

创建每个节点：

将tr补全元素，创建联系，把tr做好

把做好的tr添加到table中：

注意要添加到原来tr的兄弟节点中

把添加元素的功能封装成一个函数：

把删除的功能变成函数

再把每个超链接的单击响应函数变成删除函数对象

2.方法二：用innerHTML来简化

0x013 a的索引问题

for循环会在页面加载完成之后立即执行，但是响应函数是在超链接点击时才执行

所以当响应函数执行时 ，for循环早已执行完毕

0x02 操作内联样式

使用DOM来操作CSS

先写一个CSS

创建按钮，绑定响应函数

 

修改box1的样式：

注意点：

通过style属性设置和读取的都是内联样式

读取元素的样式：

currentStyle只有IE可以用

可以用另一个方法

这个方法获取到的是生效的值

通过对象.样式名来读取样式

 

以上两个方法都是只读的， 并不能修改属性

 

如果想既兼容IE8也兼容所有浏览器，需要自己来写一个方法，来兼容

有哪个用哪个，没有就用别的

其他样式的相关属性：

（手册待补充）