学习目标:
能够使用removeChild()方法删除节点
能够完成动态生成表格案例
能够使用传统方式和监听方式给元素注册事件
能够说出事件流执行的三个阶段
能够在事件处理函数中获取事件对象
能够使用事件对象取消默认行为
能够使用事件对象阻止事件冒泡
能够使用事件对象获取鼠标的位置
能够完成跟随鼠标的天使案例
能够说出常用的3-5个键盘事件
能够知道如何获取当前键盘按下的是哪个键
node.removeChild() 方法从 node节点中删除一个子节点,返回删除的节点。
- <button>删除</button>
- <ul>
- <li>熊大</li>
- <li>熊二</li>
- <li>光头强</li>
- </ul>
- <script>
- // 1.获取元素
- var ul = document.querySelector('ul');
- var btn = document.querySelector('button');
- // 2. 删除元素 node.removeChild(child)
- // ul.removeChild(ul.children[0]);
- // 3. 点击按钮依次删除里面的孩子
- btn.onclick = function() {
- if (ul.children.length == 0) {
- this.disabled = true;
- } else {
- ul.removeChild(ul.children[0]);
- }
- }
- </script>
- <textarea name="" id=""></textarea>
- <button>发布</button>
- <ul>
-
- </ul>
- <script>
- // 1. 获取元素
- var btn = document.querySelector('button');
- var text = document.querySelector('textarea');
- var ul = document.querySelector('ul');
- // 2. 注册事件
- btn.onclick = function() {
- if (text.value == '') {
- alert('您没有输入内容');
- return false;
- } else {
- // console.log(text.value);
- // (1) 创建元素
- var li = document.createElement('li');
- // 先有li 才能赋值
- li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
- // (2) 添加元素
- // ul.appendChild(li);
- ul.insertBefore(li, ul.children[0]);
- // (3) 删除元素 删除的是当前链接的li 它的父亲
- var as = document.querySelectorAll('a');
- for (var i = 0; i < as.length; i++) {
- as[i].onclick = function() {
- // 删除的是 li 当前a所在的li this.parentNode;
- ul.removeChild(this.parentNode);
- }
- }
- }
- }
- </script>
- <ul>
- <li>1111</li>
- <li>2</li>
- <li>3</li>
- </ul>
- <script>
- var ul = document.querySelector('ul');
- // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
- // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
- var lili = ul.children[0].cloneNode(true);
- ul.appendChild(lili);
- </script>
- <script>
- // 1.先去准备好学生的数据
- var datas = [{
- name: '魏璎珞',
- subject: 'JavaScript',
- score: 100
- }, {
- name: '弘历',
- subject: 'JavaScript',
- score: 98
- }, {
- name: '傅恒',
- subject: 'JavaScript',
- score: 99
- }, {
- name: '明玉',
- subject: 'JavaScript',
- score: 88
- }, {
- name: '大猪蹄子',
- subject: 'JavaScript',
- score: 0
- }];
- // 2. 往tbody 里面创建行: 有几个人(通过数组的长度)我们就创建几行
- var tbody = document.querySelector('tbody');
- // 遍历数组
- for (var i = 0; i < datas.length; i++) {
- // 1. 创建 tr行
- var tr = document.createElement('tr');
- tbody.appendChild(tr);
- // 2. 行里面创建单元格td 单元格的数量取决于每个对象里面的属性个数
- // 使用for in遍历学生对象
- for (var k in datas[i]) {
- // 创建单元格
- var td = document.createElement('td');
- // 把对象里面的属性值 datas[i][k] 给 td
- td.innerHTML = datas[i][k];
- tr.appendChild(td);
- }
- // 3. 创建有删除2个字的单元格
- var td = document.createElement('td');
- td.innerHTML = '<a href="javascript:;">删除 </a>';
- tr.appendChild(td);
-
- }
- // 4. 删除操作 开始
- var as = document.querySelectorAll('a');
- for (var i = 0; i < as.length; i++) {
- as[i].onclick = function() {
- // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸) node.removeChild(child)
- tbody.removeChild(this.parentNode.parentNode)
- }
- }
- </script>
- <script>
- // 三种创建元素方式区别
- // 1. document.write() 创建元素 如果页面文档流加载完毕,再调用这句话会导致页面重绘
- var btn = document.querySelector('button');
- btn.onclick = function() {
- document.write('<div>123</div>');
- }
-
- // 2. innerHTML 创建元素
- var inner = document.querySelector('.inner');
- for (var i = 0; i <= 100; i++) {
- inner.innerHTML += '<a href="#">百度</a>'
- }
- var arr = [];
- for (var i = 0; i <= 100; i++) {
- arr.push('<a href="#">百度</a>');
- }
- inner.innerHTML = arr.join('');
- // 3. document.createElement() 创建元素
- var create = document.querySelector('.create');
- for (var i = 0; i <= 100; i++) {
- var a = document.createElement('a');
- create.appendChild(a);
- }
- </script>
innerHTML字符串拼接方式(效率低)
- <script>
- function fn() {
- var d1 = +new Date();
- var str = '';
- for (var i = 0; i < 1000; i++) {
- document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
- }
- var d2 = +new Date();
- console.log(d2 - d1);
- }
- fn();
- </script>
createElement方式(效率一般)
- <script>
- function fn() {
- var d1 = +new Date();
-
- for (var i = 0; i < 1000; i++) {
- var div = document.createElement('div');
- div.style.width = '100px';
- div.style.height = '2px';
- div.style.border = '1px solid red';
- document.body.appendChild(div);
- }
- var d2 = +new Date();
- console.log(d2 - d1);
- }
- fn();
- </script>
innerHTML数组方式(效率高)
- <script>
- function fn() {
- var d1 = +new Date();
- var array = [];
- for (var i = 0; i < 1000; i++) {
- array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
- }
- document.body.innerHTML = array.join('');
- var d2 = +new Date();
- console.log(d2 - d1);
- }
- fn();
- </script>
关于dom操作,我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。