目录
JavaScript事件三要素
事件三要素
： a.事件源 b.事件类型 c.事件处理程序。
事件源
：要触发的对象 （一般是名词，事件发起者，比如开关按钮）。
事件类型
：怎么触发这个事情 （一般是动词，触发事件，比如点击开关）。
事件处理程序
：发生了什么事情 （处理结果，比如灯亮了）。
常见的事件
2、执行事件的步骤：
1.获取事件源
2.为事件绑定
3.添加事件处理程序（以函数赋值的方式）
<body>
<button id="btn">点击弹窗</button>
<div>我是元素</div>
<script type="text/javascript">
1.获取事件源
var btn = document.getElementById('btn');
2.为事件绑定.onclick事件
3.添加函数（效果为弹窗）
btn.onclick = function(){
alert("这时弹出的对话框")
}
var divv = document.querySelector('div')
console.log(divv)
divv.onclick = function(){
console.log("我被选中了")
}
</script>
</body>
1. 获取元素
1.1 方式
1.1.1 根据ID获取
语法：
var element = document.getElementById('id');参数：
element是一个 Element 对象。
如果当前文档中拥有特定ID的元素不存在则返回null.
id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.
返回值：
返回一个匹配到 ID 的 DOM Element 对象。
若在当前 Document 下没有找到，则返回 null。
1.1.2 根据标签名获取
语法
document.getElementsByTagName('标签名');返回值：
返回的是获取过来元素对象的集合，以伪数组的形式存储的
想要依次打印里面的元素对象，可以采取遍历的方式
element.getElementsByTagName()
//可以得到这个元素里面的某些标签
1.1.3 通过html5新增的方法获取
语法
getElementsByClassName('类名');
//根据类名获得某些元素
querySelector(‘’);
//返回指定选择器的第一个元素对象，里面的选择器要加符号， .nav，#list
querySelectorAll(‘’);
//返回指定选择器的所有元素对象集合
1.1.4 特殊元素获取
//获取body元素
document.body;
//获取html元素
document.documentElement;
2. 事件基础
2.1 事件三要素
2.1.1 事件源
事件被触发的对象
2.1.2 事件类型
如何触发？鼠标点击？鼠标经过？
2.1.3 事件处理程序
通过一个函数赋值的方式完成
<body>
<button id='btn'>123</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('456');
}
</script>
</body>
2.2 执行事件的步骤
- 获取事件源
- 注册事件（绑定事件）
- 添加事件处理程序（采取函数赋值的形式）
2.3 常见的鼠标事件
3. 操作元素
3.1 改变元素内容
3.1.1 innerText
element.innerText='';
//从起始位置到终止位置的内容，但他取出html标签，同时空格和换行也会去掉
3.1.2 innerHTML
element.innerHMTL='';
//从起始位置到终止位置的内容，包括html标签，同时保留空格和换行
3.2 修改图片 src
<body>
<button id='qwe'>logo</button>
<button id='asd'>7</button><br>
<img src="img/logo.png" alt="">
<script>
var btn1 = document.getElementById('qwe');
var btn2 = document.getElementById('asd');
var img = document.querySelector('img');
btn1.onclick = function() {
img.src = 'img/logo.png';
}
btn2.onclick = function() {
img.src = 'img/qitian.png';
}
</script>
</body>
3.3 表单属性
表单里面的文字内容是通过value来修改的，不能使用innerHTML来修改。
disabled禁用
type等
3.4 样式属性操作
element.style;
//行内样式操作，驼峰命名法
element.className='';
// 类名样式操作，className会直接覆盖原先的类名
3.5 排他思想
如果有同一组元素， 我们想要某一个元素实现某种样式，需要用到循环的排他思想
排他算法基础：
所有元素全部清除样式
给当前元素设置样式
注意顺序不能颠倒
3.6 自定义属性的操作
element.getAttribute('属性')；
//获得属性
element.setAttribute('属性','值')；
//设置属性值
element.removeAttribute('属性')；
//移除属性自定义属性以“data-”开头
h5新增的获取自定义属性的方法，dataset是能获取data-开头的自定义属性
<body>
<div data-index="20" data-time-today="2020"></div>
<script>
var div=document.querySelector('div');
// dataset是一个集合里面存放了所有以data开头的自定义属性
div.dataset.index;
// 如果自定义属性名有多个-连接，则获取时采用驼峰命名法
div.dataset.timeToday;
</script>
</body>
4.节点操作
4.1 父节点
element.parentNode
4.2 子节点
element.childNodes
//集合，得到所有的子节点，包括元素节点，文本节点等，不好用
element.children
//好用
element.firstElementChild
//第一个子元素节点
element.lastElementChild
//最后一个子元素节点
4.3 兄弟节点
node.nextSibling
//上一个节点，不好用
node.previousSibling
//下一个节点，不好用
node.nextElementSibling
//下一个兄弟元素节点，好用，ie9以上
node.previousElementSibling
//上一个兄弟元素节点，好用，ie9以上兼容性问题的解决方法：封装一个兼容性函数
4.4 创建节点
document.createElement（‘tagName’）
<body>
<ul>
<li>123</li>
</ul>
<script>
// 1.创建节点 元素节点
var li = document.createElement('li');
// 2.添加节点 node.appendChild(child) node-父级，child-子级
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3. 添加节点 node.insertBefore(child,指定元素) 添加在指定元素的前面
var li2 = document.createElement('li');
ul.insertBefore(li2, ul.children[0]);
</script>
</body>
appendChild(child)，在后面添加，不影响原来的元素
4.5 删除节点
node.removeChild(child)
//node-父级，child-子级
留言板案例：
<body>
<textarea></textarea>
<button id='fs'>发送</button>
<ul></ul>
<script>
var ul = document.querySelector('ul');
var btn1 = document.getElementById('fs');
var txt = document.querySelector('textarea');
btn1.onclick = function() {
if (txt.value == '') {
alert('内容不能为空');
} else {
var li = document.createElement('li');
li.innerHTML = txt.value + '\t' + getDate() + '\t' + "<a href='javascript:;'>删除</a>";
// ul.appendChild(li);
txt.value = '';
ul.insertBefore(li, ul.children[0]);
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
ul.removeChild(this.parentNode);
}
}
}
}
function getDate() {
var date = new Date;
var s = date.getSeconds();
var m = date.getMinutes();
var h = date.getHours();
if (s < 10) {
s = '0' + s;
} else if (m < 10) {
m = '0' + m;
} else if (h < 10) {
h = '0' + h;
}
return h + ':' + m + ':' + s;
}
</script>
</body>
4.6 复制节点
node.cloneNode();注：
如果括号里面参数为空或者false，则是浅拷贝，只复制节点本身，不复制里面的内容
如果括号里面参数为true，则是深拷贝，复制节点本身以及里面的内容
4.7 动态生成表格
<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>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var dataset = [{
name: '赵钱',
sunject: 'javaScript',
score: 100
}, {
name: '孙李',
sunject: 'javaScript',
score: 96
}, {
name: '周吴',
sunject: 'javaScript',
score: 86
}, {
name: '郑王',
sunject: 'javaScript',
score: 98
}];
var tbody = document.querySelector('tbody');
for (var i = 0; i < dataset.length; i++) {
var tr = document.createElement('tr');
tbody.appendChild(tr);
for (var k in dataset[i]) {
var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = dataset[i][k];
}
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() {
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
</body>
4.8 三种动态创建元素的区别
document.write（）
element.innerHTML
document.createElement（）
区别：
- document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
- innerHTML 是将内容写入某个DOM节点，不会导致页面重绘；创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
- document.createElement（）创建多个元素效率稍低一点点，但是结构更清晰