getElementById获取元素
<!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="time">2023-3</div>
<script>
// 1. 因文档页面从上往下加载，所以先有标签 即 script 写在标签下面
// 2. getElementById 驼峰命名法
// 3. 参数 id 是大小写敏感的字符串
// 4. 返回一个元素对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer); // object
// 5. console.dir 打印返回的元素对象 更好的查看里面的属性和方法
console.dir(timer)
</script>
</body>
</html>getElementsByTagName获取某些元素
<!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>
<ul>
<li>兰叶春葳蕤，桂华秋皎洁1</li>
<li>兰叶春葳蕤，桂华秋皎洁2</li>
<li>兰叶春葳蕤，桂华秋皎洁3</li>
<li>兰叶春葳蕤，桂华秋皎洁4</li>
<li>兰叶春葳蕤，桂华秋皎洁5</li>
</ul>
<ol id="ol">
<li>接天莲叶无穷碧，映日荷花别样红</li>
<li>接天莲叶无穷碧，映日荷花别样红</li>
<li>接天莲叶无穷碧，映日荷花别样红</li>
</ol>
<script>
// 1. 返回的是 获取过来元素对象的集合 以伪数组的形式存储
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// 2. 想要依次打印里面的元素对象，可以采取遍历的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// 3. 若页面中只有一个li 返回的还是伪数组的形式
// 4. 若页面中没有这个元素 返回的是空的伪数组的形式
// 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
// var ol = document.getElementsByTagName('ol'); // [ol]
// console.log(ol[0].getElementsByTagName('li'));
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
</script>
</body>
</html>H5新增获取元素方式
<!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 class="box">box1</div>
<div class="box">box2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// 1. getElementsByClassName 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2. querySelector 返回指定选择器的第一个元素对象 切记：里面的选择器需要加符号 .box #nav
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
// 3. querySelectorAll() 返回指定选择器的所以元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>
</body>
</html>获取特殊元素
<!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>
<script>
// 1. 获取 body 元素
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);
// 2. 获取 html 元素
// var htmlEle = document.html; //undefined
var htmlEle = document.documentElement;
console.log(htmlEle);
</script>
</body>
</html>事件三要素
<!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>
<button id="btn">tang</button>
<script>
// 点击一个按钮，弹出对话框
// 1.事件是三部分组成，事件源 事件类型 事件处理程序 也称事件三要素
// (1) 事件源 事件被触发的对象 eg: 按钮
var btn = document.getElementById('btn');
// (2) 事件类型 如何触发 什么事件 eg:鼠标点击(onclick)触发 还是鼠标经过触发 还是键盘按下触发
// (3) 事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function() {
alert('qiu');
}
</script>
</body>
</html>执行事件步骤
<!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>123</div>
<script>
// 点击div 控制台输出： 我被选中了
// 1. 获取事件源
var div = document.querySelector('div');
// 2. 绑定事件 注册事件
// div.onclick
// 3. 添加事件处理程序
div.onclick = function() {
console.log('我被选中了');
}
</script>
</body>
</html>改变元素内容
<!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>
<style>
div,
p {
width: 300px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: black;
}
</style>
<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 = '2023-3-30';
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的区别
<!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></div>
<p>123
<span>456</span>
</p>
<script>
// 1. innerText 不识别html标签 非标准 去除空格和换行
var div = document.querySelector('div');
// div.innerText = '<strong>今天是:</strong> 2023';
// 2. innerHTML 识别html标签 W3C标准 保留空格和换行
div.innerHTML = '<strong>今天是:</strong> 2023';
// 这两个属性可读写的 可获取元素里的内容
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 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 id="01">01</button>
<button id="02">02</button> <br>
<img src="01.jpg" alt="" title="01">
<script>
// 1. 获取元素
var one = document.getElementById('01');
var two = document.getElementById('02');
var img = document.querySelector('img');
// 2. 注册事件 处理事件
two.onclick = function() {
img.src = '02.jpg';
img.title = '02';
}
one.onclick = function() {
img.src = '01.jpg';
img.title = '01'
}
</script>
</body>
</html>分时问候并显示不同图案案例
<!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="01.jpg" 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 = '01.jpg';
div.innerHTML = '上午好，好好写代码';
} else if (h < 18) {
img.src = '02.jpg';
div.innerHTML = '下午好，好好写代码';
} else {
img.src = '03.jpg';
div.innerHTML = '晚上好，好好写代码';
}
</script>
</body>
</html>表单属性设置
<!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>
<button>按钮</button>
<input type="text" value="输入内容">
<script>
// 1. 获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2. 注册事件 处理程序
btn.onclick = function() {
// input.innerHTML = 'in'; 这是 普通盒子 如：div里的内容
// 表单里的值 文字内容是通过 value 来修改的
input.value = '被点击了';
// 想要某个表单被禁用 不能再点击 disabled 将button禁用
// btn.disabled = true;
// this 指向的是事件的调用者 btn
this.disabled = true;
}
</script>
</body>
</html>仿京东显示隐藏密码
<!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>
.box {
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box svg {
position: absolute;
top: -84px;
right: 8px;
width: 24px;
}
</style>
</head>
<body>
<div class="box">
<label for="">
<svg id="eye" t="1680570409574" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1519" width="200" height="200"><path d="M949.12 490.24l-50.176-50.176c17.984-15.616 35.072-32.256 51.2-49.792a37.376 37.376 0 0 0-54.976-50.56C793.28 450.88 657.984 512 514.176 512c-144.96 0-281.6-61.952-384.896-174.592a37.312 37.312 0 1 0-55.04 50.56c16.704 18.176 34.304 35.008 52.48 50.88l-51.328 51.328a37.312 37.312 0 1 0 52.736 52.8l58.176-58.176c30.784 20.992 63.488 39.04 97.6 53.888L255.488 607.36a37.312 37.312 0 0 0 68.928 28.608l29.824-72a575.104 575.104 0 0 0 120.64 21.184v76.16a37.312 37.312 0 1 0 74.624 0V585.472a572.096 572.096 0 0 0 124.992-21.76l29.888 72.256a37.312 37.312 0 0 0 68.928-28.608l-28.544-68.992a592.192 592.192 0 0 0 94.592-52.352l56.96 56.96a37.312 37.312 0 1 0 52.736-52.8z" p-id="1520"></path></svg>
</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';
// svg = '<svg t="1680571670652" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2678" width="200" height="200"><path d="M946.048 503.381333c-0.298667-5.632-8.874667-33.28-20.906667-62.122666-12.288-29.696-33.066667-72.704-61.866666-108.586667a410.965333 410.965333 0 0 0-138.24-111.914667C658.773333 187.477333 581.205333 170.666667 494.592 170.666667c-86.485333 0-164.096 16.896-230.4 50.218666a413.653333 413.653333 0 0 0-138.197333 111.786667c-28.8 36.010667-49.493333 78.976-61.781334 108.714667-11.989333 28.8-20.48 56.490667-20.821333 62.08V503.850667c0.298667 5.632 8.917333 33.28 20.906667 62.208 12.373333 29.696 33.109333 72.704 61.824 108.501333a410.965333 410.965333 0 0 0 138.197333 111.914667c66.688 33.408 144.213333 50.304 230.4 50.304 86.272 0 163.797333-16.896 230.4-50.346667a413.354667 413.354667 0 0 0 138.197333-111.786667c28.8-35.84 49.578667-78.890667 61.866667-108.586666 12.032-28.8 20.608-56.490667 20.906667-62.08v-0.213334-0.426666z m-74.197333 0.170667c-5.674667 17.408-27.776 80.213333-64.384 125.824l-0.512 0.469333a341.333333 341.333333 0 0 1-114.304 92.586667c-56.490667 28.330667-123.306667 42.752-198.4 42.752-75.178667 0-141.866667-14.421333-198.4-42.709333a339.754667 339.754667 0 0 1-114.304-92.714667c-36.778667-45.781333-58.965333-108.8-64.682667-126.293333 5.717333-17.408 27.904-80.298667 64.682667-126.293334a341.76 341.76 0 0 1 114.432-92.586666c56.576-28.330667 123.392-42.624 198.570666-42.624 75.52 0 142.208 14.293333 198.314667 42.624a339.754667 339.754667 0 0 1 114.304 92.672c36.778667 45.994667 59.008 108.928 64.682667 126.293333z m-377.301334-174.08a173.525333 173.525333 0 0 0-173.269333 173.312 173.568 173.568 0 0 0 173.269333 173.269333 173.568 173.568 0 0 0 173.312-173.269333 173.525333 173.525333 0 0 0-173.312-173.312z m102.016 173.312c0 27.178667-10.581333 52.778667-29.866666 72.106667-19.328 19.285333-44.928 29.866667-72.106667 29.866666a101.290667 101.290667 0 0 1-72.106667-29.866666 101.290667 101.290667 0 0 1-29.909333-72.106667c0-27.221333 10.581333-52.821333 29.866667-72.106667a101.290667 101.290667 0 0 1 72.106666-29.909333c27.221333 0 52.821333 10.581333 72.106667 29.866667 19.328 19.328 29.909333 44.928 29.909333 72.106666z" fill="#000000" p-id="2679"></path></svg>'
flag = 1;
} else {
pwd.type = 'password';
// svg = '<svg id="eye" t="1680570409574" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1519" width="200" height="200"><path d="M949.12 490.24l-50.176-50.176c17.984-15.616 35.072-32.256 51.2-49.792a37.376 37.376 0 0 0-54.976-50.56C793.28 450.88 657.984 512 514.176 512c-144.96 0-281.6-61.952-384.896-174.592a37.312 37.312 0 1 0-55.04 50.56c16.704 18.176 34.304 35.008 52.48 50.88l-51.328 51.328a37.312 37.312 0 1 0 52.736 52.8l58.176-58.176c30.784 20.992 63.488 39.04 97.6 53.888L255.488 607.36a37.312 37.312 0 0 0 68.928 28.608l29.824-72a575.104 575.104 0 0 0 120.64 21.184v76.16a37.312 37.312 0 1 0 74.624 0V585.472a572.096 572.096 0 0 0 124.992-21.76l29.888 72.256a37.312 37.312 0 0 0 68.928-28.608l-28.544-68.992a592.192 592.192 0 0 0 94.592-52.352l56.96 56.96a37.312 37.312 0 1 0 52.736-52.8z" p-id="1520"></path></svg>'
flag = 0;
}
}
</script>
</body>
</html>修改样式属性
<!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: red;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
div.onclick = function() {
// div.style里面的属性 采取驼峰命名法
// js 修改 style 样式操作，产生的是行内样式，css权重较高
this.style.backgroundColor = 'green';
this.style.width = '400px';
}
</script>
</body>
</html>关闭图片案例
<!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>
.box {
position: relative;
width: 74px;
height: 88px;
border: 1px solid #ccc;
margin: 100px auto;
font-size: 12px;
text-align: center;
color: #f40;
/* display: block; */
}
.box img {
width: 60px;
margin-top: 5px;
}
.close-btn {
position: absolute;
top: -1px;
left: -16px;
width: 14px;
height: 14px;
border: 1px solid #ccc;
line-height: 14px;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<img src="01.jpg" alt="">
<i class="close-btn">x</i>
</div>
<script>
var btn = document.querySelector('.close-btn');
var box = document.querySelector('.box');
btn.onclick = function() {
box.style.display = 'none';
}
</script>
</body>
</html>循环精灵图
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
// 索引号 乘以 44 就是每个li 的背景y坐标 (index)
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>
</body>显示隐藏文本框内容
<!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>
input {
color: #999;
}
</style>
</head>
<body>
<input type="text" value="手机">
<script>
var text = document.querySelector('input');
text.onfocus = function() {
// console.log('fucus');
if (this.value === '手机') {
this.value = '';
}
// 获得焦点需要把文本框里面的文字变黑
this.style.color = '#333';
}
text.onblur = function() {
// console.log('no');
if (this.value === '') {
this.value = '手机';
}
// 失去焦点需要把文本框里面的文字变浅
this.style.color = '#999';
}
</script>
</body>
</html>通过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: 100px;
height: 100px;
background-color: pink;
}
.change {
background-color: red;
color: #fff;
font-size: 25px;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="first">文本</div>
<script>
// 1. 用 element.style 获得修改元素样式 若样式较少 或 功能简单时使用
var test = document.querySelector('div');
test.onclick = function() {
// this.style.backgroundColor = 'red';
// this.style.color = '#fff';
// this.style.fontSize = '25px';
// this.style.marginTop = '100px';
// 2. 可以通过 修改元素的className更改元素样式 适用于样式较多或功能较复杂时
this.className = 'change';
// 3. 如果要保留原来的类名 就做 多类名选择器
this.className = 'first change';
}
</script>
</body>
</html>仿新浪注册页面（密码验证信息）
<!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: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
background: url(02.jpg) no-repeat left center;
padding-left: 20px;
}
.wrong {
color: red;
background: url(03.jpg) no-repeat left center;
}
.right {
color: green;
background: url(04.jpg) no-repeat left center;
}
</style>
</head>
<body>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6~16位密码</p>
</div>
<script>
// 首先判断的事件是表单失去焦点onblur
// 如果输入正确则提示正确的信息颜色为绿色小图标变化
// 如果输入不是6到16位，则提示错误信息颜色为红色小图标变化
// 因为里面变化样式较多，我们采取className修改样式
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('error');
message.className = 'message wrong';
message.innerHTML = '您输入的位数不对';
} else {
message.className = 'message right';
message.innerHTML = '您输入的位数正确';
}
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
