预解析
变量预解析:将声明的变量提升至script标签内的最上面
console.log(a)由于变量的预解析,故此处打印的是undefined var a=10
console.log(a)//由于上面已经进行赋值,故此处打印的是14
函数的预解析
声明式的函数预解析时,整个函数将被提升到script标签内的最上面
赋值式的函数预解析时,将赋值的变量提升到script标签内的最上面,后面的赋值函数忽略
作用域
作用域:全局作用域和局部作用域
全局作用域:整个页面,只有当页面关闭时,全局作用域才会失效
局部作用域:全局作用域中又划分出的小范围的作用域,函数内部可以创建局部作用域,到目前为止,也只有函数内部可以创建局部变量
全局变量可以在函数内部进行访问,但是函数内部定义的变量不能在函数外部进行访问
DOM
获取DOM中的节点,使用的是document对象
获取整个html文档
console.log(document.documentElement)
获取头部head
console.log( document.head)
获取主体body
console.log( document.body)
var body=document.body 获取到了body标签
var div=body.firstElementChild 获取到body中的第一个元素
var lastEle=body. lastElementchildl 获取最后一个元素
通过函数来获取元素
getElementById():通过标签的id属性的值获取到某个标签
console.log( document.getElementById( "uname" ))
getElementsByClassName():根据标签的class属性的值来获取一组标签console.log(document.getElementsByClassName( "item" ) )
getElementsByClassName():根据标签的class属性的值来获取一组标签console.log(document.getElementsByClassName( "item" ) )
getElementsByName():根据标签的name属性的值来获取一组标签console.log(document.getElementsByName( "sex" ))
getElementsByTagName():根据标签名来获取一组标签console.log(document.getElementsByTagName( "div" ))
querySelector():根据标签选择器名称来获取满足条件的并且是遇到的第一个标签
document.querySelector
添加元素
删除元素
删除节点removeChild()
先获取到要删除的标签,然后再调用removeChild()
ul.remove()删除元素本身以及所有子元素
自定义属性:data-***
console.log(div_1.dataset)
console.log(div_1.dataset:index)
属性操作
全选/全不选案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p><input type="checkbox" id="selectAll">全选/全不选</p>
<hr>
<ul class="shop">
<li><input type="checkbox">草莓</li>
<li><input type="checkbox">香蕉</li>
<li><input type="checkbox">葡萄</li>
<li><input type="checkbox">橘子</li>
<li><input type="checkbox">哈密瓜</li>
</ul>
<script>
var selectAll = document.querySelector("#selectAll")
//获取所有的input标签
var inputAll = document.querySelectorAll(".shop input")
console.log(inputAll)
selectAll.onclick = function() {
//alert(selectAll.checked)
//循环遍历出ul中的所有的input标签
for (var i = 0; i < inputAll.length; i++) {
//console.log(inputAll[i])
inputAll[i].checked = selectAll.checked
}
}
//给每一个水果选项绑定一个单机事件
for (var i = 0; i < inputAll.length; i++) {
//绑定一个单机事件
inputAll[i].onclick = function() {
var count = 0; //用来统计选中的input标签的个数
for (var m = 0; m < inputAll.length; m++) {
if (inputAll[m].checked == true) {
count++
}
}
//如果count的值等于水果的个数,全选要选中
if (count == inputAll.length) {
selectAll.checked = true
} else {
selectAll.checked = false
}
}
}
</script>
</body>
</html>
效果
获取class
设置class属性