JavaScript-DOM（上）
文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中所有的标签都是元素，DOM中使用element表示
结点：网页中所有的内容都是结点（标签、属性、文档、注释等），DOM中使用node表示
DOM把以上内容都看做是对象
HTML DOM Document 对象
文档对象代表您的网页。
如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。
下面是一些如何使用 document 对象来访问和操作 HTML 的实例。
查找 HTML 元素
| 方法 | 描述 |
|---|---|
| document.getElementById(id) | 通过元素 id 来查找元素 |
| document.getElementsByTagName(name) | 通过标签名来查找元素 |
| document.getElementsByClassName(name) | 通过类名来查找元素 |
改变 HTML 元素
| 方法 | 描述 |
|---|---|
| element.innerHTML = new html content | 改变元素的 inner HTML |
| element.attribute = new value | 改变 HTML 元素的属性值 |
| element.setAttribute(attribute, value) | 改变 HTML 元素的属性值 |
| element.style.property = new style | 改变 HTML 元素的样式 |
添加和删除元素
| 方法 | 描述 |
|---|---|
| document.createElement(element) | 创建 HTML 元素 |
| document.removeChild(element) | 删除 HTML 元素 |
| document.appendChild(element) | 添加 HTML 元素 |
| document.replaceChild(element) | 替换 HTML 元素 |
| document.write(text) | 写入 HTML 输出流 |
添加事件处理程序
| 方法 | 描述 |
|---|---|
| document.getElementById(id).onclick = function(){code} | 向 onclick 事件添加事件处理程序 |
查找 HTML 对象
首个 HTML DOM Level 1 (1998)，定义了 11 个 HTML 对象、对象集合和属性。它们在 HTML5 中仍然有效。
后来，在 HTML DOM Level 3，加入了更多对象、集合和属性。
| 属性 | 描述 | DOM |
|---|---|---|
| document.anchors | 返回拥有 name 属性的所有 <a> 元素。 | 1 |
| document.applets | 返回所有 <applet> 元素（HTML5 不建议使用） | 1 |
| document.baseURI | 返回文档的绝对基准 URI | 3 |
| document.body | 返回 <body> 元素 | 1 |
| document.cookie | 返回文档的 cookie | 1 |
| document.doctype | 返回文档的 doctype | 3 |
| document.documentElement | 返回 <html> 元素 | 3 |
| document.documentMode | 返回浏览器使用的模式 | 3 |
| document.documentURI | 返回文档的 URI | 3 |
| document.domain | 返回文档服务器的域名 | 1 |
| document.domConfig | 废弃。返回 DOM 配置 | 3 |
| document.embeds | 返回所有 <embed> 元素 | 3 |
| document.forms | 返回所有 <form> 元素 | 1 |
| document.head | 返回 <head> 元素 | 3 |
| document.images | 返回所有 <img> 元素 | 1 |
| document.implementation | 返回 DOM 实现 | 3 |
| document.inputEncoding | 返回文档的编码（字符集） | 3 |
| document.lastModified | 返回文档更新的日期和时间 | 3 |
| document.links | 返回拥有 href 属性的所有 <area> 和 <a> 元素 | 1 |
| document.readyState | 返回文档的（加载）状态 | 3 |
| document.referrer | 返回引用的 URI（链接文档） | 1 |
| document.scripts | 返回所有 <script> 元素 | 3 |
| document.strictErrorChecking | 返回是否强制执行错误检查 | 3 |
| document.title | 返回 <title> 元素 | 1 |
| document.URL | 返回文档的完整 URL | 1 |
1、事件三要素
<button id="btn">唐伯虎</button>
<script>
//点击一个按钮，弹出对话框
// 1、事件是有三部分组成 事件源 事件类型 事件处理程序
// (1)事件源 事件被触发的对象 ——按钮
let btn = document.getElementById('btn');
// (2)事件类型 如何触发 什么事件 比如鼠标点击（onclick）还是鼠标经过 还是键盘按下
// (3)事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function () {
alert("点蚊香");
}
</script>
2、执行事件的步骤
<div>123</div>
<script>
// 执行事件步骤
// 点击 div 控制台输出 我是张三疯，打钱!!!
// 1、获取事件源
let div = document.querySelector('div');
// 2、绑定事件 注册事件
// div.onclick
// 3、添加事件处理程序（采取函数赋值形式）
div.onclick = function () {
console.log("我是张三疯，打钱!!!");
}
</script>
3、操作元素 —innerText（innerHTML）
//element.innerText
//从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
//element.innerHTML
//从起始位置到终止位置的全部内容，包括html标签，同时保留空格和行
<button>显示当前系统事件</button>
<div>某个事件</div>
<p></p>
<script>
// 当我们点击了按钮，div里面的文字会发生变化
// 1、获取元素
let btn = document.querySelector('button');
let div = document.querySelector('div');
// 2、注册事件
btn.onclick = function () {
div.innerText = getDate();
}
function getDate() {
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth()+1;
let dates = date.getDate();
let day = date.getDay();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
let arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
return "现在是："+year+'年'+month+'月'+dates+'日 '+hours+':'+minutes+':'+seconds+' '+arr[day];
}
// 不添加事件直接修改页面内容
let p = document.querySelector('p');
p.innerText = getDate();
</script>
结果：显示当前系统事件
现在是：2022年2月26日 23:32:25 星期六
现在是：2022年2月26日 23:32:24 星期六
4、操作元素—修改元素属性
<button id="ej">蓝牙耳机</button>
<button id="sh">手环</button>
<div>
<img src="images/ej.png" alt="" title="蓝牙耳机">
</div>
<script>
let ej = document.getElementById('ej');
let sh = document.getElementById('sh');
let img = document.querySelector('img');
ej.onclick = function () {
img.src = "images/ej.png";
ej.title = "蓝牙耳机";
}
sh.onclick = function () {
img.src = "images/sh.png";
ej.title = "手环";
}
</script>
5、分时问候案例
<img src="images/sw.gif" title="上午" alt="" width="240">
<div><strong>上午好！</strong></div>
<script>
let img = document.querySelector('img');
let ch = document.querySelector('div');
let date = new Date();
let hours = date.getHours();
if (hours < 12){
img.src = "images/sw.gif";
img.title = "早上";
ch.innerText = "早上好！！";
}else if(hours < 18){
img.src = "images/xw.gif";
img.title = "下午";
ch.innerText = "下午好！！";
}else {
img.src = "images/ws.gif";
img.title = "晚上";
ch.innerText = "晚上好！！";
}
console.log(hours);
</script>
6、修改表单元素
<button>按钮</button>
<input type="text" value="">
<script>
//1 、获取元素
let btn = document.querySelector('button');
let ch = document.querySelector('input');
// 2、注册事件 处理程序
btn.onclick = function () {
ch.value = "按钮被点击了！";
this.disabled = true;
// this 指向的是事件函数的调研者 btn
}
</script>
7、显示和隐藏密码
<div class="box">
<input type="password" name="" id="pwd">
<label>
<img src="images/1.png" id="eye">
</label>
</div>
<script>
let eye = document.getElementById('eye');
let pwd = document.getElementById('pwd');
let flag = 0;
eye.onclick = function () {
if (flag == 0){
eye.src = "images/1.png";
pwd.type = 'text';
flag = 1;
}else {
eye.src = "images/2.png";
pwd.type = 'password';
flag = 0;
}
}
</script>
8、样式属性操作（点击div更改div背景颜色和宽度）
1、JS里面的样式采取驼峰命名法 比如 fontSize、backgroundColor
2、JS修改style 样式操作，产生的是行内样式，css权重比较高
9、点击x隐藏二维码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
position: relative;
margin: 100px auto;
background: pink;
width: 200px;
height: 200px;
text-align: center;
}
.box p{
text-align: center;
position: absolute;
top: 70px;
right: 43px;
}
.box i{
position: absolute;
width: 30px;
height: 30px;
text-align: center;
font-size: 17px;
left: -30px;
cursor: pointer;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box">
<p><strong>我是淘宝二维码</strong></p>
<i class="close-btn"><strong>x</strong></i>
</div>
<script>
let box = document.querySelector('.box');
let btn = document.querySelector('.close-btn');
btn.onclick = function () {
box.style.display = 'none';
}
</script>
</body>
</html>
10、显示隐藏文本框内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input{
color: #999;
}
</style>
</head>
<body>
<input type="text" value="手机">
<script>
let text = document.querySelector('input');
//获取焦点事件 onfocus
text.onfocus = function () {
if (this.value === '手机'){
this.value = '';
}
//获取焦点之后文字颜色变深
this.style.color = '#333';
}
//失去焦点事件
text.onblur = function () {
if (this.value === ''){
this.value = '手机';
}
//获取焦点之后文字颜色变浅
this.style.color = '#999';
}
</script>
</body>
</html>
11、className（密码框验证信息）
1、如果样式修改较多，可以采取操作类名的方式更改元素样式
2、class因为是个保留字，因此使用className来操作元素类名属性
3、className会直接更改元素的类名，会覆盖原先的类名
4、如果想保留原先的类名，我们可以选择多类名选择器
this.className = 'first change';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
margin:100px auto;
width: 600px;
}
.message{
display: inline-block;
padding-left: 25px;
background: url("images/message.png") no-repeat left center;
}
.error{
color: red;
background-image: url("images/error.png");
}
.right{
color: green;
background-image: url("images/right.png");
}
</style>
</head>
<body>
<div class="box">
<input type="password" class="ipt">
<p class="message">请输入6~16位的密码</p>
</div>
<script>
let ipt = document.querySelector('.ipt');
let message = document.querySelector('.message');
ipt.onblur = function () {
if (this.value.length < 6 || this.value.length > 16){
message.innerHTML = "你输入的不正确，请重新输入6~16位的密码！";
message.className = 'message error';
}else {
message.innerHTML = "可用！";
message.className = 'message right'
}
}
</script>
</body>
</html>
12、总结
13、用户名密码显示和隐藏内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
margin: 100px auto;
width: 450px;
}
.onfocus{
border: pink 1px solid;
color: #eaaab5;
}
.onblur{
color: #999;
}
input{
color: #999;
width: 140px;
}
</style>
</head>
<body>
<div class="box">
<input type="text" class="uname" value="邮箱/ID/手机号">
<input type="text" class="pwd" value="密码">
<button class="btn">登录</button>
</div>
<script>
let uname = document.querySelector('.uname');
let pwd = document.querySelector('.pwd');
uname.onfocus = function () {
if (this.value === '邮箱/ID/手机号'){
this.value = '';
this.className = 'onfocus uname';
}
}
pwd.onfocus = function () {
if (this.value === '密码'){
this.value = '';
this.type = 'password';
this.className = 'onfocus pwd';
}
}
uname.onblur = function(){
if (this.value === ''){
this.value = '邮箱/ID/手机号';
this.className = 'onblur uname';
}
}
pwd.onblur = function () {
if (this.value === ''){
this.value = '密码';
this.type = 'text';
this.className = 'onblur pwd';
}
}
</script>
</body>
</html>
14、京东关闭广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
margin: 0px;
position: absolute;
width: 100%;
height: 200px;
}
#gg{
position: relative;
margin: 65px auto;
text-align: center;
font-size: 40px;
}
#x{
width: 27px;
height: 27px;
position: absolute;
right: 10px;
font-size: 20px;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<div id="x">x</div>
<div id="gg"><span>我是广告</span></div>
</div>
<script>
let box = document.querySelector('.box');
let x = document.getElementById('x');
x.onclick = function () {
box.style.display = 'none';
}
</script>
</body>
</html>
15、一键开关灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>开关灯</button>
<script>
let btn = document.querySelector('button');
let flag = 0;
btn.onclick = function () {
if (flag === 0){
document.body.style.backgroundColor = 'white';
flag = 1;
}else {
document.body.style.backgroundColor = 'black';
flag = 0;
}
}
</script>
</body>
</html>
16、排他思想
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
// 1、获取所有按钮元素
let btns = document.getElementsByTagName('button');
// btns得到的是伪数组 里面每一个元素 btns[i]
for (let i = 0;i < btns.length;i++){
btns[i].onclick = function () {
// (1)先把所有按钮的背景颜色去掉
for (let i = 0;i < btns.length;i++){
btns[i].style.backgroundColor = '';
}
// (2)然后才把当前的元素背景改为yellow
this.style.backgroundColor = 'yellow';
}
}
// 2、首先先排除其他人，然后才设置自己的样式
</script>
</body>
</html>
17、表格隔行变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
width: 800px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
font-size: 14px;
}
thead tr {
height: 30px;
}
tbody tr {
height: 30px;
}
tbody td {
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
color: blue;
}
.bg {
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
<script>
let trs = document.querySelector('tbody').querySelectorAll('tr');
for (let i = 0; i < trs.length;i++){
trs[i].onmouseout = function(){
this.className= '';
}
trs[i].onmouseover = function () {
this.className = 'bg';
}
}
</script>
</body>
</html>
18、全选反选
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
}
tbody tr:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script>
let j_cbAll = document.getElementById('j_cbAll');
let j_tbs = document.getElementById('j_tb').querySelectorAll('input');
j_cbAll.onclick = function () {
for (let i = 0;i < j_tbs.length;i++){
j_tbs[i].checked = this.checked;
}
}
for (let i = 0;i < j_tbs.length; i++){
j_tbs[i].onclick = function () {
}
</script>
</body>
</html>
19、自定义属性的操作（Attribute('属性')）
// 1.获取属性值
element.属性 获取属性值
element.getAttribute('属性');
// 2.设置属性值
element.属性 = '值' 设置内置属性值
element.setAttribute('属性','值')；
// 3.移除属性
element.removeAttribute('属性');
//区别：
element.属性 内置属性（元素本身自带的属性）
element.get(set)Attribute('属性')；主要获得(设置)自定义属性（标准），我们程序员自定义的属性
//H5自定义规范
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
let 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']);
20、tab栏切换