下午：
js是网络脚本是写在网页上的要和html配合起来
想要找到网页上的div元素由于id是元素的唯一标识，只有通过id才能找到唯一确定的元素，要是通过其他途径（根据标签 name cass）找,找到的就是一堆div元素。
这时要找到div元素就要用到一个对象document（DOM文档）javas当中有两个大类一个是DOM(是document的文档对象模型) BOM。这节课主要讲DOM。整个网页都可以叫做文档，网页上所有的标签都可以叫做文档。通过id就可以找到网页上的标签。
以下就用三种方式来获取网页上的元素（让js与html有联系）
- 传统的写法
点击查看代码
<body>
<!-- 通过id去获取HTML元素 id是唯一标识只能获取一个 -->
<div id="div1">我是div</div>
<script>//具有返回值，返回值是div
let div = document.getElementById('div1');
console.log(div);
</script>
</body>
点击查看代码
<body>
<div id="div1" class="aaa">我是div</div>
<script>
// 通过class类来获取HTML元素，会有很多个成一个集合，我们把他们看成数组
let divs= document.getElementsByClassName('aaa');
console.log('divs');
//如果想要拿到一个那就用
//console.log(divs[0])；
</script>
</body>
点击查看代码
<body>
<div id="div1" class="aaa">我是div</div>
<script>
// 通过tag标签来获取HTML元素，会有很多个成一个集合，我们把他们看成数组
let divs= document.getElementsByTagName('div');
console.log('divs');
//如果想要拿到一个那就用
//console.log(divs[0])；
</script>
</body>
获取网页上的元素的属性
点击查看代码
<body>
<div id="div1" class="aaa">我是div</div>
<script>
//获取元素的属性
let div= document.getElementById('div1');
console.log(div.id);
</script>
</body>
- 新的写法
- 第一种
点击查看代码
<body>
<div id="div1" class="aaa">我是div</div>
<script>
//新写法 通过(标签，id#，类.)选择器来获取HTML元素,只能抓到**一个**元素
let div=document.querySelector('div');
console.log(div);
</script>
</body>
**注意：若有两个标签同时都使用了标签选择器，则再用标签选择器来获取元素时只能获取到第一个。**
- 第二种
点击查看代码
<body>
<div id="div1" class="aaa">我是div1</div>
<div id="div1" class="aaa">我是div2</div>
<script>
//新写法 通过(标签，id，类)选择器来获取HTML一堆元素
let div3=document.querySelectorAll('div');
console.log(div3[0]);
</script>
</body>
提出问题：拿到这些元素要干什么？
答：获取元素内部的文本，改变这个元素的内容 可以使用innerText和innerHTML来改变元素的内容
点击查看代码
<body>
<div id="div1" class="aaa">我是div1</div>
<div id="div2" class="aaa">我是div2</div>
<script>
//获取元素后我们可以获得内部文本并修改元素文本的内容
let div=document.querySelector('#div1');
// div.innerText="我是js生成的";
console.log(div.innerText);
</script>
</body>
点击查看代码
<body>
<div id="div1" class="aaa">我是div1</div>
<div id="div2" class="aaa">我是div2</div>
<script>
//获取元素后我们可以获得内部文本并修改元素文本的内容,innerHTML认识标签，innerText不认识标签
let div=document.querySelector('#div1');
div.innerHTML="<b>我是加粗的</b>";
</script>
</body>
innerText和innerHTML的区别是：innerText不认识标签只能获取到元素内部文本并修改文本，innerHTML认识标签，在获取到元素内部文本并修改文本，同时可以获取到HTML标签。都是往两个标签的中间放值，例如
往这里放值
.
假设有一个文本框，想要往文本框里放东西，应该怎么办？
1.我们得先拿到文本框（这里是通过标签选择器来获取）2.用标签引用value
点击查看代码
<body>
<input type="text" id="=username">
<script>
let input=document.querySelector('input');
input.value="我是js放进文本框的";
</script>
</body>
事件
事件就是当我们和HTML标签元素发生交互时产生的行为。
- 单机事件：onclick
- 双击事件：ondbclick
- 失去焦点：onblur一般出用在文本框中
- 获得焦点：onfocus一般出用在文本框中
- 改变： onchange 当元素内容发生改变的时候，所触发的事件
- 加载： onl oad 在元素加载的时候所触发的事件 一般加在body上
现页面上有一个按钮，有一个需求：点击按钮就会有一个弹窗添加事件单机事件
今天只讲一种添加事件的方式——在标签中添加onclick….
当设置了对应的事件之后会执行目标函数。
例子1：一点击按钮就会执行函数跳出一个弹窗
点击查看代码
<body>
<input type="text" id="=username">
<button type="button" onclick="">按钮</button>
<script>
function jump(){
alert('按钮被点击了');
}
</script>
</body>
例子2.失去焦点和获得焦点
点击查看代码
<body>
<input type="text" id="=username" onblur="valid()" onfocus="get()">
<!-- <button type="button" onclick="jump()">按钮</button> -->
<script>
// function jump(){
// alert('按钮被点击了');
// }
function valid(){
console.log('失去了焦点');
}
function get(){
console.log('获得了焦点');
}
</script>
</body>
例子3. onchange 当元素内容发生改变的时候，所触发的事件
例子4.onload 在元素加载的时候所触发的事件 一般加在body上
点击查看代码
<body onl oad="load()">
<!-- 不要出现双引套双引，要么双引套单引，要么单引号套双引号 -->
<input type="button" ondblclick="jump(1)" value="按钮">
<script>
function jump(a){
alert('按钮被点击了.....'+a);
}
</script>
</body>
例子5.需求：当用户名admin，密码123456时，提示登录成功！ 否则，提示用户名或密码错误
点击查看代码
<body>
<p>
账号：<input type="text" id="username">
</p>
<p>
密码：<input type="password" id="password">
</p>
<p>
<input type="button" value="登录" onclick="get()" >
</p>
<script>
// 需求：当用户名==admin，密码==123456时，提示登录成功！
// 否则，提示用户名或密码错误
/* 思路：给按钮添加单击事件
当点击按钮时，获取用户名和密码框输入的值，
然后进行判断，if()登录成功else用户名或密码错误！
15分钟！
*/
function get(){
let user= document.querySelector('#username').value;
let pass= document.querySelector('#password').value
if (user=="admin"&&pass==123456) {
alert('登录成功');
} else {
alert('用户名或密码错误');
}
}
</script>
</body>
例子6.需求：在用户名的文本框中输入用户名，
如果用户名为admin，则在span中显示用户名已被占用
否则，显示用户名可用！
点击查看代码
<body>
用户名：<input type="text" id="username" onblur="valid()">
<span></span>
<script>
/*
分析：
需要给文本框添加onchange，onblur，出发函数
需要向span中写入内容！innerText innerHTML
*/
function valid(){
let username = document.querySelector("#username").value;
let span = document.querySelector("span");
if(username == "admin"){
// 用户名已被占用
span.innerText = "用户名已被占用！"
}else {
// 用户名可用
span.innerText = "用户名可用！";
}
}
</script>
</body>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/274253.html