《JS—Dom》

最新推荐文章于 2024-07-25 09:24:40 发布

游如鑫

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量29

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2303_78171667/article/details/134291661

版权

1_Dom简介

什么是API？

应用程序编程接口（Application Programming Interface，API）是软件系统预先定义的接口，

用于软件系统不同组成部分的衔接。每一种开发语言都有自己的API。

例如console.log方法。就是JS的一个API。

文档对象模型（Document Object Model，DOM）用于处理HTML文档的编程接口。

翻译：对HTML内部的标签进行处理。

2_如何通过DOM获取元素节点

<body>

<p name="b" class="a">我是p标签</p>

//通过DOM节点获取HTML元素的4种方法每种方法都要掌握.非常相似.

//方法1:通过标签名获取元素

var a = document.getElementsByTagName("h3");

//此时就已经获取到了页面上所有的h3标签注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.

//至于怎么去处理,就是后续的任务.

//方法2:通过class名获取元素

var b = document.getElementsByClassName("a");

//此时就已经获取到了页面上所有的class为a标签注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.

//方法3:通过name获取元素

var c = document.getElementsByName("b");

//此时就已经获取到了页面上所有的class为a标签注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.

//方法4:通过id获取元素因为id是唯一标识符所以返回的是一个元素,可以直接处理

var d = document.getElementById("c");

</script>

</body>

3_如何操作节点

<body>

常见的操作节点的三个属性：

1.innerText表示给标签内部重新赋值或取值这里是文本值

2.innerHtml表示给标签内部重新赋值或取值这里是html值

注意以上2个方法只能作用于非表单元素例如 h标签 a标签 p标签等等

//第三个方法只能作用于表单元素

例如input

方法3： value表示给标签内部重新赋值或取值这里是html值

// var a = document.getElementsByTagName("h3");

// for(var i = 0 ;i<a.length;i++){

// console.log(a[i].innerText);//表示获取各个h3标签内部的文本值

// a[i].innerHTML = "<a href='#'>你好</a>";

// }

// var b = document.getElementsByClassName("a");

// for(var i = 0 ;i<b.length;i++){

// console.log(b[i].innerHTML);//表示获取各个h3标签内部的文本值

// }

var d = document.getElementById("abc");

// d.value = "账号123";

console.log(d.value);

</script>

</body>

4_如何操作节点的样式

<style>

.abcd{

color: red;

background-color: blue;

font-size: 40px;

}

</style>

</head>

<body>

<p id="abc" >你好，我是p标签</p>

var p = document.getElementById("abc");

//如何改变一个节点的样式:

//步骤1.思考需要修改什么样式

//步骤2.去css里面查看该样式的单词

//步骤3.按照提示来

//步骤4.通过节点.style.xxx 表示取值或赋值

//例如我要修改字体颜色

// p.style.color = "red";

// console.log(p.style.color)

//例如我要修改背景色

// p.style.backgroundColor = "green"

//以上写法的缺点: 麻烦每次只能修改一个样式

//所以: 如果样式很多,我们可以先将其封装到一个css里面

p.className = "abcd";//表示给该元素赋予一个class为abcd的属性

</script>

5_js中的事件管理

<style>

img{

width: 200px;

height: 200px;

}

</style>

</head>

<body>

<hr>

<hr>

账号：<input type="text" id="aaa" /> <span id="bbb"></span>

//js中的事件: 用户对前台页面做出的一些操作来触发一些函数

//例如用户的单击双击等等等等

//需求:用户点击id为a的元素弹出一个窗口

//步骤1:获取元素

// 步骤2: 元素.事件名 = function(){代码体}

//步骤3 常见的事件名:

//单击事件 onclick

// document.getElementById("a").onclick = function(){

// alert(123);

// }

// //需求2:给所有的p标签加上点击事件下面的写法是错误的需要遍历

// // document.getElementsByTagName("p");.onclick = function(){

// // alert(123);

// // }

// var p = document.getElementsByTagName("p");

// for(var i = 0 ;i<p.length;i++){

// p[i].onclick = function(){

// alert(456);

// }

//双击事件

// document.getElementById("a").ondblclick = function(){

// alert(123);

// }

//鼠标移入事件悬浮事件

//需求:鼠标放上图片图片就放大2倍鼠标移出就恢复原状

//鼠标移入事件onmouseover

// document.getElementsByTagName("img")[0].onmouseover = function(){

// document.getElementsByTagName("img")[0].style.width = "400px";

// document.getElementsByTagName("img")[0].style.height = "400px";

// }

// //鼠标移出事件onmouseout

// document.getElementsByTagName("img")[0].onmouseout = function(){

// document.getElementsByTagName("img")[0].style.width = "200px";

// document.getElementsByTagName("img")[0].style.height = "200px";

// }

//输入账号,失去焦点就需要数据校验

document.getElementById("aaa").onblur = function(){

var str = document.getElementById("aaa").value;

if(str.length >10){

document.getElementById("bbb").innerText = "长度太长了";

document.getElementById("bbb").style.color = "red";

}else{

document.getElementById("bbb").innerText = "数据合格";

document.getElementById("bbb").style.color = "green";

}

</script>

</body>

6_js的属性

<body>

//js获取元素的属性：

//元素的常见属性: id class src href

//需求:点击按钮让这个a标签的href改成跳转到第二个页面

//需求点击按钮,进入下一张图片

document.getElementById("abc").onclick = function(){

document.getElementById("a").setAttribute("href" , "2_如何通过DOM获取元素节点.html");

document.getElementById('b').setAttribute("src","img/2.PNG");

}

//点击开始点名按钮来回切换

document.getElementById("btn").onclick = function(){

if(document.getElementById("btn").innerText=="开始点名"){

document.getElementById("btn").innerText = "停止点名"

}else{

document.getElementById("btn").innerText = "开始点名"

}

</script>

</body>

7_单击事件的案例

<body>

//需求如下:点击按钮来回展示开始点名或停止点名

//思路:获取到button标签,然后给它赋予一个点击事件.

//接着判断button标签内部的value值.根据值来进行判断.进而修改/

var btn = document.getElementsByTagName("button")[0];

btn.onclick = function(){

//获取button的文本值.

var text = btn.innerText ;

if(text=="开始点名"){

btn.innerText = "停止点名"

}else{

btn.innerText = "开始点名";

}

</script>

</body>

8_双击事件的案例

<style>

div{

width: 230px;

height: 230px;

text-align: center;

border : 1px solid black;

display: none;

}

</style>

</head>

<body>

<button>双击打开登录页面</button>

<div>

账号<input type="text" placeholder="请输入你的账号" /> <br>

密码<input type="password" placeholder="请输入你的密码" /> <br><br><br>

</div>

//思考:浏览器中的弹窗为啥那么好看

//但是我们学习的三个弹窗一个比一个丑

//其实浏览器的弹窗并不是真正的弹窗.

//思路: 就是一个提前绘制好的一个div页面.然后将其隐藏. 当用户触发的时候就蹦出来.实现一个弹窗的效果.

//需求:双击打开登录页面

document.getElementsByTagName("button")[0].ondblclick = function(){

document.getElementsByTagName("div")[0].style.display = "block";

}

document.getElementsByTagName("button")[2].onclick = function(){

document.getElementsByTagName("div")[0].style.display = "none";

}

</script>

</body>

9_迷你版点名系统

<style>

font{

border: 1px solid red ;

}

</style>

</head>

<body>

<hr>

document.getElementById("btn").onclick = function(){

if(document.getElementById("btn").innerText=="开始点名"){

document.getElementById("btn").innerText = "停止点名"

//让5个名字对应的font标签的背景色改变

var r =Math.ceil(Math.random()*5);//(0,5)

document.getElementById(r).style.backgroundColor = "red";

}else{

document.getElementById("btn").innerText = "开始点名"

}

</script>

</body>

10_鼠标移入移出事件

<style>

.a{

width: 200px;

height: 200px;

}

.b{

width: 400px;

height: 400px;

}

</style>

</head>

<body>

//需求鼠标移入图片内部 ,图片放大鼠标移出图片图片还原

var img = document.getElementsByTagName("img")[0];

img.onmouseover = function(){

// img.style.width = "400px";

// img.style.height = "400px";

img.className = "b";

}

img.onmouseout = function(){

// img.style.width = "200px";

// img.style.height = "200px";

img.className = "a";

}

</script>

</body>

11_演示键盘输入事件

<body>

小写字母：<input type="text" id="a" /> <br>

大写字母：<input type="text" id="b" />

//在第一个文本框输入小写字母.下面的文本框默认输出上面的与之对应的大写字母

//思路:给第一个文本框加上键盘输入事件（每敲击一下键盘就触发一下事件）.

//获取第一个文本框的值.然后赋予给第二个文本框

var i1 = document.getElementById("a");

var i2 = document.getElementById("b");

i1.onkeyup = function(){

i2.value = i1.value.toUpperCase();

}

</script>

</body>

12_演示获取焦点和失去焦点事件

<body>

账号：<input type="text" id="a" /> <span id="c"></span> <br>

var username = document.getElementById("a");

var password = document.getElementById("a");

var tip1 = document.getElementById("c");

var tip2 = document.getElementById("d");

//需求:输入账号之后.提示账号输入规则.

//思路给文本框加上获取焦点事件给第一个span标签生产一个提示用于

username.onfocus = function(){

tip1.innerText = "账号的长度要在6-10之间";

tip1.style.color = "red";

}

//需求2:输入完成之后,要判断账号是否符合格式.

//思路:失去焦点之后判断.

username.onblur = function(){

var username123 = username.value;

if (username123.length >=6 && username123.length<=10) {

tip1.innerText = "√";

tip1.style.color = "green";

} else{

tip1.innerText = "X";

tip1.style.color = "red";

}

</script>

</body>

13_复习表单

<body>

<!--

表单：form

应用场景：用户登录、用户注册添加一个商品信息

凡是需要将多个数据打包发送的都可以使用表单。

form表单三大属性:

A.action表示将表单提交给谁。一般放一个URL地址其中#表示不提交

B.method表示表单的提交方式：只有2个选择、1.get 2.post 默认是get。

区别如下：

get的速度快。因为只能携带极少的数据。不安全，会将表单数据全部显示在url地址。是客户端行为（只依赖浏览器）

post的速度慢：因为可以携带理论上无限大的数据。安全。不会将表单数据全部显示在url地址。是服务端行为（依赖服务器）

C.enctype：表示该表单是什么类型的表单。

默认值1： application/x-www-form-urlencoded 表示普通表单所以：绝大部分表单都可以不用加。

可选值2： multipart/form-data 表示文件上传的表单。如果需要文件上传就只能用这个。

可选值3： text/plain 表示大文本类型常用于国家化传输邮件。

如何将表单打包发送给action的路径：

通过提交按钮：以下三种方式均可。一般使用第三种。

1 <button>提交（登录）</button>

2 <button type="submit">登录提交</button>

3 <input type="submit" value="登录提交" />

后台如何获取表单内部的数据。

只需要在表单内部的标签元素中添加name属性即可。（必须要加的，否则获取不到值）

后台只需要根据name来取值。

串讲：button标签的易错事项。

button标签的完整写法：

其中type的取值有3个：

1.submit 默认值表示提交按钮

2.button 可选择表示普通的按钮

3.reset 可选择表示重置按钮

button标签中type属性的默认值是 submit 如果该标签放在form表单则会提交表单。

但是如果没在，就是一个普通的按钮

-->

账号：<input type="text" id="a" name="username" /> <br>

密码：<input type="password" id="b" name="password" /> <br>

</form>

</body>

14_演示表单提交事件

<body>

账号：<input type="text" id="a" /> <span id="c"></span> <br>

密码：<input type="password" id="b" /> <span id="d"></span> <br>

</form>

var username = document.getElementById("a");

var password = document.getElementById("b");

var tip1 = document.getElementById("c");

var tip2 = document.getElementById("d");

var f = document.getElementById("f");

//需求:输入账号之后.提示账号输入规则.

//思路给文本框加上获取焦点事件给第一个span标签生产一个提示用于

username.onfocus = function(){

tip1.innerText = "账号的长度要在6-10之间";

tip1.style.color = "red";

}

//需求2:输入完成之后,要判断账号是否符合格式.

//思路:失去焦点之后判断.

username.onblur = function(){

var username123 = username.value;

if (username123.length >=6 && username123.length<=10) {

tip1.innerText = "√";

tip1.style.color = "green";

} else{

tip1.innerText = "X";

tip1.style.color = "red";

}

password.onfocus = function(){

tip2.innerText = "密码的长度要在6-10之间";

tip2.style.color = "red";

}

//需求2:输入完成之后,要判断账号是否符合格式.

//思路:失去焦点之后判断.

password.onblur = function(){

var password123 = password.value;

if (password123.length >=6 && password123.length<=10) {

tip2.innerText = "√";

tip2.style.color = "green";

} else{

tip2.innerText = "X";

tip2.style.color = "red";

}

//onsubmit和其他的事件有个不同之处. 需要返回值的默认是return true表示提交 return false就表示不提交

f.onsubmit = function(){

if(tip1.innerText=="√" && tip2.innerText=="√" ){

return true;

}else{

alert("请按照要求写");

return false;

}

</script>

</body>

15_下拉菜单事件

<body>

</select>

<option>中国银行卡号111</option>

<option>建设银行卡号222</option>

<option>交通银行卡号333</option>

</select>

// onchange事件: 一般只会作用于下拉框点击下拉框且改变值.

//适用场景: 银行卡的互动. 地址栏的联动

var a = document.getElementById("a");

var b = document.getElementById("b");

//需求实现两个下拉框的联动效果.

//思路:给第一个下拉框加上一个onchange事件

//思路:获取第一个下拉框的第几个元素(下标)

//思路:将上一步的思路的下标赋予给第二个下拉框即可

a.οnchange= function(){

// 如何获取下拉框的下标

// console.log(a.selectedIndex);

b.selectedIndex = a.selectedIndex;

}

b.οnchange= function(){

// 如何获取下拉框的下标

// console.log(a.selectedIndex);

a.selectedIndex = b.selectedIndex;

}

</script>

</body>

16_修改元素的属性

<body>

//html元素是有很多属性的.

//例如 id class name src href

document.getElementsByTagName("button")[0].onclick = function(){

//将xxx元素的aaa属性改成bbb

//xxx.setAttribute("aaa","bbb");

//var a = xxx.getAttribute("aaa");表示xxx的aaa属性的值

// document.getElementsByTagName("img")[0].setAttribute("src","img/2.PNG");

if(document.getElementsByTagName("img")[0].getAttribute("src") == "img/1.PNG" ){

document.getElementsByTagName("img")[0].setAttribute("src","img/2.PNG");

}else{

document.getElementsByTagName("img")[0].setAttribute("src","img/1.PNG");

}

</script>

</body>

17_简化版的轮播图

<style>

img{

width: 100px;

height: 100px;

}

</style>

</head>

<body>

//只要有需求: 每隔一段事件就要作什么事就需要联想到使用定时器

var img = document.getElementsByTagName("img")[0];

//实现图片的替换但是图片的文件名可能不是有规律.

//所以可以将图片的所有文件名路径名存到数组中. 数组是有规律的.

var src_1 = ["img/1.PNG","img/2.PNG","img/3.PNG","img/4.PNG"];

var index = 1;

setInterval(function(){

img.setAttribute("src",src_1[index]);

index++;

if(index==4){

index = 0;

}

},1000);

</script>

</body>

游如鑫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《JS—Dom》

</span> <br>密码：<input type="password" id="b" /> <span id="d"></span> <br>账号：<input type="text" id="a" /> <span id="c">
复制链接

扫一扫