一、JS对元素内部结构的操作
1.innerHTML
element.innerHTML：获取元素内部的HTML结构
element.innerHTML=“<p>hello</p>”：设置元素内容
2.innerText
element.innerText：获取元素内部的文本（只获取文本内容）
element.innerText=“hello”：设置元素内部文本
二、JS中对元素属性的操作
1.getAttribute
element.getAttribute(‘class’)：获取元素的某个属性值（包括自定义属性）
2.setAttribute
element.setAttribute(‘class’,’box’)：给元素的设置属性（包括自定义属性）
3.removeAttribute
element.removeAttribute(‘class’,)：移除元素属性（包括自定义属性）
三、JS中对元素样式的操作
1.style
专门用来给元素添加CSS样式的，添加的都是行内样式，element.style.样式=‘值’。
四、类属性操作
1.className
专门用来添加元素的类名：element. className=‘值’
专门用来获取元素类名称：element.className
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
width: 200px;
height: 200px;
background-color: pink;
}
.two {
width: 300px;
height: 300px;
background-color: #ccc;
}
.three {
width: 600px;
height: 600px;
background-color: purple;
}
</style>
</head>
<body>
<div class="one">123</div>
<button class="change">点我切换</button>
<button class="change2">点我切换</button>
<script>
// innerHTML 可以添加 文字内容以及标签内容 ，不仅能对文字进行修饰，还能添加标签内容
// innerText 可以添加、修改标签内的文字内容，只能对文字进行修饰，无法对标签进行修改
var a = document.querySelector('div');
console.log(a);
// a.innerText = '<p>我是修改过后的文字,通过innerText</p>';
// a.innerHTML = '<p>我是二次修改过后的文字,通过innerHTML</p>';
// getAttribute 获取元素的某个属性值,语法:ele.getAttribute('属性名称');
var b = a.getAttribute('class');
console.log(b);
// setAttribute 给元素设置属性、属性值, 语法: ele.setAttribute('属性名称','属性值')
// a.setAttribute('class', 'two')
// removeAttribute 移除元素属性
// a.removeAttribute('class');
// style 设置元素的样式 , 语法： ele.style.样式属性名 = '属性值';
// a.style.backgroundColor = 'red';
var change = document.querySelector('.change');
var change2 = document.querySelector('.change2');
// 添加监听事件
change.addEventListener('click', function () {
a.setAttribute('class', 'two');
a.style.backgroundColor = 'red';
a.style.width = '400px';
})
change2.addEventListener('click', function () {
a.setAttribute('class', 'one');
a.style.backgroundColor = '';
})
// a.style.backgroundColor = 'red';
// className 设置元素的类名
// a.className = 'three';
</script>
</body>
</html>五、JS事件
1.JS事件的概念
事件是发生在 HTML 元素上的一些事情。
2.事件的三要素
事件源：网页上的元素。如：按钮，输入框等
事件类型：为用户或浏览器的行为。如：鼠标点击，选中
事件处理程序：事件发生后定义的程序。如：跳转网页、算数运算等
3.元素绑定事件
在DOM元素中直接绑定：
违反了HTML与JavaScript代码相分离的原则，一般不用
<button onclick=“alert(2)">按钮</button>在JavaScript代码中绑定：
同一元素同一个事件只能定义一个监听函数
<script>
var btn = document.getElementById('btn')
btn.onclick=function(){
alert("我被点击了~~~")
}
</script>使用监听函数addEventListener() 绑定：
可以针对同一个元素的同一个事件，添加多个监听处理函数
<script>
document.getElementById('btn').addEventListener('click',function(){
alert(5);
});
</script>4.元素解绑事件
直接删除法，使用“对象.οnclick=false;”
使用addEventListener绑定事件，使用removeEventListener删除绑定事件即可
5.常用的事件
onclick：鼠标单击时触发此事件
ondblclick：鼠标双击时触发此事件
onmouseover：鼠标移动到某个设置了此事件的元素上时触发此事件
onmouseout：鼠标从某个设置了此事件的元素上离开时触发此事件
onfocus：当某个元素获得焦点时触发此事件
onblur：当前元素失去焦点时触发此事件
onkeydown：当键盘上的某个按键被按下时触发此事件
onkeyup：当键盘上的某个按键被按下后弹起时触发此事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>123</div>
<button>点击</button>
<button class="btn2">点击</button>
<button onclick="alert('111')">点击</button>
<script>
// 事件三要素
/**
* 事件源
* 网页元素
*
* 事件类型
* 用户与浏览器交互的行为，鼠标点击、输入框选中等
*
* 事件处理程序
* 事件发生后的处理程序(函数/方法)
*
*/
// 绑定事件
// 有三种方法
// ①onclick
// 同一个元素同一个事件只能定义一个监听函数
// 语法： ele.事件类型 = 事件处理程序(函数) function(){}
// 解绑方法： ele.事件类型 = false;
var a = 5;
var btn = document.querySelector('button');
btn.onclick = function () {
alert('我们单击了按钮一');
if (a <= 0) {
btn.onclick = false;
}
a--;
console.log(a);
}
// ②addEventListener
// 可针对同一个元素，添加多个监听处理函数
// ele.addEventListener('事件类型',事件处理函数 function(){})
// 解绑方法：ele.removeEventListener('事件类型',事件处理函数名)
var btn2 = document.querySelector('.btn2');
btn2.addEventListener('click', function a() {
alert('点击第二个按钮');
btn2.removeEventListener('click', a);
});
// ③行内标签绑定
// 不推荐
// 解绑方式：互联网搜索看看
</script>
</body>
</html>
