24.3、DOM元素的增删改
2024-02-27 18:42:03 0 举报AI智能生成
DOM元素的增删改
作者其他创作
大纲/内容
创建
document.createElement([标签名])
动态创建一个DOM元素
增加
[CONTAINER].appendChild([元素])
把元素动态插入到指定容器的末尾
[CONTAINER].insertBefore([新元素],[原始页面中的元素])
把新创建的元素放置到指定容器原始页面元素的前面
【原始页面中的元素】肯定在【CONTAINER】容器中
删除
[CONTAINER].removeChild([元素])
在指定容器中移除元素
设置自定义属性
方法一
每一个元素都是一个对象（堆内存），我们向堆内存中设置自定义属性即可
[元素].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
给表单元素设置或者操作其内容
0 条评论
下一页
