今天大概过了一下DOM的基本操作，如何获取元素、事件基础、如何操作元素对象。看着视频学习的，知识量有的大，练习今天下午还没有整完，就练习了一部分的知识点。就大概记录一下今天的学习笔记吧。
DOM的概念
API的中文意思：应用程序编程接口
Web APIS ：DOM（文档）和是BOM（浏览器）
DOM：文档模型对象， 是一个供开发者直接使用的接口，不需要定义的。我们可以通过DOM对网页的内容、结构和样式进行操作。
DOM树
网页中的所有标签都存在与DOM树中，什么是DOM树呢？emmmmmm，就是树状结构嘛。
DOM树由三部分组成：文档、元素、节点
文档：一个页面就是一个文档，DOM中用document 表示
元素：页面中所有的标签都是元素，DOM中用element 表示
节点：网页中所有的内容都是节点(标签、属性、文本、注释等) ，DOM中用node 表示
注意：DOM把以上文档、元素、节点都看成对象
emmmmm，文字总是太枯燥了，反正现在先记住这三点就行了。具体含义，到后面学的多了就知道了。
获取元素
ID获取
getElementById('ID')
标签名获取
getElementByTagName('tagName')
获取的是一个标签名的集合，以伪数组的形式存储
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
我是一个div
</div>
<div>
这里是一个盒子
</div>
<ul id="lis">
<li>知否知否，应是绿肥红瘦</li>
<li>知否知否，应是绿肥红瘦</li>
<li>知否知否，应是绿肥红瘦</li>
</ul>
<ul>
<li>爱前端更爱学习11</li>
<li>爱前端更爱学习22</li>
<li>爱前端更爱学习33</li>
</ul>
<script>
//通过getElementsByTagName()方法 获取的是有一个标签名的集合，以为伪数组的形式存储的
var div = document.getElementsByTagName('div');
console.log(div);
var lis = document.getElementsByTagName('li');
console.log(lis);
// 如果想取出标签集合中的元素对象，可以采用遍历的方式
// 在方法的使用当中，如果是html标签里面的内容改变时，我们的js结构是不需要改变的
for (var i = 0; i < lis.length; i++) {
// lis[i] // 当前元素对象
console.log(lis[i]);
}
</script>
</body>
</html>
h5新增方法
getElementsByClassName('className') 类名---返回的是某些元素的集合
querySelector('selector') 返回指定选择器的第一个元素对象
querySelectorAll('selector') 返回指定选择器的所有元素对象
特殊元素的获取方式 body html
document.body 获取body元素对象
document.doucumentElement 获取html元素对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
我是一个div
</div>
<ul class="lis">
<li>知否知否，应是绿肥红瘦</li>
<li>知否知否，应是绿肥红瘦</li>
<li>知否知否，应是绿肥红瘦</li>
</ul>
<p class="meage">我是一个段落p1</p>
<p class="lis">p2</p>
<p>p3</p>
<script>
// 1.getElementsByClassName()方法返回的是某些元素的集合 通过获取元素的类名获取元素
var lisByClass = document.getElementsByClassName('lis');
console.log(lisByClass);
// 2.querySelector()通过获取选择器 获取元素 只能获取指定选择器的第一个元素对象
// 类 .类名
// id #i名
var p = document.querySelector('p');
console.log(p); // 获取了第一个p
// 3.querySelectorAll() 获取的是指定选择器的所有对象
var ps = document.querySelectorAll('p');
console.log(ps); // 获取了文档中所有的p标签,是一个集合
// 获取body 和html
var body = document.body;
var html = document.documentElement;
console.log(body);
console.log(html);
</script>
</body>
</html>
事件基础
事件三要素
事件源: 事件被触发的对象----是谁
事件类型: 如何触发什么事件----比如:鼠标经过 鼠标点击(onclik) 敲击键盘等事件
事件处理程序: 通过一个函数赋值的方式完成
执行事件步骤
获取事件源---注册事件(绑定事件)---添加事件处理程序(函数)
比如: 点击按钮,关闭窗口
事件源: 按钮被点击 窗口盒子不显示， 事件源是按钮和窗口盒子
事件类型: 被点击 onclick事件
事件处理程序: function(){}
案例：点击div，控制台输出“我被点击了”
<div class="box">123</div>
<script>
// 点击div 控制台显示 我被选中了
// 1.获取事件源
var div = document.querySelector('.box');
// 2. 注册事件
// div.onclick
// 3. 事件处理程序
div.onclick = function () {
console.log('我被选中了');
}
</script>开关灯案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>开关灯</button>
<script>
// 默认为开灯，点击按钮，是关灯，再点击是开灯
// 一个按钮两个状态 是一个算法：用一个变量flag，判断flag的值，
// 如果是1就切换为黑色 flag置0
// 如果是0就切换为白色，flag置1
// 1.获取事件源 按钮被点击 body背景发生变化
var btn = document.querySelector('button');
var body = document.body;
var flag = 0;
// 2.注册事件 事件处理程序
// 点击按钮时 出发事件
btn.onclick = function () {
// flag = 0 背景为黑色 关灯
// flag = 1 背景为白色 开灯
if (flag == 0) {
body.style.backgroundColor = 'black';
flag = 1;
} else {
body.style.backgroundColor = '#fff';
flag = 0;
}
}
</script>
</body>
</html>
效果：点击一下关灯，再点一下开灯，再点关灯.........这样可以一直点。
一个按钮两个状态 体现了一个算法：用一个变量flag，判断flag的值
如果是1就切换为黑色 flag置0
如果是0就切换为白色 flag置1
操作对象
操作对象是DOM的核心重点。DOM操作可以改变网页的内容、结构、样式。可以利用DOM操作元素来改变元素里面的内容。以下介绍的都是对象的属性。
改变元素内容
element.innerText = '更改后的内容'
识别不了HTML标签 去除空格和换行 非标准
element.innerHTML = '更改后的内容'
可以识别HTML标签 在控制台输出是时可以输出标签
保留空格和换行
W3C标准 推荐使用
innerText方法和inner HTML方法的主要区别：
常用元素的属性操作
src、href、title、alt等属性的操作。今天主要学习的是src的操作。
案例：点击按钮，实现图片的转换；不同时间，显示不同的照片和问候语
emmmmm，这案例吧，应该分开做的，为了放便我放一起了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 200px;
}
div {
margin-top: 20px;
}
button {
margin-left: 20px;
}
</style>
</head>
<body>
<!-- 实现图片的切换 -->
<button class="lyf">李易峰</button>
<button class="xzq">薛之谦</button>
<div>
<img src="./img/lyf.jpg" title="李易峰">
<p>亲，早上好，记得写代码</p>
</div>
<script>
// 点击按钮， 实现图片的转换
// 1.获取事件源
var lyf = document.querySelector('.lyf'); //类选择器
var xzq = document.querySelector('.xzq');
var img = document.querySelector('img'); // 元素选择器
// 2.注册事件 程序处理
lyf.onclick = function () {
img.src = './img/lyf.jpg';
img.title = '李易峰';
}
xzq.onclick = function () {
img.src = './img/xzq.jpg';
img.title = '薛之谦';
}
// 案例中出现的错误
// onclick写错
// 获取元素方法使用不熟练
// 事件源没有找全
// 实现分时显示不同图片，显示不同问候语 ----- 改变的是元素的内容
var toTalk = document.querySelector('p');
var zly = document.querySelector('.zly');
var date = new Date();
var hour = date.getHours();
if (hour < 12) {
img.src = './img/lyf.jpg';
toTalk.innerHTML = '李易峰问候：亲，早上好，记得写代码';
} else if (hour < 17) {
img.src = './img/xzq.jpg';
toTalk.innerHTML = '薛之谦问候：亲，下午好，记得写代码'
} else {
img.src = './img/zly.jpg';
toTalk.innerHTML = '赵丽颖问候：亲，晚上好，记得写代码'
}
</script>
</body>
</html>点击显示图片切换：不会弄动图，要是想看看效果的话，随便在网上找个图换个图试试就行。
根据当下时间自动切换图片和问候语：因为现在是晚上所以显示晚上
今天就学习了这么多，表单属于的操作和对样式的具体操作，今天是整不完了，明天再继续完善。
加油加油！！！ 每天进步一点点。
294
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
