由于(html标签)普通标签不具有交互能力的,要利用js做交互,所以引申到要操作标签的内容
获取对应的标签节点,有多少种方式?
通过DOM提供的方法/API
通过id来获取对象/标签节点,ps通过id获取对象,前面一定是document开头的
document.getElementById("id") --->对象
ps.方法后面一定要加上括号,那个获取元素就相当于方法
document.getElementById(id) //这个写法是错的,因为直接id相当于是变量,会报错的
document.getElementById("id") //正确写法
拿到对象之后,要干嘛.并没有表达要做什么,(你生了个娃,你没教他去上学,他会去上学吗?)
所以涉及到标签的操作/事件的讲解(点击事件)
document.getElementById("box").onclick=function(){alert(1);}
innerHTML和innerText的区别
innerHTML:获取标签节点的内容/获取标签节点的操作权限
能解析标签
innerText:获取文本内容,会以文本的形式将标签展示出来
不能解析标签
等号问题
在js里面,遇到等号,要先看等号的右边,右边读完才进行赋值。
document.getElementById("btn").onclick=function(){
document.getElementById("btn").innerHTML="我真帅";
document.getElementById("btn").style.color="blue";
document.getElementById("btn").style.backgroundColor="red";
}
//注意:复合样式-号连字符,在js使用的时候要变成驼峰命名
变量
假如你使用的时候,可能要操作一堆属性,每次都要获取一次,好蠢哦,写很多重复的代码 —>变量
假设你有个同学他的名字非常长,每次叫他的时候,经过他同意之后,给他取给外号(变量),当你叫他的时候,直接叫他的外号。
var —>用于声明/注册变量
变量命名:
- 严格区分大小写(注意大小写)
- 见名知意(尽量反应出那个东西代表含义)
- 可以使用$,_字母,数字,但是不能以数字开头
- 尽量不要使用中文作为变量名(虽然是不会报错,不推荐使用)
- 不能使用关键字(已经存在的/正在使用)、保留字。 保留字(备胎,class):当前版本可能没有特殊含义,但是以后会有。
<button id="btn"></button>
var btn=document.getElementById("btn");
btn.onclick=function(){
btn.innerHTML="我真帅";
btn.style.color="red";
btn.style.backgroundColor="red"; //style是来操作行内样式
}
注意事项
- 所有变量必须是先声明,才能够使用,变量不一定要马上赋值
- (不知道会用到什么变量)可以先声明变量不赋值,是合法,符合语法规则
- 每使用一个变量的时候,而是使用它代表的值
- 一个变量只能声明一次,不要重复声明
var goudan=undfined; //后台悄悄的赋值undfined
var goudan; dachui; --->错误的,因为分号在js里面代表的是结束
var goudan;
var dachui; //--->简写 var goudan,dachui,baiyun;
var baiyun;
//换行--->为了代码结构更清晰,更明了(美观)
注释
单行注释 //
多行注释 /**/
js里的系统自带的弹窗
str代表字符串
alert(str); 只有确定按钮,没有返回值(返回默认undfined 没有意义)
confirm(str); 比alert多一个取消按钮,点确定返回ture,取消返回false
prompt(str,str1); 比confirm还要多一个输入框,点确定返回输入框的内容,点取消返回null
第二个参数,用来显示输入框的默认值。
confirm("123") //执行完之后,就代表它的返回值,需要标记,我们就用一个变量存起来
ture -->真
false -->假
null -->空
关于引入js的方式可能存在一些问题
scipt标签用来引入外部js时,script里面的js代码不会被解析
head结束标签之前,引入外部js时,会报错
- Cannot set property ‘onclick’ of null,表示不能给一个null设置一个属性
- 原因如下,因为文档是从上往下解析,然后读到js文件,body里面的内容还没有获取到,结果就是一个空对象
那问题来了,如果一定要head结束标签之前引入外部js,又怎样做到不报错?
方法一:使用window.onload,等整个文档加载完成之后,再执行外部js的代码
//在外部js写这些
window.onload=function(){
//code
};
方法二:让外部js不去触发window.onload,但是等你的资源加载完成再执行,也可以使用下面的方法
<script src="demo1.js" defer="defer"></script>
//等一会再加载,延迟加载,具体要延迟多久?同样会推迟到整个资源加载完之前,一定会在window.onload之前加载
比较优先级/权重/谁最先执行
执行顺序:3–>2–>1
//demo1.js使用window.onload
<script src="demo1.js"></script> //1
//demo2.js使用defer
<script src="demo2.js" defer="defer"></script> //2
<script> //3
alert(1)
</script>