本文介绍了JavaScript的基础知识，包括其概述、特点、组成以及基础语法，如HTML引入JS、输出方式、变量声明和数据类型。接着深入讲解了函数，包括普通函数和匿名函数，以及事件处理，如常用事件和事件绑定。此外，还涉及了BOM中的Window对象和Location对象。最后，探讨了DOM操作，如获取元素、操作内容和属性以及样式。
目录
1JavaScript概述
作用：浏览器和用户互动,提供用户的体验度
基于事件驱动模式
1.1特点
-
js源码不需要编译，浏览器可以直接解释运行 , 解释型语言。
-
js是弱类型语言，js变量声明不需要指明类型。
1.2JavaScript组成
| 组成部分 | 作用 |
| ECMA Script | 构成了JS核心的语法基础 |
| BOM | Browser Object Model 浏览器对象模型，用来操作浏览器上的对象,例如:地址栏,历史,窗口等 |
| DOM | Document Object Model 文档对象模型，用来操作网页中的元素（标签） |
2JavaScript基础语法
2.1HTML引入JS
1.内嵌式
书写一个标签<script type="text/javascript"> 代码 </script> 表示标签体内部都是javascript内容
2.外联式 抽取js代码 标签体内部不允许书写任何内容
<script src="js/demo.js"></script>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML引入JS</title>
<!--内嵌式-->
<script>
alert("1");
</script>
<!--外联式-->
<script src="js/demo.js">
alert(3);
</script>
</head>
<body>
</body>
</html>2.2JS三种输出方式
1. 浏览器弹框输出字符
2. 输出html内容到页面
3. 输出到浏览器控制台
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JS三种输出方式</title>
<script>
/*浏览器弹框输出字符*/
alert("我是一个警告框");
/*输出html内容到页面*/
document.write("我要输出内容到浏览器上");
/*输出到浏览器控制台*/
console.log("我要输出到浏览器控制台上");
</script>
</head>
<body>
</body>
</html>2.3JS变量声明
java是强类型语言，注重变量的定义，所以在java中定义变量类型的方式如下：
// 整型
int i = 1314;
// 浮点型
double d = 521.1314;
// 字符型
char c ='c';
// 字符串型
String str = "我爱学习";
//布尔型
boolean b = true;
// 常量
final Integer PI = 3.14；
js是弱类型语言，不注重变量的定义，所以在js中定义变量的类型方式如下：
方式1:
let 变量名 = 值;
方式2:
let 变量名;
变量名=值;常量声明:
const 变量名 = 值;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JS变量声明</title>
</head>
<body>
<script>
// String str = "我爱学习";
let str = "我爱学习";
//console.log(str);
// int i = 1314;
let i = 1314;
// double d = 521.1314;
let d = 521.1314;
// final Integer PI = 3.14;
const PI = 3.14;
// boolean b = true;
let b = true;
b = "abc";
let num = 10;
{
let num = 15;
}
alert(num);//10
</script>
</body>
</html>2.4JS数据类型
js与java一样，数据类型也分为基本数据类型（原始数据类型）和引用数据类型
原始数据类型
String:用""或者''引起来的内容
Number:一切数字都是数字
Boolean:true和false
Null:null
Undefined:undefined
当变量已声明未赋值的时候,值就是undefined
若一个变量去接受一个没有返回值的方法时候,此变量的值就是undefined
引用数据类型
数组,日期,数学,字符串,布尔值,正则,自定义的对象 都是引用数据类型
可以通过typeof 运算符判断一个变量的数据类型
typeof 变量名
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JS数据类型</title>
<script>
/**
* 块注释
*/
//行注释
//js 的数据类型有五种 string 字符串 number 数字 boolean 布尔 Object 对象 undefined 未定义:
let str = "abc" ;//string 字符串 没有字符和字符串区分
document.write( typeof(str) +"<br/>" )
str = 'abc' ;//string 字符串
document.write( typeof(str) +"<br/>" )
str = 123;//number 数字 没有整数和浮点数区分
document.write( typeof(str) +"<br/>" )
str = 123.123;//number 数字
document.write( typeof(str) +"<br/>" )
str= true;//boolean
document.write( typeof(str) +"<br/>" )
//日期对象
let myDate = new Date();
document.write( typeof(myDate) +"<br/>" )
//undefined 未定义 : 当一个变量没有声明或者 声明之后没有给值的情况下 就是未定义的数据类型
let xxxx;
document.write( typeof(xxxx) +"<br/>")
</script>
</head>
<body>
</body>
</html>2.5JS运算符
1. 算数运算符
+ - * / % ++ --
2. 赋值运算符
= += -= *= /=
3. 比较运算符
> < ==(===) !=(!==)
4. 逻辑运算符
&& || !
5. 三元（目）运算符
条件表达式？为真:为假
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JS运算符</title>
</head>
<body>
<script>
// 算数运算符 除法保留小数
let num = 5/2;
console.log(num);
// 比较运算符
console.log( 5=="5" ); //js 的==号表示 值等
console.log( 5==="5" ); //js 的==号表示 全等表示值和类型都必须一致
console.log( 1>0 ?"大于" : "小于");
</script>
</body>
</html>2.6JS流程控制
条件判断：
1. if判断
if (条件表达式) {
代码块;
} else if(条件表达式) {
代码块;
} else {
代码块;
}
2. switch判断
switch(条件表达式){
case 满足条件1 :
代码块 break;
case 满足条件2 :
代码块 break;
default:
默认代码块;
}
字符串有值有true
对象有被实例化为true
当值为undefined 为false
1为true 0为false
条件表达式中，不为默认值就为true
<script>
let myDate = new Date();
let myUndefined ;
//js中的条件判断 支持自动类型转换
//支持条件表达式 字符串有值有true 对象有被实例化为true 当值为undefined 为false 1为true 0为false
//建议写逻辑表达式
if(1>0){
console.log("正确");
}else{
console.log("失败");
}
</script>
循环语句：
1. 普通for循环
for(let i= 0; i<10; i++){
需要执行的代码;
}2. 增强for循环
for(let obj of array){
需要执行的代码;
}
3. 索引for循环
for(let index in array){
需要执行的代码;
}4. while循环
while (条件表达式) {
需要执行的代码;
}
5. do..while循环
do{
需要执行的代码;
}while(条件表达式);
6. break和continue
break: 跳出整个循环
continue：跳出本次循环
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>循环语句</title>
</head>
<body>
<script>
// 准备一个数组
let arr = ["jack" , "rose" , "tom" , "jerry" , "lucy" ];
for(let i = 0 ; i < arr.length ; i++){
//console.log(i);
}
//js中还提供其他的循环
for(let o of arr){
console.log(o); // 遍历出来是数组的值部分
}
for(let o in arr){
console.log(arr[o]); // 遍历出来的是数组的索引
}
</script>
</body>
</html>3JS函数
函数=java中的方法
功能：js函数用于执行特定功能的代码块，为了方便理解也可以称为js方法
3.1普通函数
public 返回值类型 方法的名称(参数列表 String a , int b){
[return 返回值]
}
js中普通函数的声明语法
function 方法的名称(参数列表){
[return 返回值]
}
注意:
1.js中方法参数列表 无需写let 直接写形参即可
2.js中的方法不需要声明返回值 如果有返回值 直接return即可
3.js中没有方法重载 , 一切以方法的名称为主 如果名称重复 后面的覆盖前面
4.js中函数覆盖跟参数无关 跟返回值无关
5.函数的调用跟参数无关
6.js函数中提供获得参数的伪数组对象 arguments -> args
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>普通函数</title>
</head>
<body>
<script>
function demo1(){
alert("demo1 无参");
}
function demo1(a , b){
alert("demo1 有参:" + a + "@@" + b );
}
function demo1(){
for(let i = 0 ; i < arguments.length ; i ++ ){
console.log(arguments[i]);
}
//alert("demo1 没有参数列表:" + a + "@@" + b );
}
demo1("aa" , "bbb" , "cc" , "ddd");
</script>
</body>
</html>3.2匿名函数
声明式函数(普通函数)
function 函数名称(){
[return 返回值]
}
匿名式函数 : 专门给js 事件提供的
let 变量 = function(){
[return 返回值]
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>匿名函数</title>
<script>
//声明了函数
let fn = function(a , b){
alert(a+"@@" +b);
}
fn("aaaa" , "bbbb");
</script>
</head>
<body>
</body>
</html>4JS事件
4.1常用事件
1. 点击事件：
onclick：单击事件
ondblclick：双击事件
2. 焦点事件
onblur：失去焦点
onfocus：元素获得焦点3. 加载事件：
onload：页面加载完成后立即发生。 最后执行的代码 不管此代码写在哪4. 鼠标事件：
onmousedown：鼠标按钮被按下。
onmouseup：鼠标按键被松开。
onmousemove：鼠标被移动。
onmouseover：鼠标移到某元素之上。
onmouseout：鼠标从某元素移开。
5. 键盘事件：
onkeydown：某个键盘按键被按下。
onkeyup：某个键盘按键被松开。
onkeypress：某个键盘按键被按下并松开。6. 改变事件 (一般情况下给select下拉框使用)
onchange：域的内容被改变。7. 表单事件：(现在没有)
onsubmit：提交按钮被点击。
4.2事件绑定
将事件与html标签进行绑定，实现交互功能
声明式绑定：
声明式函数的绑定语法: on事件的名称="函数名称()"
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<!--
声明式函数的绑定 , 在标签体的内部书写事件 , 如果事件太多 代码复杂程度比较高
-->
<script>
function myOver(){
alert("over事件执行");
}
function myClick(){
alert("click事件执行");
}
</script>
</head>
<body>
<input type="button" onmouseover="myOver()" onclick="myClick()" value="普通函数"> <br>
<input type="button" value="匿名函数"> <br>
</body>
</html>匿名式绑定：
匿名式绑定: 函数是直接绑定到事件上
1.获得对象(执行顺序问题)
2.绑定函数(对象.属性=函数)
document: 表示树 整个html
.getElementById("") get获得 element元素 byId 通过id获得对象
跟执行时机有关
代码的执行顺序 从xml 自上而下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
</head>
<body>
<input type="button" value="普通函数"> <br>
<input type="button" id="myBtn" value="匿名函数"> <br>
<script>
let btnObj = document.getElementById("myBtn");
//对象.属性 = 匿名式函数
btnObj.onmouseover = function(){
alert("xxxx");
}
btnObj.onclick=function(){
alert("yyyy")
}
</script>
</body>
</html>页面加载事件：
window 指的是页面的窗口对象
页面加载事件 只有一个
代码的执行顺序 从xml 自上而下
页面加载事件 : 当整个页面所有的内容加载完毕以后 自动执行页面加载事件的函数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script>
window.onload = function(){
let btnObj = document.getElementById("myBtn");
//对象.属性 = 匿名式函数 window.onload = function(){}
btnObj.onmouseover = function(){
alert("xxxx");
}
btnObj.onclick=function(){
alert("yyyy")
}
}
</script>
</head>
<body>
<input type="button" value="普通函数"> <br>
<input type="button" id="myBtn" value="匿名函数"> <br>
</body>
</html>5JS常用内置对象
5.1字符串
1. 构造字符串对象可以使用
双引号,单引号,反引号
2. 字符串方法
substring(startIndex,endIndex) 提取字符串中两个指定的索引号之间的字符
split(delimiter) 把字符串分割为子字符串数组;分割为数组,反array.join(delimiter)
toLowerCase() 把字符串转换为小写
toUpperCase() 把字符串转换为大写
trim() 移除字符串首尾空白
-->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>字符串</title>
</head>
<body>
<script type="text/javascript">
// ------------ 1. 构造字符串对象可以使用 双引号,单引号,反引号,new关键字
//双引号字符串
let s1 = "双引号字符串";
//单引号
let s2 = '单引号字符串';
//反引号字符又叫做`字符串模板` ,模板中可以使用${}来进行插值.
let s3 = `反引号字符串`;
let n = 999;
let s4 = "999="+n;
let s5 = `999=${n}`;
console.log(s5);//"999=999"
// ------------ 2. 字符串方法
//截取字符串
let s11 = "我是中国人,我爱我的祖国";
console.log(s11.substring(6, 9));//截取字符串,从索引6截取到9(不包括9)
//字符串分割为数组
let s12 = "1,2,3,4";
console.log(s12.split(","));//字符串分割为数组
//转换大小写
let s14 = "Qu Jie";
console.log(s14.toUpperCase());//大写
console.log(s14.toLowerCase());//小写
//去除首尾空格
let s15 = " Ha Ha ";
console.log(s15.trim());//去掉首尾空格
</script>
</body>
</html>5.2数组
JS数组的特点:
1.JS是弱类型,数组元素类型任意
2.JS的数组类似于Java的集合,长度可变,所以有时又把js数组叫做数组或集合数组
数组方法：
数组合并 concat
添加元素
数组头添加 unshift
数组尾添加 push
删除元素
数组头删除 shift
数组尾删除 pop
数组元素拼接为字符串 join(分隔符)
排序数组元素 sort
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>数组</title>
</head>
<body>
<script >
//1. 创建数组
let arr1 = ["中国",666,"很好"];
let arr2 = [3,1,7,5];
//2. 数组合并
console.log(arr1.concat(arr2));//数组合并
//3. 添加元素
arr1.unshift("头头");//头添加
console.log(arr1);
arr1.push("尾巴");//尾添加
console.log(arr1);
//4. 删除元素
arr1.shift();//头删除
console.log(arr1);
arr1.pop();//尾删除
console.log(arr1);
//5. 数组元素拼接为字符串
console.log(arr2.join("-"));//拼接 "3-1-7-5"
//6. 排序数组元素
console.log(arr2.sort());//排序 默认是升序
console.log(arr2.sort(function(a,b){return a-b;}));//升序
console.log(arr2.sort(function(a,b){return b-a;}));//降序
</script>
</body>
</html>5.3日期
日期
1. 创建日期对象
new Date() // 当前日期和时间
2. 获取当前时间 转为字符串 格式 yyyy-MM-dd HH:mm:ss.SSS
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>日期</title>
</head>
<body>
<script >
function getDateStr(){
//1. 创建日期对象
let d = new Date();//获取当前时间对象
//2. 获取当前时间 转为字符串 格式 yyyy-MM-dd HH:mm:ss.SSS
let fullYear = d.getFullYear();//获取年
let month = new String(d.getMonth()+1).padStart(2,"0");//获取月
let date = new String(d.getDate()).padStart(2,"0");//日
let hours = new String(d.getHours()).padStart(2,"0");//时
let minutes = new String(d.getMinutes()).padStart(2,"0");//分
let seconds = new String(d.getSeconds()).padStart(2,"0");//秒
let milliseconds = new String(d.getMilliseconds()).padStart(3,"0");//毫秒
let dateStr = `${fullYear}-${month}-${date}
${hours}:${minutes}:${seconds}.${milliseconds}`;
console.log(dateStr);//yyyy-MM-dd HH:mm:ss.SSS
return dateStr;
}
getDateStr();//调用方法
</script>
</body>
</html>5.4数学运算
数学运算
四舍五入 round(x) 把数四舍五入为最接近的整数
向下取整 floor(x) 对数进行下舍入
向上取整 ceil(x) 对数进行上舍入
产生随机数 random() 返回 0 ~ 1 之间的随机数。[0,1) 左闭右开区间,包含0不包含1
产生 [1,10]的随机整数
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>数学运算</title>
</head>
<body>
<script >
let n = 1234.567
//1. 四舍五入取整
console.log(Math.round(n));//1235
//2. 向下取整
console.log(Math.floor(n));//1234
//3. 向上取整
console.log(Math.ceil(n));//1235
4.5-全局函数
//4. 产生随机数
console.log(Math.random());//随机产生 [0,1) 小数
//5. 产生 [1,10]的随机整数
//[0,1) *10 --> [0,10) +1 --> [1,11) floor -- [1,10]
console.log(Math.floor(Math.random() * 10 + 1));//产生 [1,10]的随机整数
</script>
</body>
</html>5.5全局函数
全局函数
1. 字符串转为数字
parseInt();//字符转为整数数字,从左到右遇到非数字停止
parseFloat();//字符转为小数数字,从左到右遇到非数字停止
isNaN();//判断非数字
2. 对数据进行加密
encodeURI() 把字符串编码为 URI。
3. 对加密数据进行解密
decodeURI() 解码某个编码的 URI。
4. 把字符串当做js表达式来执行
eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>全局函数</title>
</head>
<body>
<script >
//1. 字符串转为数字
console.log(parseInt("123.456"));//123
console.log(parseInt("12abc3.456"));//12
console.log(parseFloat("123.456"));//123.456
console.log(parseFloat("123.45abc6"));//123.45
console.log(parseInt("abc123"));//NaN : not a number 不是一个数字
console.log(isNaN("abc123"));//true
//2. 对数据进行编码
let name = "明下午两点偷袭珍珠";
let encodeName = encodeURI(name);//编码
console.log(encodeName);//%E6%98%8E%E4%B8%8B%E5%8D%88%E4%B8%A4%E7%82%B9%E5%81%B7%E8%A
2%AD%E7%8F%8D%E7%8F%A0
//3. 对数据进行解码
let resultStr = decodeURI(encodeName);//解码
console.log(resultStr);//明下午两点偷袭珍珠
//4. 把字符串当做js表达式来执行
let str = "1+2*3-4/2";
let res = eval(str);//把字符串当做js表达式来执行
console.log(res);//5
</script>
</body>
</html>6BOM对象
6.1BOM简介
BOM : brower object model , 浏览器对象模型。
作用：把浏览器抽象成为一个对象模型,我们可以使用js模拟浏览器的一些功能。
6.2Window对象
表示浏览器中打开的窗口，通过窗口可以获取地址栏对象,document对象，还可以对窗口进行一些操作。
三种弹窗：
JS三个弹框
window对象，属于浏览器的窗口对象 ，window可以省略
1.alert() 警告框
2.window.confirm("是否退出?"); //询问框参数: 询问框中显示的文本信息 返回值: true或者false表示选择的确定或取消
3.输入框
let str = window.prompt("1+1=?" , "例如: 4");参数1: 提示信息 参数2: 输入框中的默认值
点击确定:返回输入框中的值，点击取消:返回null
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>js三个弹框</title>
</head>
<body>
<script>
window.alert("123");//警告框
参数: 询问框中显示的文本信息 返回值: true或者false表示选择的确定或取消
let flag = window.confirm("是否退出?"); //询问框
参数1: 提示信息 参数2: 输入框中的默认值
点击确定: 返回输入框中的值 点击取消 返回null
let str = window.prompt("1+1=?" , "例如: 4");//输入框
</script>
</body>
</html>两种定时器：
JS两个定时器 , 相当于闹钟
定时器: 设置时间，定时触发函数
一次性定时器: 多长时间后执行一次函数：let 返回值= window.setTimeout(参数1, 参数2)
参数1:函数的名称 或者是 "函数名称()"
参数2:毫秒值, 设置定时器定时触发的时间
返回值是定时器的编号,当前定时器的唯一标识
周期定时器: 每隔一定的时间执行某个函数let 返回值= window.setInterval(参数1, 参数2)
参数1:函数的名称 或者是 "函数名称()"
参数2:毫秒值, 设置定时器定时触发的时间
返回值是定时器的编号,当前定时器的唯一标识
删除定时器,清除定时器
window.clearTimeout(参数)
window.clearInterval(参数)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>js二个定时器</title>
</head>
<body>
<button id="btn1">取消打印时间</button>
<button id="btn2">取消打印自然数</button>
<script>
//设置一个展示时间的函数
function showTime(){
console.log(new Date().toLocaleString());
}
// 1. 定时5秒之后在控制台打印当前时间
let timer1 = window.setTimeout( showTime ,5000); //标准语法
//let timer2 = window.setTimeout( showTime ,5000); //标准语法
//window.setTimeout( "showTime()" ,3000); 标准语法
//showTime();//调用函数
//window.setTimeout( showTime() ,3000); //错误语法 会直接调用函数 而不是交给定时器
// 2. 点击按钮取消打印时间 先绑定事件 再取消定时器
document.getElementById("btn1").onclick = function(){
window.clearTimeout(timer1);//删除指定编号的定时器
}
// 3. 每隔2秒在控制台打印当前时间
let timer2 = window.setInterval(showTime , 2000);
// 4. 点击按钮取消打印自然数
document.getElementById("btn2").onclick=function(){
window.clearInterval(timer2)
}
</script>
</body>
</html>6.3Location对象
获取location对象:window.location 简写为location
location地址
location也属于window的一个对象 , window又可以省略
location用于管理地址栏的
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>location对象</title>
</head>
<body>
<script>
//获取当前浏览器地址
function addr(){
//获得地址栏
let myHref = location.href;
console.log(myHref);
}
//跳转页面
function jump(){
//将百度的赋值给地址栏 修改地址栏 -> 跳转页面
location.href = "https://www.baidu.com/";
}
document.write(new Date().toLocaleString())
//刷新当前页面
function refresh(){
//reload重新加载 相当于F5刷新页面
location.reload();
}
</script>
<button onclick="addr()">获取当前浏览器地址</button>
<button onclick="refresh()">刷新当前页面</button>
<button onclick="jump()"> 跳转页面(重点)</button>
</body>
</html>7DOM对象
7.1DOM简介
文档对象模型（Document Object Model）
作用：把所有页面标签抽象成为一个Document对象，我们可以使用js动态修改标签及属性内容。
获取文档节点：window.document,可以简写为document
7.2DOM获取元素
第一种：es6之前获取方式
1）获取一个元素
document.getElementById(id属性值)
2）获取多个元素，返回的是数组
document.getElementsByTagName(标签名)
document.getElementsByClassName(class属性值)
document.getElementsByName(name属性值)第二种：es6可根据CSS选择器获取
1）获取一个
document.querySelector(id选择器)
2）获取多个 返回的是数组
document.querySelectorAll(css选择器)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>dom获取元素</title>
</head>
<body>
<form action="#" method="get">
姓名 <input type="text" name="username" id="username" value="德玛西亚"/> <br/>
密码 <input type="password" name="password"> <br/>
生日 <input type="date" name="birthday"><br/>
性别
<input type="radio" name="gender" value="male" class="radio">男 
<input type="radio" name="gender" value="female" class="radio"/>女<br/>
爱好
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头<br/>
头像 <input type="file" name="pic"><br/>
学历
<select name="edu">
<option value="0">请选择</option>
<option value="1">入门</option>
<option value="2">精通</option>
<option value="3">放弃</option>
</select><br/>
简介
<textarea name="userIntro" cols="30" rows="10">默认值</textarea><br/>
<input type="reset" value="清空按钮"/>
<input type="submit" value="提交按钮"/><br/>
</form>
<script>
// 1.获取id="username"的标签对象
let usernameObj = document.querySelector("#username");
console.log(usernameObj.value);
// 2.获取class="radio"的标签对象数组
//let radioArr = document.getElementsByClassName("radio");
let radioArr = document.querySelectorAll(".radio");
//alert(radioArr.length)
// 3.获取所有的option标签对象数组
//document.getElementsByTagName("option");
let optionArr = document.querySelectorAll("option");
//alert(optionArr.length)
// 4.获取name="hobby"的input标签对象数组
//document.getElementsByName("hobby");
let hobbyArr = document.querySelectorAll("[name='hobby']");
//alert(hobbyArr.length);
// 5.获取文件上传选择框
let fileArr = document.querySelectorAll("[type='file']");
alert(fileArr.length);
//alert(fileArr[0])
</script>
</body>
</html>7.3DOM操作内容
1. 获取或者修改元素的纯文本内容
语法：
js对象.innerText;
js对象.innerText="值"
2. 获取或者修改元素的html内容
语法：
js对象.innerHTML;
js对象.innerHTML="值"
3. 获取或者修改包含自身的html内容
语法：
js对象.outerHTML;
js对象.outerHTML="值"
innerText 和 innerHTML 都是操作标签体内部的内容，覆盖原有的内容
innerText: 主要操作的是文本的内容 , 写入标签也认为是文本
innerHTML: 操作的是标签体, 写入标签会被解析
outerText : 将自己修改成xxx内容 写入标签也认为是文本
outerHtml : 将自己修改成xxx内容 写入标签会被解析
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>dom操作内容</title>
<style>
#myDiv{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="myDiv">程序猿最讨厌的四件事：<br>写注释、写文档…… </div>
<script>
let myDiv = document.getElementById('myDiv');
// 1.innerText操作div内容
//myDiv.innerText = "<a href=''>xxxx</a>";
// 2.innerHTML操作div内容
//myDiv.innerHTML = "<a href=''>xxxx</a>";
//追加内容 而不要覆盖
//console.log(myDiv.innerText);
//myDiv.innerText = myDiv.innerText + "<a href=''>xxxx</a>";
//myDiv.innerText += "<a href=''>xxxx</a>";
// 3.outerHTML操作div本身
myDiv.outerHTML = "<span>我是一个span标签</span>";
</script>
</body>
</html>7.4DOM操作属性
1. 获取文本框的值,单选框或复选框的选中状态
语法:
js对象.属性名
2. 给元素设置自定义属性
语法:
js对象.setAttribute(属性名,属性值)
2. 获取元素的自定义属性值
语法:
js对象.getAttribute(属性名)
4. 移除元素的自定义属性
语法:
js对象.removeAttribute(属性名)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>dom操作属性</title>
</head>
<body>
<form action="#" method="get">
姓名 <input type="text" name="username" id="username" value="德玛西亚" /> <br/>
爱好
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头<br/>
<input type="reset" value="清空按钮"/>
<input type="submit" value="提交按钮"/><br/>
</form>
<script>
//对象.属性 或者 对象.属性 ="值"
// 1.获取文本框预定义的属性值
let usernameObj = document.getElementById("username");
console.log(usernameObj.value);
usernameObj.value="比尔吉沃特";
// 2.给文本框设置自定义属性 Attribute 属性 setAttribute(key , value) 设置自定义属性
usernameObj.setAttribute("abc" , "bbbb");
// 3.获取文本框自定义属性 getAttribute(key) 获得属性
let attribute = usernameObj.getAttribute("abc");
console.log(attribute);
// 4.移出文本框自定义属性 removeAttribute(key) 删除属性
usernameObj.removeAttribute("abc");
</script>
</body>
</html>7.5DOM操作样式
1. 设置一个css样式
语法:
js对象.style.样式名='样式值'
js对象.style.样式名;
样式名就是css中样式名,若css样式名中间有"-"的话,去掉"-",把后面单词首字母大写即可
例如:
css:background-color---> js:backgroundColor
2. 批量设置css样式
语法:
js对象.style.cssText='css样式'
3. 通过class设置样式
语法:
js对象.className='class选择器名'
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>dom操作样式</title>
<style>
/*提前设置的样式*/
#p1{ background-color: red;}
.mp {
background-color: lightgray;
font-size: 40px;
color:green;
}
</style>
</head>
<body>
<p id="p1">1. 设置一个css样式</p>
<p id="p2">2. 批量设置css样式</p>
<!--程序运行的过程中 动态的给p3 加入一个css样式-->
<p id="p3" >3. 通过class设置样式</p>
<script>
let p1 = document.getElementById("p1");//获取段落标签
let p2 = document.getElementById("p2");//获取段落标签
let p3 = document.getElementById("p3");//获取段落标签
//对象.style.样式的名称=样式的值 如果涉及到多个单词,去掉横杠 驼峰式命名规则
// 1. 设置一个css样式
p1.style.fontSize = "40px";
p1.style.backgroundColor = "pink";
p1.style.color = "red";
// 2. 批量设置css样式
p2.style.cssText="background-color: lightgray;font-size: 40px;color:green;";
// 3. 通过class设置样式
p3.className="mp";
</script>
</body>
</html>7.6DOM操作元素
可以使用innerHTML进行操作
HTML Dom的操作(参考xml dom的操作)
1. 创建一个标签对象
语法：
document.createElement(标签名称)
2. 给父标签添加一个子标签
语法：
父标签对象.appendChild(子标签对象)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>dom操作元素</title>
</head>
<body>
<ul id="star">
<li>古力娜扎</li>
<li>迪丽热巴</li>
<!--<li>玛尔扎哈</li>-->
</ul>
<script>
// 添加一个新列表项
//基于字符串操作
let ul = document.getElementById("star");
ul.innerHTML += "<li>玛尔扎哈</li>";
//基于面向对象操作
//1.获得对象 <ul></ul>
let ulObj = document.getElementById("star");
//2.创建元素 <li></li>
let liObj = document.createElement("li");
//3.创建文本对象 创建一个文本节点 玛尔扎哈
let textObj = document.createTextNode("玛尔扎哈");
//4.建立关系 在liObj 添加一个孩子元素textObj <li>玛尔扎哈</li>
liObj.appendChild(textObj);
//5.将li添加到 ul中
ulObj.appendChild(liObj);
</script>
</body>
</html>以上就是JavaScript的部分知识点啦，后续会继续补充。各位大佬如发现有知识点错误或者有不同的建议与意见，欢迎评论、私信指正，本人才疏学浅还需向各位大佬学习，还请不吝赐教！在此感谢各位的观看！谢谢！
扫一扫
6325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
