操作元素的步骤:
- 事件源:触发事件的元素(获取事件源)
- 事件类型: 例如 click 点击事件(绑定事件)
- 事件处理程序:事件触发后要执行的代码(函数形式),事件处理函数
一.改变元素内容(innerText 和 innerHTM)
innerText 和 innerHTML的区别
innerText 不识别html标准 非标准 去除空格和换行
<div></div>
<p>
我是文字
<span>123</span>
</p>
var div = document.querySelector("div");
div.innerText = " <strong>今年是:</strong>2022";
div.innerHTML = " <strong>今年是:</strong>2022";
二.修改元素属性
1.通过Element.style.属性 改变元素宽度,高度,颜色,背景色等等
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>123</div>
<button>点击改变div属性</button>
// 获取事件源
var div=document.querySelector("div");
var btn=document.querySelector("button");
// 事件类型
btn.onclick=function(){
// 事件处理程序
div.style.backgroundColor="red";
div.style.color="blue";
div.style.width="300px";
}
2.通过添加className类名来改变元素属性
上述方法一个,两个修改元素属性还可以,但是多个修改就有些繁琐,所以我们可以通过改变或添加元素className类名来改变元素样式
// 获取事件源
var div = document.querySelector("div");
var btn = document.querySelector("button");
// 事件类型
btn.onclick = function () {
// 事件处理程序
//2. 我们可以通过修改元素的className 更改样式 适用于样式较多或者功能复杂
//3.如果想要保留原先的类名 我们可以这么做 多类名选择器
// this.className="change";
div.className = "frist change";
}