学习笔记，仅供参考，有错必纠
参考自：pink老师教案
文章目录
- 操作元素
Web API
操作元素
JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等.
改变元素内容
从起始位置到终止位置的内容，但是去除html标签，同时空格和换行也会被去除：
element.innnerText
从起始位置到终止位置的全部内容，保留html标签，保留空格和换行：
element.innerHTML
- 举个例子
HTML代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebApi</title>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button>显示当前系统时间</button>
<div>时间</div>
<script>
// 当我们点击了按钮， div里面的文字会发生变化
// 1. 获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2.注册事件
btn.onclick = function() {
div.innerHTML = getDate();
}
function getDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
}
</script>
</body>
</html>
页面：
点击按钮显示当前系统时间：
- innerText和innerHTML的区别
获取内容时的区别：innerText会去除空格和换行，而innerHTML会保留空格和换行
设置内容时的区别：innerText不会识别html，而innerHTML会识别
常用元素的属性操作
- 获取属性的值
元素对象.属性名
- 设置属性的值
元素对象.属性名 = 值
表单元素的属性操作
利用DOM可以操作如下表单元素的属性：
type, value, checked, selelcted, disabled
- 获取属性的值
元素对象.属性名
- 设置属性的值
元素对象.属性名 = 值
- 举个例子
HTML代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebApi</title>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button id="yytj">应用统计</button>
<button id="sljj">数量经济</button>
<br>
<input type="text" value="应用统计0班">
<script>
// 修改元素属性 src
// 1. 获取元素
var yytj = document.getElementById('yytj');
var sljj = document.getElementById('sljj');
var myinput = document.querySelector('input');
// 2. 注册事件 处理程序
yytj.onclick = function() {
myinput.value = "应用统计0班";
}
sljj.onclick = function() {
myinput.value = "数量经济1班";
}
</script>
</body>
</html>
页面：
点击按钮数量经济：
样式属性操作
我们可以通过JavaScript修改元素的大小、颜色、位置等样式。
常用方式：
element.style
//行内样式操作
element.className
//类名样式操作
- 行内样式操作style属性
我们可以通过元素对象.style.样式属性 = 值;设置元素的style属性。
举个例子：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebApi</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button>点我</button>
<div></div>
<script>
// 1. 获取元素
var div = document.querySelector('div');
var btn = document.querySelector('button')
// 2. 注册事件 处理程序
btn.onclick = function() {
// div.style里面的属性 采取驼峰命名法
div.style.backgroundColor = 'red';
div.style.width = '200px';
}
</script>
</body>
</html>
页面：
点击按钮点我：
- 类名样式操作className属性
我们可以通过元素对象.className = 值;设置元素的style属性。
举个例子：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebApi</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.changeB {
background-color: red;
width: 200px;
}
</style>
</head>
<body>
<button>点我</button>
<div></div>
<script>
// 1. 获取元素
var div = document.querySelector('div');
var btn = document.querySelector('button')
// 2. 注册事件 处理程序
btn.onclick = function() {
// div.style里面的属性 采取驼峰命名法
div.className = "changeB";
}
</script>
</body>
</html>
效果和上面的例子相同。
