操作元素:
JavaScript的DOM操作可以改变网页内容,样式和结构,我们可以利用DOM 操作元素来改变元素里面的内容属性等。
- 改变元素的内容
element.innerText
从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉。
element.innterHTML
起始位置到终止位置的全部内容,包括HTML标签,同时保留空格和换行
案例:innerText
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.show {
background-color: aqua;
width: 300px;
height: 25px;
margin-top: 20px;
}
p {
background-color: aqua;
width: 300px;
height: 25px;
margin-top: 20px;
}
</style>
<body>
<button>显示当前系统时间</button>
<div class="show">某个时间</div>
<p>1111</p>
<script>
// 当点击了按钮,div里面的文字会发生变化
// 1.获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2.注册事件
btn.onclick = function() {
// 随意设置一个时间
// div.innerText = '2020-7-24';
div.innerText = 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];
}
// 我们元素可以不用添加事件
var p = document.querySelector('p');
p.innerText = getDate();
</script>
</body>
</html>
innerText和innerHTML之间的区别
innerText:不识别html标签; 去除空格和换行 非标准
innerHTML:可识别html标签; 保留空格和换行 使用的最多
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=], initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- innerText和innerHTML之间的区别 -->
<div></div>
<p>
文字
<span>111</span>
</p>
<script>
// 1.innerText:不识别html标签;去除空格和换行 非标准
var div = document.querySelector('div');
div.innerText = '<strong>今天是:</strong> 2020';
// 2.innerHTML:可识别html标签;保留空格和换行
div.innerHTML = '<strong>今天是:</strong> 2020';
// 这两个属性是可以读写的; 可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
</body>
</html>
常用元素的属性操作
案例:
<!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>
img {
display: block;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<button id="ldh">111</button>
<button id="zxy">222</button>
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2069387434,380735787&fm=26&gp=0.jpg" alt="" title="111">
<script>
// 修改元素属性
// 1.获取元素
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
//2.注册事件
zxy.onclick = function() {
img.src = 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2747364614,2411895227&fm=26&gp=0.jpg';
img.title = '222';
}
ldh.onclick = function() {
img.src = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2069387434,380735787&fm=26&gp=0.jpg';
img.title = '111';
}
</script>
</body>
</html>
表单元素的属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>按钮</button>
<input type="text" value="输入内容">
<script>
// 1.获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2.注册事件
btn.onclick = function() {
// 表单里面的值是通过value来修改的
input.value = '被点击了';
// 使某个表单被禁用disabled 按钮被禁用
// btn.disabled = true;
this.disabled = true;
// this指向的是事件函数的调用者。 btn
}
</script>
</body>
</html>
样式属性操作:element.style 样式较少,功能较为简单的情况下使用
我们可以通过JS修改元素的大小、颜色、位置等样式
element.style
:行内样式操作element.className
:类名样式操作
案例:
<!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>
.before {
height: 100px;
width: 100px;
background-color: pink;
}
.change {
background-color: purple;
color: aliceblue;
margin-top: 100px;
font-size: 25px;
}
</style>
</head>
<body>
<div class="before">文本</div>
<script>
// 1.使用element.style获得修改元素样式
var test = document.querySelector('div');
test.onclick = function() {
// this.style.backgroundColor = 'purple';
// this.style.color = '#fff';
// this.style.marginTop = '100px';
// 测试element.style:测试的时候可以将上面三行解开注释;下面一行加上注释。反之则是测试element.className
// 2.使用className修改元素样式
this.className = 'change';
// 3.如果想要保留原来的类名;我们可以这么做: 多类名选择器
this.className = 'first change';
}
</script>
</body>
</html>
总结:element.styel适用于样式简单的情况下;className适用于复杂的情况下,可以直接覆盖原先的类名;也可以保留原来的类名与新类名一同起作用。