文章目录
DOM
4 操作元素
案例:分时显示不同图片,显示不同问候语
根据不同时间,页面显示不同图片,同时显示不同的问候语。
如果上午时间打开页面,显示上午好,显示上午的图片。
如果下午时间打开页面,显示下午好,显示下午的图片。
如果晚上时间打开页面,显示晚上好,显示晚上的图片。
案例分析
- 根据系统不同时间来判断,所以需要用到日期内置对象
- 利用多分支语句来设置不同的图片
- 需要一个图片,并且根据时间修改图片,就需要用到操作元素src属性
- 需要一个div元素,显示不同问候语,修改元素内容即可
<!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>
img {
width: 300px;
}
</style>
</head>
<body>
<img src=" images/zsh.png" alt="">
<div>.上午好</div>
<script>
// 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/zsh.png';
div. innerHTML = '亲,上午好, 好好写代码';
}else if(h<18){
img.src = ' images/xwh.png';
div. innerHTML = '亲, 下午好, 好好写代码';
} else {
img.src = 'images/wsh.png';
div. innerHTML = '亲,晚上好, 好好写代码';
}
</script>
</body>
</html>
4.3 表单元素的属性操作
利用DOM可以操作如下表单元素的属性:
type、value、checked. selected. disabled
eg 点击按钮,显示被点击了
<!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>
img {
width: 300px;
}
</style>
</head>
<body>
<button>按钮</button>
<input type="text" value= "输入内容">
<script>
// 1.获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2.注册事件处理程序
btn.onclick = function() {
// input . innerHTML = '点击了'; 这个是普通盒子 比如 div 标签里面的内容
//表单里面的值文字内容是通过value 来修改的
input.value = '被点击了';
//如果想要某个表单被禁用 不能再点 disabled 我们想要这个按钮 button禁用
btn.disablep = true;
// this指向的是事件函数的调用者btn
}
</script>
</body>
</html>
4.4 样式属性操作
我们可以通过JS修改元素的大小、颜色、位置等样式。
- element. style 行内样式操作
- 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>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
// 1.获取元素
var div = document.querySelector('div');
// 2.注册事件 处理程序
div.onclick = function() {
// div. style 里面的属性采取驼峰命名法
this.style.backgroundColor = 'purple';
this.style.width = '250px';
}
</script>
</body>
</html>
注意:
- JS里面的样式采取驼峰命名法比如 fontsize、 backgroundColor
- JS修改style样式操作,产生的是行内样式, css权重比较高
- 如果样式修改较多,可以采取操作类名方式更改元素样式。
- class因为是个保留字,因此使用className来操作元素类名属性
- className会直接更改元素的类名,会覆盖原先的类名。
总结
操作元素是DOM核心内容
4.6 自定义属性的操作
1.获取属性值
-
element.属性 获取属性值。
-
element . getAttribute(‘属性’);
区别:
- element .属性获取内置属性值 (元素本身自带的属性)
- element . getAttribute( \属性’ );主要获得自定义的属性 ( 标准)我们程序员自定义的属性
2.设置属性值
- element.属性= ‘值’ 设置内置属性值。
- element . setAttribute(‘属性’,‘值’);
区别:
- element.属性设置内置属性值
- element .setattribute(‘属性’);主要设置自定义的属性 (标准)
3.移除属性
- element . removeAttribute (‘属性’) ;
eg
<!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 id="demo" index="1" class="nav"></div>
<script>
var div = document.querySelector('div');
//1.获取元素的属性值
// (1) element.属性
console . log(div.id);
//(2) element . getAttribute( '属性') get得 到获取attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
console.log(div. getAttribute('id'));
console. log(div. getAttribute( 'index'));
// 2.设置元素属性值
// (1) element.属性= '值'
div.id = 'test' ;
// (2) element . setAttribute('属性','值'); 主要针对于自定义属性
div.setAttribute( 'index', 2);
div. setAttribute('class', 'footer'); // class 特殊这 里面写的就是 class 不是className
// 3移除属性removeAttribute(属性)
div.removeAttribute( 'index' );
</script>
</body>
</html>
4.7 H5 自定义属性
自定义属性目的 : 是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’)获取。
但是有些自定义属性很容易引起歧义 , 不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性:
1.设置H5自定义属性
H5规定自定义属性data开头做为属性名并且赋值。
比如<div data-index= "1” > < /div>
或者使用 JS 设置
element.setAttribute( ‘data- index’ , 2)
2.获取H5自定义属性
- 兼容性获取element.getAttribute( ‘data- index’ );
- H5新增element.dataset**.index 或者**element.dataset[ ‘index’] ie 11才开始支持
eg
<!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 getTime="20" data-index= "2" data-list-name="andy"></div>
<script>
var div = document.querySelector('div');
// console.log(div.getTime );
console.log(div.getAttribute('getTime'));
div.setAttribute('data-time',20);
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));
// h5新增的获取自定义属性的方法 它只能后去data-开头的
//dataset是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
// 如果自定义属性里面有多个-链接的单词,我们获取的时候采取驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
</script>
</body>
</html>