代码的执行顺序
- 如果js代码写在内容之前比如
<script>document.getElementById("box").onclick = function(){alert(456); }</script>
<div id="box">123</div>
就会报错出现
cannot et property onclik of null
意思是不能找到元素。
- 浏览器的执行顺序是从上到下,js如果出现在元素之前,浏览器是先读取js代码,元素还未被解析,所以js代码要写在元素后面,即</body>的后面
- 如果一定要把js代码写在元素之前,那么必须等到整个资源(src引入的资源/js资源href引入的css资源 整个文档)加载完毕 执行代码即可
<script>
window.onload = function(){
document.grtElementById("box").onclick = function(){
alert(123);
}
}
</script>
诡异的alert
- 当alert放在div的上方 开启窗口时,div不加载 点击确定 加载 刷新 消失
- 当alert放在div的下方 开启窗口时,div不加载 点击确定 加载 刷新 消失
在chrome的64版本以上 包括360 QQ浏览器的最新版本,alert不会激活所在的选项卡 火狐浏览器没问题
console.log
- 控制台输出 进行调试,可以写js代码
数值类型 通过console里的typeof
cosole.log(typeof num);
- 数值型 num 包括小数和整数 在js当中小数运算是不精确的 我们不能用作判断
- 字符串 string 字符串用""包裹 字符串之间不能换行 会出现
invalid or unexpected token
表示标点符号错误,多了换行符。``反引号包裹可以换行 - 布尔值 boolean true/false
- function function 没有名字的函数为匿名函数,不能单独使用,可以var命名,也可以
function abc(){}
有名字的函数称为具名函数,使用abc();
函数名加()就算abc()
出现在定义的函数之前也可以执行 - 对象 object 简单的写法为{},实际上是空的一个对象使用new得到的,new Object
var obj = {};
var obj = new Object;
console.log(typeof obj);
6.数组(array) object 数组中可以存放任何数据类型,支持换行书写,简单写法【数据,数据,数据】,实际上是new Array
var arr = [];
alert(arr);
结果弹窗什么都没有
- null 是一个object 表示再找对象但是没找到对象,拿到一个null
- undefined undefined 声明了但是没有定义给值
var u;u= 123;
保留字/关键词
typeof true false Object new null undefined class var alert
操做标签的合法属性
比如id class title href src
如何获取合法属性
获取元素之后直接使用点语法var title = document.getElementById("box").title;
如何修改合法属性
获取元素之后用等号赋值修改已有属性
直接修改document.getElementById("box").title="nnnn"
如果想要获取类名class,需要用className
<div id="box" class="kkk"></div>
<script>
var oBox = document.getElementById("box");
oBox.onclick = function(){
oBox.className = "mybox"
}
</script>
需要注意的是最好一开始就通过id获取到该元素并使用变量,以免之后改变了id值,再使用document.getElementById("box").id="box1"
document.getElementById("box").className
找不到该元素
添加合法属性
等号赋值相当于有则改之无则加勉 document.getElementById("box").title="hello";
操作自定义属性
<div id="stu" name="lisi" age="20" height="180">李四</div>
除了id可以获得元素,其他的拿不到
判断是否存在某个自定义属性
hasAttribute("想要查找的属性名字") 结果是true falseconsole.log(oStu.hasAttribute("name"))
获取属性
getAttribute("")
<script>
var oStu = document.getElementById("stu");
var myAttr = oStu.getAttribute("age");
console.log(myAttr);
</script>
设置自定义属性
setAttribute("") 如果没有设置该属性,就会新增该属性,如果有就会覆盖oStu.setAttribute("age","20");
删除自定义属性
removeAttribute("") oStu.removeAttribute("age");
如果删的时候没有找到,那么就算了
dataset
<div id="stu" data-name="lisi" data-of-birth="1992">lisi</div>
<script>
stu.getAttribute("data-name"); 因为id是唯一的,所以可以直接这样写,但不规范
var lisi = document.getElementById("box");
console.log(lisi.dataset.name);
console.log(lisi.dataset.ofBirth);//去掉连字符,驼峰命名
//同样可以获取date-name,需要注意的是自定义属性前面加data-
lisi.dataset.age = "20";//添加自定义属性
</script>