操作元素
JavaScript的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。
改变元素内容有两种方式:
语法1:
element.innerText
语法2:
element.innerHTML
例子:
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>123</p>
<script>
//当我们点击了按钮,div里面的文字会发生变化
//1.获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
//2.注册事件
btn.onclick = function () {
// div.innerText = '2020-10-8';
div.innerText = getDate();
}
function getDate() {
var date = new Date();
// console.log(date.getFullYear()); //返回当前日期的年 20
// console.log(date.getMonth() + 1); //月份 返回的月份小1个月 记得月份+1
// console.log(date.getDate()); //返回的是几号
// console.log(date.getDay()); //3 周一返回的是1 周六返回的是 6 但是周日返回的是0
//我们写一个2020年10月8日 星期四
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
var day = date.getDay();
// console.log('今天是:' + year +'年' +month + '月' +dates +'日'+arr[day]);
return '今天是:' + year + '年' + month + '月' + dates + '日' + arr[day];
}
//我们元素可以不用添加事件
var p = document.querySelector('p');
p.innerText = getDate();
</script>
interText 和 innerHTML的区别
-
这两个属性是可读写的 ,可以获取元素里面的内容
-
innerText 从起始位置到终止位置的内容,但它去除 html 标签,同时空格和换行也会去掉。
-
innerHTML 起始位置到终止位置的全部内容,它识别 html 标签,同时保留空格和换行。
<body>
<div></div>
<p>
温润如玉贺知书
<span>艾子瑜</span>
</p>
<script>
//innerText 和 innerHTML 的区别
//1.innerText 不识别html标签 非标准 去除空格和换行
var div = document.querySelector('div');
// div.innerText = '<strong>今天是 :2020-10-8 <srtong>';
//2.innerHTML 识别 html 标签 W3C标准 保留空格和换行的
div.innerHTML = '<strong>今天是 :2020-10-8 <srtong>';
//这两个属性是可读写的 可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
</body>
常用的元素的属性操作
- innerText、innerHTML 改变元素内容
- src、href
- id、alt、title
例子:
<head>
<style>
img {
width: 300px;
height: 260px;
}
</style>
</head>
<body>
<button id="ng">奶盖</button>
<button id="xg">西瓜</button></br>
<img src="images/naigai.jpg" alt="" title="奶盖">
<script>
//修改元素属性 src
//1.获取元素
var ng = document.getElementById('ng');
var xg = document.getElementById('xg');
var img = document.querySelector('img');
//2.注册事件 处理程序
xg.onclick = function () {
img.src = 'images/xigua.jpg';
img.title = '西瓜不加冰';
}
ng.onclick = function () {
img.src = 'images/naigai.jpg';
img.title = '奶盖不加糖';
}
</script>
</body>
视图:
案例:仿电脑系统时间问好
- 分时显示不同图片,显示不同的问候。
- 根据事不同的时间,页面显示不同图片,同时显示不同的问候语。
- 如果上午时间打开页面,显示上午好,显示上午的图片。
- 如果下午的时间打开页面显示下午好,显示下午的图片。
- 如果晚上时间打开页面,显示晚上好,显示晚上的图片。
案例分析:
- 根据系统不同时间来判断,所以需要用到日期内置对象。
- 利用多分支语句来设置不同的图片。
- 需要一个图片,并且根据时间来修改图片,就需要用到操作元素 src 属性
- 需要一个 div 元素,显示不同问候语,修改元素内容即可。
例子:
<body>
<img src="images/zao.gif" alt="">
<div>上午好</div>
<script>
/* 案例分析:
根据系统不同时间来判断,所以需要用到日期内置对象。
利用多分支语句来设置不同的图片。
需要一个图片,并且根据时间来修改图片,就需要用到操作元素 src 属性
需要一个 div 元素,显示不同问候语,修改元素内容即可。 */
//1.获取元素
var img = document.querySelector('img');
var div = document.querySelector('div');
//2.得到当前的小时数
var date = new Date();
var h = date.getHours();
//3.判断小时改变图片和文字信息
if (h < 12) {
img.src = 'images/zao.gif';
div.innerHTML = '亲,上午好,好好写代码';
} else if (h < 18) {
img.src = 'images/wu.gif';
div.innerHTML = '亲,下午好,好好写代码';
} else {
img.src = 'images/wan.gif';
div.innerHTML = '亲,晚上好,好好写代码';
}
</script>
</body>
视图:
表单元素的属性操作
利用DOM可以操作如下表单的属性:
tple、value、 checked 、selected、 disabled
例子:
<body>
<button>按钮</button>
<input type="text" value="输入内容">
<script>
/*
表单与元素的属性操作
利用DOM可以操作如下表单元素的属性:
type,value,checked,selected,disable
*/
//1.获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
//2.注册事件 处理程序
btn.onclick = function() {
//input.innerHTML = '点击了';这个是普通盒子,比如div标签里面的内容
//表单 里面的值,文字内容是通过value来修改的
input.value = '被点击了';
//如果想要某个表单被禁用,不能再点击disbled 我们想要这个按钮button禁用
// btn.disabled = true;
this.disabled = true;
//this 指向的是事件函数的调用者 btn
}
</script>
</body>
案例:仿京东显示隐藏密码
- 点击按钮将密码框切换为文本框,并可以查看密码明文。
- 核心思路:
- 点击眼睛按钮,把密码框类型改为文本框就可以看到里面的密码。
- 一个按钮两个状态,点击一次,切换为文本,继续点击一次切换为密码框。
- 算法:利用一个flag变量,来判断flag的值,如果是1就切换为文本框,flag设置为0,如果是0就切换为密码框,flag设置为1。
例子:
<head>
<style>
.box {
position: relative;
width: 400px;
border-bottom: 1px solid #cccccc;
margin: 100px auto;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img {
position: absolute;
top: 10px;
right: 2px;
width: 24px;
}
</style>
</head>
<body>
<div class="box">
<label for="">
<img src="images/close.png" alt="" id="eye">
</label>
<input type="password" name="" id="pwd">
</div>
<script>
//1.获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
//2.注册事件 处理程序
var flag = 0;
eye.onclick = function() {
//点击一次之后,flag一定要变化
if (flag == 0) {
pwd.type = 'text';
eye.src = 'images/open.png';
flag = 1;//赋值操作
} else {
pwd.type = 'password';
eye.src = 'images/close.png';
flag = 0;
}
}
</script>
</body>
视图:
样式属性操作
- 我们可以通过JS修改元素大小、颜色、位置等样式。
1. element.style 行内样式操作
2. element.className 类名样式操作
-
注意:
- JS里面的样式采取 驼峰命名法,比如fontSize、bacgroundColor
- JS修改style样式操作,产生的是行内样式,css权重比较高
例子:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
/*
样式属性操作
我们可以通过JS修改元素大小、颜色、位置等样式。
1.element.style 行内样式操作
2.element.className 类名样式操作
注意:
1.JS里面的样式采取驼峰命名法,比如fontSize、bacgroundColor
2.JS修改style样式操作,产生的是行内样式,css权重比较高
*/
//1.获取元素
var div = document.querySelector('div');
//2.注册事件 处理程序
div.onclick = function() {
//div.style里面的属性 采取驼峰命名法
this.style.backgroundColor = 'purple';
this.style.width = '250px';
}
</script>
</body>
视图: