1.DOM简介
1.1 什么是DOM
文档对象模型（DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
W3C 已经决定了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构、样式
1.2 DOM树
- 文档：一个页面就是一个文档，DOM中使用document表示
- 元素：页面中的所有标签都是元素，DOM中使用element表示
- 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node 表示。
DOM把以上内容都看做是对象
2.获取元素
2.1 如何获取页面元素
DOM在我们实际开发中主要用来操作对象。
我们如何来获取页面中的元素呢？
获取页面中的元素可以使用以下几种方法：
- 根据ID获取
- 根据标签名获取
- 通过 HTML5 新增的方法获取
- 特殊元素的获取
2.2 根据 ID 获取
使用getElementById()方法可以获得带有ID的元素对象。
<body>
<div id="time">2021-03-16</div>
<script>
// 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
// 2. get 获得 element 元素 bu 通过 驼峰命名法
// 3. 参数 id 是大小写敏感的字符串
// 4. 返回的是一个元素对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
</script>
</body>
2.3 根据标签名获取
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合
<ul>
<li>知否知否，应是等你好久1</li>
<li>知否知否，应是等你好久2</li>
<li>知否知否，应是等你好久3</li>
<li>知否知否，应是等你好久4</li>
<li>知否知否，应是等你好久5</li>
</ul>
<ul id="nav">
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
</ul>
<script>
// 1. 返回的是 获取过来元素对象的集合 以伪数组的形式显示
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// console.log(typeof lis);
// console.dir(lis);
// // 2. 我们想要一次打印里面的元素对象 我们可以采用遍历的方式
// for (var i = 0; i < lis.length; i++) {
// console.log(lis[i]);
// }
// 3.Element.getElementsByTagName() 可以得到这个元素里面的某些标签
var nav = document.getElementById('nav');
var navLis = nav.getElementsByTagName('li');
console.log(navLis);
</script>
2.4 通过 HTML5 新增的方法获取
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// 1. document.getElementsByClassName() 根据类名获得某些元素合集
// 任然以伪数组得形式存储
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2. document.querySelector('选择器') 根据指定选择器返回第一个元素对象
// 切记 里面的选择器需要加符号 如：.box #nav li
var firstDiv = document.querySelector('.box');
console.log(firstDiv);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
// 3. document.querySelectorAll('选择器') 返回指定选择器的所有对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>
2.5 通过获取特殊元素（body、html）获取
1. 获取body 元素
// 返回的是一个元素对象
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);
2. 获取html 元素
// var htmlEle = document.html;
var htmlEle = document.documentElement;
console.log(htmlEle);
3. 事件基础
3.1 事件概述
JavaSctipt 使我们有能力创建动态页面，而事件是可以被JavaScript帧测到的行为。
简单理解：触发——相应机制。
页面中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。
3.2 事件的三要素
事件三要素： 事件源、事件类型、事件处理程序
其中：
事件源：事件被触发的对象；如：按钮
事件类型：如何触发 触发什么事件 如：鼠标点击（onclick）、鼠标经过、键盘按下
事件处理程序：通过一个函数赋值的方式 完成。
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('点秋香');
}
3.3 执行事件的步骤
- 获取事件源
- 注册事件（绑定事件）
- 添加事件处理程序（采用函数赋值形式）
<div>123</div>
<script>
// 执行事件的步骤
// 点击div 控制台输出 我被选中了
// 1. 获取事件源
var div = document.querySelector('div');
// 2. 绑定事件 注册事件
// div.ondblclick
// 3. 添加事件处理程序
div.onclick = function() {
console.log('我被选中了');
}
</script>
4. 操作元素
JavaScript 的 DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性
4.1 改变元素的内容
element.innerText
从起始位置到终止位置的内容，但它去除了html标签，同时1空格和换行也会去掉
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>123</p>
<script>
// 1. 获取事件源
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2. 注册事件
btn.onclick = function() {
// div.innerText = '2021-03-18';
div.innerText = getDate();
}
function getDate() {
var date = new Date();
// 我们写一个 2021年 3月 13 日 星期六
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>
element.innerHTML
起始位置到终止位置的全部内容，包括html标签，同时保留空格的换行
innerText 和 innerHTML之间的区别
<div></div>
<p>
我是文字
<span>1234</span>
</p>
<script>
// innerText 和 innerHTML的区别
// 1. innerText 不识别html的标签 非标准 去除空格和换行
var div = document.querySelector('div');
div.innerText = '<strong>今年是：</strong>2021年';
// 2. innerHTML 识别html的标签 W3C标准 保留空格和换行的
div.innerHTML = '<strong>今年是：</strong>2021年';
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
4.2 常见元素的属性操作
-
innerText 、innerHTMl 改变元素内容
-
src 、href
-
id 、alt 、title
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button>
<img src="images/ldh.jpg" alt="" title="刘德华">
<script>
// 修改元素属性
// 1. 获取事件源
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
// 2. 注册事件
zxy.onclick = function() {
img.src = 'images/zxy.jpg';
img.title = '张学友';
}
ldh.onclick = function() {
img.src = 'images/ldh.jpg'
img.title = '刘德华';
}
</script>
4.3 表单元素的属性操作
利用 DOM 可以操作如下表单元素的属性：
type 、value 、checked 、selected 、disabled
<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指向的是时间函数的调用者 btn
this.disabled = true;
}
</script>
案例：显示密码
/* 此处为CSS部分 */
<style>
.box {
position: relative;
400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input {
370px;
height: 30px;
border: none;
outline: none;
}
.box img {
position: absolute;
top: 2px;
right: 2px;
24px;
}
</style>
<-- ! 此处以下为为HTML和 js 部分 -->
<div class="box">
<label for="">
<img src="images/close.png" alt="" id="eye">
</label>
<input type="password" id="pwd">
</div>
<script>
// 点击按钮将密码框切换为文本框，并可以查看密码明文
// 案例分析：
// 核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
// 一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
// 算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0；如果是0就切换为密码框，flag设置为1
// 1. 获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
// 2. 注册事件 处理程序
var flag = 0;
eye.onclick = function() {
if (flag == 0) {
pwd.type = 'text';
eye.src = 'images/open.png'
flag = 1;
} else {
pwd.type = 'password';
eye.src = 'images/close.png'
flag = 0;
}
}
</script>
4.4 样式属性操作
我们可以通过 JS 修改元素的大小、颜色、位置等样式
- element.style 行内样式操作
- element.className 类名样式操作
注意： - JS 里面的样式采用驼峰命名法。 比如：fontSize、backgroundColor
- JS 修改 style 样式操作，产生的是行内样式，css 权重比较高
element.style 行内样式操作
<style>
div {
100px;
height: 100px;
background-color: pink;
}
</style>
<div>文本</div>
<script>
// 1. 使用element.style 获得修改元素样式 如果样式比较少 或者功能简单的情况下使用
var div = document.querySelector('div');
div.onclick = function() {
div.style.backgroundColor = 'purple';
div.style.width = '150px';
div.style.color = '#fff';
div.style.marginTop = '50px';
div.style.fontSize = '14px';
}
</script>
element.className 类名样式操作
4.5 排他思想
如果有同一个元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想：
**1. 所有元素全部清除样式（干掉其他人）
**2. 给当前元素设置样式（留下我自己）
**3. 注意顺序不能颠倒，首先干掉其他人，再设置自己
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
// 1. 获取所有元素按钮
var btns = document.getElementsByTagName('button')
// btns得到的是伪数组 里面的每一个元素 btns[i]
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
// (1) 我们先把所有的按钮背景颜色去掉 干掉所有人
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
// (2) 然后才让当前的元素背景颜色为pink 留下自己
this.style.backgroundColor = 'pink';
}
}
// 2. 首先先排除其他人，然后才设置自己的样式，这种排除其他人的思想我们称之为排他思想
</script>
</body>
</html>
案例：百度换肤效果
案例分析：
-
- 这个案例练习的是给一组元素注册事件
-
- 给4个小图片利用循环注册点击事件
-
- 我们点击这个图片，让我们页面背景改为当前的图片
-
- 核心算法：把当前图片的src路劲取过来，给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>
* {
margin: 0;
padding: 0;
}
body {
background: url(images/1.jpg) no-repeat center top;
}
li {
list-style-type: none;
}
.baidu {
overflow: hidden;
margin: 100px auto;
background-color: #fff;
410px;
padding-top: 3px;
}
.baidu li {
float: left;
margin: 0 1px;
cursor: pointer;
}
.baidu img {
100px;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
</ul>
<script>
// 1. 获取元素
var imgs = document.querySelector('.baidu').getElementsByTagName('img');
// console.log(imgs);
// 2. 循环注册事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
// this.src 就是我们点击图片的路劲 images/2.jpg
// console.log(this.src);
// 把这个路劲 this.src 给body 就可以了
document.body.style.backgroundImage = 'url(' + this.src + ')'
}
}
</script>
</body>
</html>
案例：表格隔行变色
案例分析：
-
- 用到新的鼠标事件 ：鼠标经过onmouseover 鼠标离开： onmouseout
-
- 核心思路：鼠标经过 tr 行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色
-
- 注意：第一个（thead里面的行）不需要变换颜色，因此我们获取的是tbody里面的行
<!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>
* {
margin: 0;
padding: 0;
}
table {
800px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
font-size: 14px;
}
thead tr {
height: 30px;
background-color: skyblue;
}
tbody tr {
height: 30px;
}
tbody td {
border-bottom: 1px solid #ccc;
font-size: 12px;
color: blue;
}
.bg {
background-color: pink;
}
</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>270047</td>
<td>广发理财30天债券B</td>
<td>0.903</td>
<td>3.386</td>
<td>0.000</td>
<td>0.000%</td>
</tr>
<tr>
<td>163417</td>
<td>兴全合宜混合A</td>
<td>0.860</td>
<td>10.860</td>
<td>0.863</td>
<td>-0.382%</td>
</tr>
<tr>
<td>003929</td>
<td>中银证券安进债券A</td>
<td>1.034</td>
<td>1.088</td>
<td>1.034</td>
<td>+0.077%</td>
</tr>
<tr>
<td>360020</td>
<td>光大添天盈月度理财债券B</td>
<td>0.985</td>
<td>0.263</td>
<td>1.263</td>
<td>0.000%</td>
</tr>
</tbody>
</table>
<script>
// 1. 获得元素 获得的是 tbody 里面的所有行
var rows = document.querySelector('tbody').querySelectorAll('tr');
// 2. 利用循环绑定注册事件
for (var i = 0; i < rows.length; i++) {
// 3. 鼠标经过事件 onmouseover
rows[i].onmouseover = function() {
// console.log(11);
this.className = 'bg';
}
// 4. 鼠标离开事件 onmouseout
rows[i].onmouseout = function() {
this.className = '';
}
}
</script>
</body>
</html>