1.1. 节点操作
1.1.1 删除节点
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>1.1.2 案例:删除留言
1.1.3 复制(克隆)节点
1.1.4 案例:动态生成表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
</style>
</head>
<body>
<table cellspacing='0'>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
//1.先准备好案例
var datas = [{
name: 'weiyinluo',
subiect: 'js',
score: 100
}, {
name: 'hongli',
subiect: 'java',
score: 90
}, {
name: 'weiyinluo',
subiect: 'c++',
score: 80
}, {
name: 'dazhutizi',
subiect: 'js',
score: 70
}]
//2.往tbody里创建行，有几个人就创建几行
var tbody = document.querySelector('tbody');
for (let i = 0; i < datas.length; i++) {
//1）创建tr
var tr = document.createElement('tr');
tbody.appendChild(tr);
//2）行里面创建单元格td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象datas[i]
for (var k in datas[i]) {
var td = document.createElement('td');
//吧对象里面的属性值 给td
// console.log(datas[i][k]);
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
//3）创建有删除两个字的单元格
var td = document.createElement('td');
td.innerHTML = "<a href='javascript:;'>删除</a>";
tr.appendChild(td);
}
//删除操作
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
// tr.removeChild()⭐️注意删的不是tr里的 而是tbody里面的；只有tbody里面删了才是删了tr整行，若删tr里面的则是删单元格td了
tbody.removeChild(this.parentNode.parentNode); //a的爸爸是单元格，a的爸爸的爸爸是tr行 行的爸爸叫tbody
}
}
// for(var k in obj){
// k 属性名
// obj[k] 属性值
// }
</script>
</body>
</html>1.1.5 创建元素的三种方式
<body>
<button>点击</button>
<p>123</p>
<script>
// 三种创建元素方式区别
// 1. document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘
window.onload = function() {
document.write('<div>hhhh</div>'); //button和p就没有了 如果页面文档流加载完毕，再调用这句话会导致页面重绘
}
// 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>
</body>1.1.6 innerTHML和createElement效率对比
innerHTML字符串拼接方式(效率低)
createElement方式(效率一般)
innerHTML数组方式(效率高)
1.2. DOM的核心总结
1.3.2 事件监听
addEventListener()事件监听(IE9以后支持)
eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget(目标对象)上，当该对象触 发指定的事件时，就会执行事件处理函数。
attacheEvent()事件监听(IE678支持)
eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget(目标对象) 上，当该对象触发 指定的事件时，指定的回调函数就会被执行。
事件监听兼容性解决方案
封装一个函数，函数中判断浏览器的类型
1.3.3. 删除事件(解绑事件)
1.3.4. DOM事件流
html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的 大盒子。
当你单击一个div时，同时你也单击了div的父元素，甚至整个⻚面。
那么是先执行父元素的单击事件，还是先执行div的单击事件
比如:我们给⻚面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了 html，单击了document。
当时的2大浏览器霸主谁也不服谁!
IE 提出从目标元素开始，然后一层一层向外接收事件并响应，也就是冒泡型事件流。 Netscape(网景公司)提出从最外层开始，然后一层一层向内接收事件并响应，也就是捕获型事件 流。
江湖纷争，武林盟主也脑壳疼!!!
最终，w3c 采用折中的方式，平息了战火，制定了统一的标准 —--— 先捕获再冒泡。 现代浏览器都遵循了此标准，所以当事件发生时，会经历3个阶段。
DOM 事件流会经历3个阶段:
1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段
我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生 的最具体元素(目标点)的捕获过程;之后会产生泡泡，会在最低点( 最具体元素)之后漂浮到水面 上，这个过程相当于事件冒泡。
1.3.5. 事件对象
什么是事件对象
事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。 比如:
1. 谁绑定了这个事件。
2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。 3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。
事件对象的使用
事件触发发生时就会产生事件对象，并且系统会以实参的形式传给事件处理函数。 所以，在事件处理函数中声明1个形参用来接收事件对象。
事件对象的兼容性处理
事件对象本身的获取存在兼容问题:
1. 标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
2. 在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。
1.3.6 阻止默认行为
html中一些标签有默认行为，例如a标签被单击后，默认会进行⻚面跳转。
// 2. 阻止默认行为 让链接不跳转
var a = document.querySelector('a'); a.addEventListener('click', function(e) {
e.preventDefault(); // dom 标准写法 });
// 3. 传统的注册方式 a.onclick = function(e) {
// 普通浏览器 e.preventDefault(); 方法 e.preventDefault();
// 低版本浏览器 ie678 returnValue 属性 e.returnValue = false;
// 我们可以利用return false 也能阻止默认行为 没有兼容性问题 return false;
1.3.8 事件委托
事件冒泡本身的特性，会带来的坏处，也会带来的好处。 什么是事件委托
把事情委托给别人，代为处理。
事件委托也称为事件代理，在 jQuery 里面称为事件委派。 说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。
事件委托的原理
给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元 素。
事件委托的作用
我们只操作了一次 DOM ，提高了程序的性能。 动态新创建的子元素，也拥有事件。
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
