DOM
目录
1.事件基础
触发响应机制(例:点击之后才有操作)
<body>
<button id="btn">梁山伯</button>
<script>
//点击一个按钮,弹出对话框
//1 事件是由三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
//(1)事件源 事件被触发的对象 谁 按钮
var btn = document.getElementById('btn');
//(2)事件类型 如何触发 什么事件 比如鼠标点击(onclick)还是鼠标经过 还是键盘按下
//(3)事件处理程序 通过一个函数赋值的方式完成
btn.onclick = function () {
alert('祝音台');
}
</script>
</body>
1.1执行事件的步骤
1 获取事件源
2 注册事件(绑定事件)
3 添加事件处理程序(采用函数赋值的形式)
<body>
<div>123</div>
<script>
//执行事件步骤
//点击div 控制台输出 我被选中了
//1 获取事件源
var div = document.querySelector('div');
//2 绑定事件 注册事件
//div.onclick
//3 添加事件处理程序
div.onclick = function () {
console.log('我被选中了');
}
</script>
</body>
2.操作元素
js中DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。
2.1改变元素的内容
2.1.1element.innerText
从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉
</head>
<style>
div,
p {
width: 300px;
height: 30px;
line-height: 30px;
color: aqua;
background-color: bisque;
}
</style>
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>woyaolaheilesi</p>
<script>
//当我们点击了按钮 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 arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
return '今天是:' + year + '年' + month + '月' + dates + '日' + ' ' + arr[day];
}
//我们元素可以不用添加事件
var p = document.querySelector('p');
p.innerText = getDate();
</script>
</body>
2.1.2element.innerHTML
起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行
<body>
<div></div>
<p>
woshiwenxue
<span>123456</span>
</p>
<script>
//innerText和innerHTML的区别
//1 innerText 不识别html标签 非标准 去除空格和换行
var div = document.querySelector('div');
div.innerText = '<strong>今天是:</strong>2019';
//2 innerHTML 识别html标签 W3C标准 保留空格和换行的
div.innerHTML = '<strong>今天是:</strong>2019';
//这两个属性是可读写的 可以读取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
</body>
2.2常用元素属性操作
<body>
<button id="xmm">喜喵喵</button>
<button id="xyy">喜羊羊</button>
<br>
<img src="images/xmm .jpg" title="xmm">
<script>
//修改元素属性 src
//1 获取元素
var xyy = document.getElementById('xyy');
var xmm = document.getElementById('xmm');
var img = document.querySelector('img');
//2 注册事件
xyy.onclick = function () {
img.src = "images/xyy.jpg";
img.title = 'xyy';
}
xmm.onclick = function () {
img.src = 'images/xmm .jpg';
img.title = 'xmm';
}
</script>
</body>
</head>
<body>
<img src="images/zaoshang.png" alt="good morning">
<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/zaoshang.png';
div.innerHTML = '上午好,';
} else if (h < 15) {
img.src = 'images/zhongwu.png';
div.innerHTML = '中午好';
} else {
img.src = 'images/wanshang.jpg';
div.innerHTML = '晚上好';
}
</script>
</body>
2.3表单元素的属性操作
<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.disabled = true;
this.disabled = true;
//this 指向的是事件函数的调用者 btn
}
</script>
</body>
<style>
.box {
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img {
position: absolute;
top: 5px;
left: 375px;
right: 30px;
width: 24px;
}
</style>
</head>
<body>
<div class="box">
<label for=""> <img src="images/close.jpeg" id="eye"></label>
<input type="password" name="" id="pw">
</div>
<script>
//核心思路:点击眼睛按钮,把密码框类型改为文本框就可以看见里面的密码
//一个按钮两个状态,点击一次,切换为文本框,继续点击一次切换为密码框
//算法:利用一个flag变量的值,如果是1就切换文本框,flag设置为0,如果是0就切换为密码框,flag设置为1
//1 获取元素
var eye = document.getElementById('eye');
var pw = document.getElementById('pw');
//2 注册事件 处理程序
var flag = 0;
eye.onclick = function () {
if (flag == 0) {
pw.type = 'text';
eye.src = 'images/xmm .jpg';
flag = 1;
}
else {
pw.type = 'password';
eye.src = 'images/close.jpeg';
flag = 0;
}
}
</script>
</body>
2.4样式属性操作
我们可以通过js修改元素的大小、颜色、位置等样式
2.4.1element.style
行内样式操作
<style>
div {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
<script>
//1 获取元素
var div = document.querySelector('div');
//2 注册事件 处理数据
div.onclick = function () {
//采用驼峰命名法
//js修改style ,产生的是行内元素,css权重比较高
this.style.backgroundColor = 'pink';
this.style.width = '250px';
}
</script>
</body>
<style>
input {
color: #999;
}
</style>
<body>
<input type="text" value="手机">
<script>
//首先 表单获得需要2个新事件,获得焦点onfocus 失去焦点onblur
//如果获得焦点,判断表单里面内容是否为默认文字,如果是默认文字,就清空表单内容
//如果失去焦点,判断表单内容是否为空,如果为空,则表单内容改为默认文字
var text = document.querySelector('input');
text.onfocus = function () {
if (this.value === '手机') {
this.value = '';
}
//获得焦点需要把文本框里面的文字颜色变黑
this.style.color = '#333';
console.log('得到了焦点');
}
text.onblur = function () {
if (this.value === '') {
this.value = '手机';
}
//失去焦点焦点需要把文本框里面的文字颜色变浅色
console.log('失去了焦点');
this.style.color = '#999';
}
</script>
</body>
2.4.2element.className
类名样式操作
class是个保留字,因此使用className来操作元素名属性
className会直接更改元素的类名,会覆盖原先的类名。
<style>
div {
width: 200px;
height: 200px;
background-color: aqua;
}
.change {
background-color: aquamarine;
color: cadetblue;
font-size: 25px;
margin-top: 100px;
}
</style>
</head>
<body>
<div>文本</div>
<script>
//1 使用element.style获得修改元素样式 样式少 功能简单时使用
var text = document.querySelector('div');
text.onclick = function () {
// this.style.backgroundColor = 'purple';
//2 通过className更改元素的样式 适合于样式较多或者功能复杂的情况
this.className = 'change';
//3 如果想要保留原先的类名,我们可以这么做 多类名选择器
//this.className='change';
this.className = 'first change';
}
</script>
</body>
<style>
div {
width: 600px;
height: 100px auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
background: url(images/√.jpg) no-repeat left center;
padding-left: 20px;
}
.wrong {
color: aqua;
background: url(images/×.jpg);
}
</style>
</head>
<body>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6-16位密码</p>
</div>
<script>
//首先判断的事件时表单失去焦点onblur
//输入正确提示信息 颜色为绿色小图标变化
//如果输入的不是6到16位,则提示错误信息颜色为红色 小图标变化
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
ipt.onblur = function () {
//根据表单里面的长度 ipt.value.length
if (this.value.length < 6 || this.value.length > 16) {
console.log('cuowu');
message.className = 'wrong';
}
}
</script>
</body>
2.5排他思想
1 所有的元素全部清除样式(干掉其他人)
2 给当前元素设置样式(留下我自己)
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
// 1 获取所有按钮元素
var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
//(1)我们先把所有的按钮背景颜色
//(2)然后才让当前的元素背景颜色为pink
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
console.log(11);
this.style.backgroundColor = 'pink';
}
}
</script>
</body>
<style>
body {
background: url(images/xhh1.jpg) no-repeat center top;
}
li {
list-style: none;
}
.baidu {
overflow: hidden;
margin: 100px auto;
background-color: #fff;
width: 410px;
padding-top: 3px;
}
.baidu li {
float: left;
margin: 0 1px;
cursor: pointer;
}
.baidu img {
width: 100px;
text-decoration: none;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="images/xhh1.jpg"></li>
<li><img src="images/xll1.png"></li>
<li><img src="images/xmm1.jpg"></li>
<li><img src="images/xyy1jpg.jpg"></li>
</ul>
<script>
//练习一组元素注册事件
//给4个小图片利用循环注册点击事件
//点击这个图片 让我们页面背景改为当前的图片
//核心算法 把当前图片的src路径取过来,给body作为背景即可
var imgs = document.querySelector('.baidu').querySelectorAll('img');
//console.log(imgs);
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
//document.body.style.backgroundImage = 'url(images/xmm1.jpg)';
// console.log(this.src);
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
</body>
鼠标经过 onmouseover 鼠标离开 onmouseout
取消勾选案例
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th><input type="checkbox" id="j_ebA11" checked="checked"></th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td><input type="checkbox"></td>
<td>dgfhgjhhjk</td>
<td>2222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>dgfhgjhhjk</td>
<td>2222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>dgfhgjhhjk</td>
<td>2222</td>
</tr>
</tbody>
</table>
</div>
<script>
//1 全选和取消全选的做法 :让下面所有的复选框的checked属性(选中状态)跟随 全选按钮即可
//获取元素
var j_ebA11 = document.getElementById('j_ebA11');//全选按钮
var j_tb = document.getElementById('j_tb').getElementsByTagName('input');//下面所有的复选框
j_ebA11.checked = false;
j_ebA11.onclick = function () {
//this.checked可以得到当前复选框的选中状态 如果是true就是选中,如果是false就是未选中
for (var i = 0; i < j_tb.length; i++) {
j_tb[i].checked = this.checked;
}
}
//下面复选框需要全部选中,上面全选才能选中做法:给下面所有复选框绑定点击事件,每次点击,都要循环查看下面所有的复选框师傅有没选中的,上面的全选就是不选中。
//设置一个变量,来控制全选是否选中
//flag控制全选按钮是否选中
var flag = true;
for (var i = 0; i < j_tb.length; i++) {
j_tb[i].onclick = function () {
//每次点击下面的复选框都要循环检查四个小按钮是否全被选中
for (var i = 0; i < j_tb.length; i++) {
if (j_tb[i].checked) {
flag = false;
}
}
j_ebA11 = flag;
}
}
</script>
</body>
2.6自定义属性操作
2.6.1获取属性值
element.属性 获取属性值
代码实现
<body>
<div id="demo"></div>
<script>
var div = document.querySelector('div');
//1 获取元素的属性值
//(1) element.属性
console.log(div.id);
//2 element.getAttribute('属性') get得到获取 attribute 属性的意思
console.log(div.getAttribute('id'));
</script>
</body>
element.属性 获取内置属性值(元素本身自带的属性)
element.getAttribute('属性');主要获得自定义的属性(标准)我们程序员自定义的属性(程序员自己添加的树形称为自定义属性)
2.6.2设置属性值
element.属性=‘值’ 设置内置属性值
element.setAttribute('属性',‘值’);
<body>
<div id="demo" index="1"></div>
<script>
var div = document.querySelector('div');
//1 获取元素的属性值
//(1) element.属性
console.log(div.id);
//2 element.getAttribute('属性') get得到获取 attribute 属性的意思
console.log(div.getAttribute('id'));
//2 设置元素的属性值
//(1)element.属性=‘值’ 设置内置属性值
div.id = 'test';
//(2)element.setAttribute('属性',‘值’); 主要针对于自定义属性
div.setAttribute('index', '2');
div.setAttribute('class', 'footer');//class 特殊 这里面写的就是class 不是class
</script>
</body>
element.属性 设置内置属性值
element.setAttribute('属性');主要设置自定义的属性(标准)
//3 移除属性 removeAttribute(属性)
div.removeAttribute('index');