day57
作者：互联网
（1）变量提升
（2）函数提升
（3）BOM操作
（4）JS选择器
（5）创建、添加、删除、替换
（6）类属性操作
变量提升
定义：
在js中，代码的执行分两步，1、解析 2、依次执行
那么变量提升就是变量声明会被提升到作用域的最顶上去，也就是该变量不管是在作用域的哪个地方声明的，都会提升到自身作用域的最顶上去。
console.log(a) //undefined
var a=111
console.log(a) //111
// 相当于
var a //先声明
console.log(a)
a=111 //再定义
console.log(a)
var x=111
function f1() {
console.log('--->',x) //undefined
var x=222
console.log('===>',x) //222
}
f1()
var x=111
function f2() {
console.log('--->',x) //111
x=222
console.log('===>',x) //222
}
f2()
var x=111
if (true) {
console.log(x) //111
var x=222
console.log(x) //222
}
console.log(x) //222
函数提升
定义：
函数声明式，会将函数的声明和定义一起提升到作用域的最顶上去。
可以先调用再定义。
console.log(f)
f() //fff
function f() {
console.log('fff')
}
console.log(f)
f() //fff
# 1、所有的声明都会提升到作用域的最顶上去。
# 2、同一个变量只会声明一次，其他的会被忽略掉。
# 3、函数声明的优先级高于变量声明的优先级，并且函数声明和函数定义的部分一起被提升。
闭包函数和let
//闭包函数
var arr=[]
for (var i=0;i<=4;i++) {
function outter(x){
function f() {
console.log(x)
}
return f
}
var f=outter(i)
arr.push(f)
}
console.log(arr[0]())
console.log(arr[1]())
console.log(arr[2]())
console.log(arr[3]())
var arr=[]
for (let i=0;i<=4;i++) {
function f() {
console.log(i)
}
arr.push(f)
}
console.log(arr[0]())
console.log(arr[1]())
console.log(arr[2]())
console.log(arr[3]())
//let属于块级作用域，声明i为自身级别，每循环一次i都为一个单独的值
BOM操作
https://www.cnblogs.com/linhaifeng/articles/9472477.html
了解：
#1、history对象包不包含浏览器的历史
history.back() //后退一页，等同于history.go(-1)
history.forward() //前进一页，等同于history.go(1)
history.go(0) //0是刷新
用的不多。因为浏览器中已经自带了这些功能的按钮：
#2、navigator对象包含了浏览器相关信息。
navigator.appName // Web浏览器全称
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统
#3、可以用screen对象得到可用的屏幕宽读和高度
screen.availWidth //可用的屏幕宽度
screen.availHeight //可用的屏幕高度
location对象
location.href //获取URL
location.href="URL" // 跳转到指定页面
location.reload() //重新加载页面
BOM详细操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM操作</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: chartreuse;
}
</style>
</head>
<body>
<div class="box">去B站</div>
<script>
window.location='http://www.baidu.com' //window.location跳转至
location='http://www.hao123.com' //window可省略
window.history.back() //回到历史（后退）
window.history.forward() //前进
window.history.go(0) //0相当于刷新
document.getElementsByClassName('box')[0].onclick=function(){
location.href='http://www.bilibili.com'
}
location.reload() //重新加载
alert('这是一个弹窗') //弹窗，只有’确定‘按键
confirm('这是一个弹窗2') //弹窗，有’确定‘和’取消‘两个按键
var a=confirm('弹窗3')
console.log(a) //’确定‘为true，’取消‘为false
prompt('请输入用户名：') //输入框弹窗
username=prompt('用户名：')
password=prompt('密码：')
console.log(username)
console.log(password)
open('http://www.jd.com','_blank',"width=500,height=500") //弹出新窗口，self从当前页面打开，blank新窗口打开，可设置属性
var x=window.open("http://www.tmall.com","_blank", "width=400, height=400")
x.close() //关闭
setTimeout(function () {
location.href='http://www.taobao.com'
},3000) //setTimeout定时器，参数（函数功能，定时时间(单位毫秒)），只运行一次
setInterval(function () {
location.reload()
},3000) //与timeout的区别：会循环执行
var s1=setTimeout(function () {
location.href='http://www.taobao.com'
},3000)
clearTimeout(s1) //关闭定时器
var s2=setInterval(function () {
location.href='http://www.taobao.com'
},3000)
clearInterval(s2)
</script>
</body>
</html>
JS选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS选择器</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">第一个</div>
<hr>
<div class="box1">第二个</div>
<hr>
<div id="btn">
<p>ID</p>
aaa
<p>IIDD</p>
</div>
<hr>
<div name="welt">welt</div>
<script>
var box=document.getElementsByClassName('box1') //通过类查找，找到多个会放在数组中
console.log(box)
console.log(box[0])
console.log(box.length)
var box_id=document.getElementById('btn') //通过ID查找
console.log(box_id)
var box_tag=document.getElementsByTagName('div') //通过标签查找
console.log(box_tag)
var box_name=document.getElementsByName('welt') //通过属性查找
console.log(box_name)
var s1=document.getElementById('btn').childNodes //[text, p, text, p, text] 查找子内容，包含文本内容
console.log(s1)
var s2=document.getElementById('btn').children //[p, p] 仅查找子标签，不包含文本内容
console.log(s2)
var s3=document.getElementById('btn').parentNode //<body> 查找父级节点
console.log(s3)
var s4=document.getElementById('btn').nextSibling //获取下一个兄弟节点，包含文本
console.log(s4)
var s5=document.getElementById('btn').nextElementSibling //获取下一个兄弟节点，不包含文本
console.log(s5)
var s6=document.getElementById('btn').previousSibling //获取上一个兄弟节点，包含文本
console.log(s6)
var s7=document.getElementById('btn').previousElementSibling //获取上一个兄弟节点，不包含文本
console.log(s7)
var s8=document.getElementById('btn').firstChild //获取第一个子节点，包含文本
console.log(s8)
var s9=document.getElementById('btn').firstElementChild //获取第一个子节点，不包含文本
console.log(s9)
var s10=document.getElementById('btn').lastChild //获取最后一个子节点，包含文本
console.log(s10)
var s11=document.getElementById('btn').lastElementChild //获取最后一个子节点，不包含文本
console.log(s11)
</script>
</body>
</html>
创建、添加、删除、替换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>增删替换</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid red ;
}
</style>
</head>
<body>
<div class="box">
<p>111</p>
<p>222</p>
<p>333</p>
</div>
<script>
//创建元素
var oDiv=document.createElement('div')
oDiv.style.width='80px'
oDiv.style.height='80px'
oDiv.style.backgroundColor='blue'
//末尾添加子元素
// var box=document.getElementsByClassName('box')[0]
// box.appendChild(oDiv) //appendChild添加子元素
//插入子元素
// var p3=document.getElementsByTagName('p')[2] //box.insertBefore(新节点,目标节点)
// box.insertBefore(oDiv,p3)
//删除子元素
// var box=document.getElementsByClassName('box')[0]
// var p3=document.getElementsByTagName('p')[2]
// box.removeChild(p3) //removeChild删除子元素
//替换子元素
// var box=document.getElementsByClassName('box')[0]
// var p3=document.getElementsByTagName('p')[2]
// box.replaceChild(oDiv,p3)
</script>
</body>
</html>
修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid red ;
}
</style>
</head>
<body>
<div class="box">
<div class="box2" name="welt"></div>
<p>33333</p>
</div>
<img src="http://www.xxx.com/1.jpg" alt="">
<input type="text" value="111">
<p id='ppp' name="wweltt"></p>
<script>
var box=document.getElementsByClassName("box")[0]
// box.innerText="哈哈哈" //innerText添加内容，会覆盖原来的子标签
// box.innerHTML="<p>1111</p>" //innerHTML添加标签，有覆盖效果
// var s1=box.getAttribute('class')
// var s1=box.getAttribute('name')
// console.log(s1)
// var res=box.setAttribute("x","11111") //设置属性
// box.removeAttribute("class") //删除属性
// console.log(res)
// box.setAttribute("style","background-color: red;width:100px")
// box.style.fontSize="50px"
// box.style.backgroundColor="red"
// var img = document.getElementsByTagName('img')[0]
// console.log(img.getAttribute("src"))
// console.log(img.src) //元素一定有的属性可以通过 '.属性名' 来获取
// var inp = document.getElementsByTagName('input')[0]
// alert(inp.getAttribute("value"))
// alert(inp.value)
// var p=document.getElementById("ppp")
// alert(ppp.name) //undefined '.+属性名'不能获取手动设置的属性
</script>
</body>
</html>
类属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
}
.box {
background-color: red;
}
.box3 {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div>11111</div>
<hr>
<div>2222</div>
<hr>
<div class="box22222">3333</div>
<script>
//给所有div标签添加属性
// var arr=document.getElementsByTagName('div')
// for (var i=0;i<arr.length;i++){
// arr[i].classList.add("box")
// }
//删除属性
// var oDiv=document.getElementsByClassName("box3")[0]
// oDiv.classList.remove('box3')
// var oDiv=document.getElementsByClassName("box3")[0]
// alert(oDiv.classList.contains("box3")) //contains判断是否包含某一属性
// var oDiv=document.getElementsByTagName("div")[2]
// oDiv.classList.toggle("box3") //toggle 如果有该属性，则删除；如果没有，则添加
</script>
</body>
</html>
标签：box,console,log,getElementById,var,document,day57 来源： https://www.cnblogs.com/bronya/p/13771008.html