登录免费注册

首页  思维导图  详情



 



24.3、DOM元素的增删改

24.3、DOM元素的增删改

2024-02-27 18:42:03   0  举报





DOM元素的增删改

金色小芝麻

前端

js

DOM

模板推荐

作者其他创作

大纲/内容

创建

document.createElement([标签名])<br>

动态创建一个DOM元素

增加

[CONTAINER].appendChild([元素])<br>

把元素动态插入到指定容器的末尾<br>

[CONTAINER].insertBefore([新元素],[原始页面中的元素])<br>

把新创建的元素放置到指定容器原始页面元素的前面

【原始页面中的元素】肯定在【CONTAINER】容器中<br>

删除

[CONTAINER].removeChild([元素])<br>

在指定容器中移除元素

设置自定义属性

方法一

每一个元素都是一个对象（堆内存），我们向堆内存中设置自定义属性即可

[元素].xxx=xxx; / 元素[xxx]=xxx;

写在堆内存中的

获取方式

console.log([ELEMENT].xxx);

删除方式

delete [ELEMENT].xxx;

方法二

每一个元素也是一个标签，可以操作其DOM结构，给结构上新增自定义的属性

[元素].setAttribute('xxx',xxx);

直接写在结构上的

获取方式

[元素].getAttribute('xxx');

删除方式

[元素].removeAttribute('xxx');

区别

两种方式的原理不一样，一个操作的是堆内存，一个操作的是DOM结构，所以不能混用

给DOM设置内容

innerHTML

给非表单元素设置或者操作其内容

能识别HTML标签

innerText

给非表单元素设置或者操作其内容

不能识别HTML标签

value

给表单元素设置或者操作其内容

 Collect

Get Started

增删改查模板

 Collect

Get Started

增删改

 Collect

Get Started

增删改查流程

 Collect

Get Started

增删改查流程图













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document