4、操作元素
4.1、改变元素内容
element.innerText = 值
从起始位置到终止为止的内容，但它去除 html 标签，同时空格和换行符也会去掉
//当我们点击了按钮，div里面的文字会发生变化
//1、获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
//2、注册事件
btn.onclick = function () {
div.innerText = getDate();
}
function getDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var day = date.getDay();
var arrays = ['日', '一', '二', '三', '四', '五', '六'];
return '今天是: ' + year + '年' + month + '月' + dates + '日' + ' ' + '星期' + arrays[day];
}
//我们元素可以不添加事件，页面打开即触发
div.innerText = '2020-8-11';
- 我们元素可以不添加事件，页面打开即触发
div.innerText = ‘2020-8-11’;
element.innerHTML
起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行符（M3C标准）推荐
- 这两个是可以读写的 可以获取元素里面的内容
//这两个是可以读写的 可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText); //空格和换行符也会去掉
console.log(p.innerHTML); //保留空格和换行符
4.2、常用元素的属性操作
1、innerText、innerHTML 改变元素内容
2、src、href
3、id、alt、title
4.2.1案例： 刘德华、张学友图片切换
<style>
img{
width: 300px;
}
</style>
<body>
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button><br>
<img src="../JSimages/ldh.jpg" alt="" title="刘德华">
<script>
//修改元素属性 src
//1、获取元素
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
//2、注册事件 处理程序
zxy.onclick = function(){
img.src = '../JSimages/zxy.jpg';
img.title = '张学友';
}
ldh.onclick = function(){
img.src = '../JSimages/ldh.jpg';
img.title = '刘德华';
}
</script>
</body>
4.2.2案例：分时间显示不同图片，显示不同问候语
<img src="../JSimages/s.gif" 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 = '../JSimages/s.gif';
div.innerHTML = '上午好'
} else if(h < 18){
img.src = '../JSimages/z.gif';
div.innerHTML = '中午好'
}else{
img.src = '../JSimages/w.gif';
div.innerHTML = '晚上好'
}
4.3、表单元素的属性操作
操作表单属性：
type、value、checked、selected、disabled
4.3.1、案例：仿京东显示密码
4.4、样式属性操作
我们可以通过 JS 修改元素的大小、颜色、位置等样式。
1、element.style 行内样式操作
2、element.className 类名样式操作
element.style注意：
1、JS 里面的样式采取驼峰命名法 比如 fontSize、backgroundColor
2、JS 修改 style 样式操作，产生的是行内样式，css 权重比较高
element.className注意：
1、如果样式修改较多，可以采取操作类名方式更改类名属性
2、class 因为是个关键字，因此使用className 来操作元素类名属性
3、className 会直接更改元素的类名，会覆盖原先类名
<div>文本</div>
<script>
//1、使用 element.style 获得修改元素样式 适用于 样式比较少 功能简单的情况
var test = document.querySelector('div');
test.onclick = function(){
// this.style.backgroundColor = 'purple';
// this.style.color = '#fff';
// this.style.fontSize = '25px';
// this.style.marginTop = '100px';
//2、我们可以通过 修改元素的 className 更改元素的样式，适合于样式较多或者功能复杂的情况
//让我们当前元素的类名 改为 change
this.className = 'change';
}
</script>
4.4.1、仿淘宝关闭二维码案例
4.4.2、循环精灵图背景
4.4.3、显示隐藏文本框内容
4.4.3、密码框格式提示错误信息
4.5排他思想
如果有同一组元素，我们想要某一个实现某种形式，需要用到循环的排他思想算法：
1、所有元素全部清除样式（干掉其他人）
2、给当前元素设置样式（留下我自己）
3、注意顺序不能颠倒，首先干掉其他人，再设置自己
4.5.1、案例：百度换肤
4.5.2、案例：表格隔行变色
4.5.3、案例：表单全选取消全选
4.6、自定义属性的操作
1、获取属性值
- element . 属性 获取属性值
- element . getAttribute(‘属性’);
区别：
- element . 属性 获取内置属性值（元素本身自带的属性）
- element.getAttribute(‘属性’); 主要获得自定义的属性（标准），我们程序员自定义的属性
2、设置属性值
- element . 属性 = ‘值’
- element . setAttribute(‘属性’,‘值’);
区别：
- element . 属性 设置内置属性值
- element . setAttribute(‘属性’,‘值’); 主要设置自定义的属性（标准）
3、移除属性
- element . removeAttribute(‘属性’);
<div id="demo" index='1'></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';
div.className = 'navs';
// (2) element.setAttribute('属性', '值'); 主要针对于自定义属性
div.setAttribute('index', 2);
div.setAttribute('class', 'footer'); // class 特殊 这里面写的就是class 不是className
// 3 移除属性 removeAttribute(属性)
div.removeAttribute('index');
</script>
4.6.1、案例：tab栏切换（重点案例）
4.7、H5自定义属性
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通国getAttribute(‘属性’)；获取。
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性：
1、设置H5自定义属性
H5 规定自定义属性 date- 开头作为属性值并且赋值
比如：
或者使用JS 设置
element.setAttribute(‘date-index’,‘2’);
2、获取H5自定义属性
1、兼容性获取 element.getAttribute(‘date-index’)；
2、H5 新增 element.dateset.index 或者 element.dateset[‘index’] IE11 才开始支持（dateset 是一个集合，里面存放了所有以 date-开头的自定义属性）
- 如果自定义属性里面有多个 - 连接的单词，比如： date-list-name ，获取的时候采取驼峰命名法，element.dateset.listName（采用驼峰命名法）
// 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']);
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
