65.关于DOM的增删改 · 原生js-2020

~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <title></title>  <link rel="stylesheet" href="reset.min.css"> <style> .addBtn { padding: 5px 15px; font-size: 20px; } .item { width: 300px; padding: 10px; margin-top: 10px; border: 1px dashed #555; } .item li { line-height: 30px; } .item li:nth-child(even) { background-color: #EEE; } </style> </head> <body> <button class="addBtn">+</button> <ul class="item"> <li> 我是LI1  <a href="javascript:;" class="deleteBtn">删除</a> </li> <li>我是LI2</li> </ul>  <script> /* * 点击加号ADDBTN，动态创建一个LI，并且插入到容器ITEM中 */ let addBtn = document.querySelector('.addBtn'), item = document.querySelector('.item'), count = 2; addBtn.onclick = function () { // 1.动态创建一个LI（可以给其设置样式或者内容） let newLi = document.createElement('li'); // newLi.style.xxx=xxx newLi.className=xxx ... 新创建的元素是对象，可以尽情操作 newLi.innerHTML = `我是LI${++count}`; // 2.把创建的LI添加到指定的容器中 // insertBefore 添加到指定元素的前面 // let first = item.firstElementChild; // item.insertBefore(newLi, first); // appendChild 添加到指定容器末尾 item.appendChild(newLi); }; /* * 点击删除按钮移除元素 */ let deleteBtn = document.querySelector('.deleteBtn'); deleteBtn.onclick = function () { // 获取删除按钮的父元素（第一个LI） let parent = deleteBtn.parentNode; // 从容器中移除掉 item.removeChild(parent); }; /* * 给元素设置自定义属性 * 1.每一个元素都是一个对象（堆内存），我们向堆内存中设置自定义属性即可 * 元素.xxx = xxx 或者元素[xxx]=xxx 操作的是堆内存 *** * 对象键值对的操作 * * 2.每一个元素也是一个标签，我们可以操作其DOM结构，给结构上新增自定义的属性 * 元素.setAttribute('xxx', 'xxx') 操作的是DOM结构 *** * * 两种方案的原理是不一样的，一个操作的是堆内存，一个操作的是DOM结构 */ item['zhufeng'] = '珠峰培训'; //堆内存 // console.dir(item.zhufeng); item.setAttribute('teacher', '周啸天'); //DOM结构 // console.dir(item.getAttribute('zhufeng')); console.log(item.zhufeng); //=>'珠峰培训' console.log(item.getAttribute('zhufeng')); //=>null console.log(item.teacher); //=>undefined console.log(item.getAttribute('teacher')); //=>'周啸天' </script> </body> </html> ~~~