目录
目标
- 能够说出什么是 DOM
- 能够获取页面元素
- 能够给元素注册事件
- 能够操作 DOM 元素的属性
- 能够创建元素
- 能够操作 DOM 节点
DOM 简介
什么是 DOM
- 文档对象模型（Document Object Model，简称 DOM）
- W3C 组织推荐的处理可扩展标记语言（ HTML 或者 XML ）的标准编程接口
- W3C 已经定义了一系列的 DOM 接口
- 通过这些 DOM 接口可以改变网页的内容、结构和样式
DOM 树
- 文档：一个页面就是一个文档，DOM 中使用 document 表示
- 元素：页面内所有标签都是元素，DOM 中使用 element 表示
- 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示
- DOM 将以上内容都看作是对象
- DOM 在实际开发中主要用来操作元素
获取元素
获取页面中的元素可以使用以下几种方式：
- 根据 ID 获取
- 根据标签名获取
- 通过 HTML5 新增的方法获取
- 特殊元素获取
根据 ID 获取元素
- 使用 getElementById() 方法可以获取带有 ID 的元素对象
- getElementById() 方法返回一个匹配特定 ID 的元素
- 由于元素的 ID 在大部分情况下要求是独一无二的，此方法可以高效查找特定元素
<body>
<div id='time'>2021-07-19</div>
<!-- 因为文档页面从上往下加载，所以 script 写在标签的下面 -->
<script>
// get 获得；element 元素；by 通过。驼峰命名法
// 参数：大小写敏感的字符串
// 返回值：一个匹配到 ID 的 DOM Element 对象
// 若在当前 Document 下没有找到，则返回 null
var str = document.getElementById('time');
console.log(str);
// 返回的是一个元素对象 object
console.log(typeof str);
// console.dir()：打印返回的元素对象，更好地查看里面的属性和方法
console.dir(str);
</script>
</body>根据标签名获取元素
- 使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合
- Elements：指定某标签名的所有元素（标签）
- 无论页面中有几个该标签，返回的都是伪数组；如果没有该标签，返回空的伪数组
<body>
<ul>
<li>大漠孤烟直</li>
<li>长河落日圆</li>
<li>萧关逢侯骑</li>
<li>督护在燕然</li>
</ul>
<script>
// 返回的是获取过来的元素对象的集合，以伪数组的形式存储
var lis = document.getElementsByTagName('li');
console.log(lis); // HTMLCollection(4) [li, li, li, li]
// 打印该标签名的某一个元素(标签)对象
console.log(lis[1]);
// 依次打印该标签名的所有元素(标签)对象
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
</script>注意：
- 因为得到的是一个对象的集合，所以想要操作里面的元素需要遍历
- 得到的元素对象是动态的
- 所谓的动态：当标签所包含的内容发生改变，得到的元素对象也将改变
根据父元素获取内部所有指定标签名的子元素
- element.getElementById('标签名')
- 父标签名.getElementById('子标签名')
- 父元素必须是单个对象（必须指明是哪一个元素对象）
- 获取的时候不包括父元素自己
<body>
<ul>
<li>大漠孤烟直</li>
<li>长河落日圆</li>
<li>萧关逢侯骑</li>
<li>督护在燕然</li>
</ul>
<ol id='ol'>
<li>白日依山尽</li>
<li>黄河入海流</li>
<li>欲穷千里目</li>
<li>更上一层楼</li>
</ol>
<script>
// 根据父元素获取内部所有指定标签名的子元素
// element.getElementsByTagName('标签名')
var ol = document.getElementsByTagName('ol'); // [ol]
// 不能直接使用 ol.getElementsByTagName('li')
// 因为 ol 是伪数组的 元素,不是具体的单个元素,可能多个
// console.log(ol.getElementsByTagName('li'));
// 父元素必须是指定的单个元素 ol[i]
console.log(ol[0].getElementsByTagName('li')); // HTMLCollection(4) [li, li, li, li]
// 一般情况下使用 id 获取元素
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li')); // HTMLCollection(4) [li, li, li, li]
</script>
</body>H5 新增获取元素方式
根据类名获取元素
- document.getElementsByClassName('类名')
- 根据类名返回元素对象集合
<body>
<div class="box"></div>
<div class="box"></div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// getElementsByClassName()
// 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs); // HTMLCollection(2) [div.box, div.box]
</script>
</body>根据指定选择器返回第一个元素对象
- document.querySelector('选择器')
- 根据指定选择器返回第一个元素对象
<body>
<div class="box"></div>
<div class="box"></div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// document.querySelector('选择器')
// 返回指定选择器的第一个元素对象
// ('选择器') 需要加符号 类(.) id (#) 标签()
var firstBox = document.querySelector('.box'); // 类选择器
console.log(firstBox);
var nav = document.querySelector('#nav'); // id 选择器
console.log(nav);
var li = document.querySelector('li'); // 标签选择器
console.log(li);
</script>根据指定选择器返回
- document.querySelectorAll('选择器')
- 返回指定选择器的所有元素对象集合
<body>
<div class="box"></div>
<div class="box"></div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// document.querySelectorAll('选择器')
// 返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box'); // NodeList(2) [div.box, div.box]
console.log(allBox);
var Allli = document.querySelectorAll('li'); // NodeList(2) [li, li]
console.log(Allli);
</script>
</body>总结
- document.getElementsByClassName('类名') 根据类名返回元素对象集合
- document.querySelector('选择器') 根据指定选择器返回第一个元素对象
- document.querySelectorAll('选择器') 返回指定选择器的所有元素对象集合
获取特殊元素（body，html）
获取 body 元素
- var bodyEle = document.body;
<body>
<script>
// 获取 body 元素
var bodyEle = document.body;
// 打印 body 标签
console.log(bodyEle);
// 返回的是一个元素对象
console.dir(bodyEle);
</script>
</body>获取 html 元素
- var htmlEle = document.documentElement;
<body>
<script>
// 获取 html 元素
var htmlEle = document.documentElement;
// 打印 html 标签
console.log(htmlEle);
// 返回的是一个元素对象
console.dir(htmlEle);
</script>
</body>事件基础
事件概述
- JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为
- 简单理解：触发 --- 响应的机制
- 网页中每一个元素都可以产生某些可以触发 JavaScript 的事件
- 例如：我们可以在用户点击某个按钮时产生一个事件，然后去执行某些操作
事件三要素
- 事件由三部分组成：事件源、事件类型、事件处理程序
- 事件源：事件被触发的对象 谁 比如：按钮
- 事件类型：事件触发的方式 什么事件
- 比如：鼠标点击（onclick），鼠标经过，鼠标按下
- 事件处理程序：通过函数赋值的方式完成
<body>
<button id="btn">炸弹</button>
<script>
// 点击一个按钮,弹出对话框
// 事件由三部分组成: 事件源 事件类型 事件处理程序
// 上述三部分也被称为事件三要素
// 1.事件源:事件被触发的对象 谁 按钮
var btn = document.getElementById('btn');
// 2.事件类型:如何触发 什么事件
// 比如鼠标点击(onclick) 鼠标经过 鼠标按下
// 3.事件处理程序:通过一个函数赋值的方式 完成
btn.onclick = function() {
alert('boom!');
}
</script>
</body>执行事件的步骤
- 获取事件源
- 注册事件（绑定事件）
- 添加事件处理程序（采取函数赋值形式）
<body>
<div>点击div</div>
<script>
// 执行事件步骤
// 点击 div， 控制台输出 'div 已被选中'
// 1.获取事件源
var div = document.querySelector('div');
// 2.注册事件 绑定事件
// div.onclick
// 3.添加事件处理程序
div.onclick = function() {
alert('div 被选中了！');
}
</script>
</body>常见的鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
分析事件三要素
- 下拉事件三要素
- 关闭广告三要素
操作元素
- JavaScript 的 DOM 操作可以改变网页内容、结构和样式
- 可以利用 DOM 操作元素来改变元素中的内容、属性等
- 注意以下都是属性
改变元素的内容
- element.innerText
- 从起始位置到终止位置的内容，但去除 html 标签，同时空格和换行也会去掉
<body>
<button>显示当前时间</button>
<div>0000-00-00</div>
<p>现在是北京时间：</p>
<script>
// 点击按钮，div 中的内容会改变
// 1.获取事件源（元素）
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2.注册事件
// btn.onclick
// 3.添加事件处理程序
btn.onclick = function() {
// div.innerText = '2021-07-19';
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 days = arr[date.getDay()];
var str = '日期：' + year + '年' + month + '月' + dates + '日 ' + days;
return str;
}
function getTime() {
var time = new Date();
// 输出当前时间：时分秒
var hours = time.getHours();
hours = hours < 10 ? '0' + hours : hours;
var minutes = time.getMinutes();
minutes = minutes < 10 ? '0' + minutes : minutes;
var seconds = time.getSeconds();
seconds = seconds < 10 ? '0' + seconds : seconds;
return hours + ':' + minutes + ':' + seconds;
}
// 元素也可以不添加事件，直接获取
var p = document.querySelector('p');
p.innerText = getTime();
</script>
</body>- element.innerHTML
- 起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行
innerText 和 innerHTML 的区别
- innerText 不识别 html 标签，非标准
- 去除空格和换行
- innerHTML 识别 html 标签，W3C 标准
- 保留空格和换行
- innnerHTML 更常用
<body>
<div></div>
<p>
飞流直下三千尺
<span>1234567</span>
</p>
<script>
// interText 和 innerHTML 的区别
// 1.innerText 不识别 html 标签 非标准
// 去除空格和换行
var div = document.querySelector('div');
div.innerText = '<strong>今天是</strong> 2021-07-19';
// 2.innerHTML 识别 html 标签 W3C标准
// 保留空格和换行
div.innerHTML = '<strong>现在是北京时间：</strong> 18点整';
// 这两个属性都是可读写的，除了可以给它们赋值外，还可以获取元素的内容
var p = document.querySelector('p');
console.log(p.innerText); // 飞流直下三千尺 1234567
console.log(p.innerHTML);
// 飞流直下三千尺
// <span>1234567</span>
</script>
</body>常用元素的属性操作
- innerText、innerHTML：改变元素内容
- src、href：图片和链接
- id、alt、title
修改元素属性
- img.src = '图片地址';
- img.title = '鼠标移至图片上现实的文字内容';
<body>
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button><br>
<img src="images/ldh.png" alt="" title="刘德华">
<script>
// 修改元素属性 src
// 1.获取元素
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
// 2.注册事件
// zxy.onclick
// 3.添加事件处理程序
zxy.onclick = function() {
// 修改 img 的 src 属性
img.src = 'images/zxy.png';
// 修改 img 的 title 属性
img.title = '张学友';
}
ldh.onclick = function() {
img.src = 'images/ldh.png';
img.title = '刘德华';
}
</script>
</body>
案例：分时显示不同图片，显示不同的问候语
- 根据系统不同时间来判断，所以需要用到日期内置对象
- 利用多分支语句来设置不同的图片
- 需要一个图片，并且根据时间修改图片，需要操作元素 img 的 src 属性
- 需要一个 div 元素,显示不同的问候语,修改元素内容即可
<body>
<img src="images/s.gif" alt="">
<div>Good morning</div>
<script>
// 根据系统不同时间来判断，所以需要用到日期内置对象
// 利用多分支语句来设置不同的图片
// 需要一个图片，并且根据时间修改图片，需要操作元素 img 的 src 属性
// 需要一个 div 元素,显示不同的问候语,修改元素内容即可
// 获取元素
var img = document.querySelector('img');
var div = document.querySelector('div');
// 得到当前的小时数
var date = new Date();
var hours = date.getHours();
// 判断小时,改变图片和文字信息
if (hours < 12) {
img.src = 'images/s.gif';
div.innerHTML = '一日之计在于晨,加油!';
} else if (hours < 19) {
img.src = 'images.x.gif';
div.innerHTML = '奋斗在此时,前进吧!';
} else {
img.src = 'images/w.gif';
div.innerHTML = '晚安,好梦!';
}
</script>
</body>修改表单元素
- 利用 DOM 可以操作如下表单元素的属性
- type、value、checked、selected、disabled（被禁用）
- 表单元素的值是通过 value 属性进行更改的
- 比如：input.value = '正在搜索...';
<body>
<input type="text" value="输入内容">
<button>按钮</button>
<script>
// 表单元素的值是通过 value 属性进行更改
// 表单元素包括:type、value、checked、selected、disabled 等
// 1.获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2.注册事件
// 3.添加事件处理程序
btn.onclick = function() {
// input.innerHTML = '正在搜索...'; innerHTML 是普通盒子才有的操作;比如 div, p 等标签
// 表单中的元素值是通过 value 值修改的
input.value = '正在搜索...';
// 想要某个表单元素被禁用,不能再点击 disabled
// btn.disabled = true;
this.disabled = true;
// this 指向的是事件函数的调用者
// btn调用此事件函数,因此 this 指向 btn
}
</script>
</body>
仿京东显示隐藏密码明文案例
案例分析
- 核心思路：点击眼睛按钮，把密码框改为文本框
- 一个按钮两个状态，点击一次，切换为文本框；在点击一次，切换为密码框
- 算法：利用一个 flag 变量
- 判断 flag 的值，如果是 1 就切换为文本框，flag = 0
- 如果是 0 就切换为密码框，flag = 1
<body>
<div class="box">
<label for="">
<img src="images/close.png" alt="" id="eye">
</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.onmousedown = function() {
// 点击一次之后,flag 值发生变化
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>
</body>
194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
