一 DOM操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>节点操作</title>
</head>
<body>
<p class="c1" id="p1">我是段落1</p>
<img class="c1" src="img/luffy.jpg"/>
<div id="div1">
我是div
<p>我是段落2</p>
</div>
<div id = 'div2'>
<h1>我是标题1</h1>
</div>
<script type="text/javascript">
//1.获取节点
//1.1直接获取
//a）通过id值来获取节点：document.getElementById(id属性值)---返回值是标签对应的节点值
//补充：html标签在js全部是对象，标签的属性就是对象的属性，双标签的内容对应的是（innerHTML，innerText）
// innerhtml指向的是内容的文本和标签；innertext只指向文本
pNode=document.getElementById('p1')
console.log(pNode, typeof(pNode),pNode.id,pNode.innerHTML)
divNode=document.getElementById('div1')
console.log(divNode)
console.log(divNode.innerHTML)
//我是div
//<p>我是段落2</p>
console.log(divNode.innerText)
//我是div
//我是段落2
//b)通过class值获取节点---document.getElementsByClassName(class属性值)---返回值是数组
c1NodeArray=document.getElementsByClassName('c1')
console.log(c1NodeArray)
//根据下标获取元素
imgNode=c1NodeArray[1]
imgNode.title='路飞'
//c）通过标签名获取节点：document.getElementsByTagName(标签名)---返回值是数组
pNodes=document.getElementsByTagName('p')
console.log(pNodes)
//d)通过name属性获取节点（被淘汰了）：document.getElementsByName(name属性)
// document.getElementsByName()
//1.2获取父节点
//节点.parentElement ---获取指定节点对应的父节点
bodyNode=pNode.parentElement
console.log(bodyNode)
//1.3获取子节点
//a）获取所有的子节点：节点.children---获取指定节点所有的子节点（不会获取孙子节点）
children=bodyNode.children
console.log(children)
//b.获取第一个子节点：节点.bodyNode.firstElementChild
firstNode = bodyNode.firstElementChild
console.log(firstNode)
//C)获取最后一个子节点:节点.bodyNode.lastElementChild
lastNode = bodyNode.lastElementChild
console.log(lastNode)
//2.创建节点
//document.createElement(标签名) --- 创建指定标签对像的节点对象
//注意：创建的节点在没有添加到网页中的时候是不会显示的
inputNode=document.createElement('input')
//3.添加节点
div2Node = document.getElementById('div2')
//节点1.appen（节点2）--在节点1后面添加节点2
div2Node.appendChild(inputNode)
//节点1.insertBefore（节点2，节点3）在节点1下面的节点3前面插入节点2
div2Node.insertBefore(inputNode,div2Node.firstElementChild)
//4.拷贝节点
//节点.cloneNode（）---- 赋值指定节点，产生一个新的节点
inputNode2 = inputNode.cloneNode()
inputNode2.placeholder='新节点'
div2Node.appendChild(inputNode2)
//5.删除节点
//a）节点1.removeChild（节点2） -- 删除节点1中的节点2
div2Node.removeChild(div2Node.firstElementChild)
//b）节点.remove（）--删除指定节点
div2Node.remove()
</script>
</body>
</html>
二 BOM操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM操作</title>
</head>
<body>
<!--<div id=""style="background-color: yellow;height: 5000px;" ></div>-->
</body>
</html>
<script type="text/javascript">
//1.什么是BOM
//BOM（browser object model）浏览器对象模型
//js自带一个window对象，指向当前浏览器；js中所有的全局变量都是绑定在window对象上的属性
//在使用的时候window可以省略
num=10 //相当于window.num=10
console.log(window.num,num)
function func1(){
console.log('我是函数')
}
window.func1()
//2.window的羁绊操作
//open（url，name属性，窗口大小）
//a）打开新的窗口:open(url)--在新的窗口打开新页面
// new_window=window.open('https://www.baidu.com')
// console.log(new_window)
//b）打开新的窗口，同时设置窗口的高度和宽度
// new_window2=open('','','width=400,heigth=400')
//2）关闭窗口
//窗口对象.close
//window.close()/close ---关闭当前窗口
// close()
//3）移动窗口
// new_window2.moveTo(200,200)
//4)获取窗口的宽度和高度
//innerwidth、innerheigth--获取浏览器能够显示的宽高。
console.log(window.innerWidth,window.innerHeight)
//获取浏览器的宽高
console.log(window.outerHeight,window.Height)
//3.弹框
//1）只有确定按钮再加提示信息的弹框
alert('提示信息！')
//2）一个提示信息，再加上确定和取消按钮；根据返回值是ture还是死false来判断是确定还是取消
confirm('是否删除')
console.log()
//3）一个提示信息再加一个输入框还有确定和取消按钮，根据返回值是否是null来判断点击的是取消还是确定
result=prompt('提示信息1','提示信息2')
console.log(result)
</script>
三 DOM中的定时事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//1.开启定时--setTimeout
/*
setTimeout(函数，定时事件，实参对象) --指定时间后调用函数，并传入指定参数
函数---可以是匿名函数，也可以是普通函数名
定时时间---单位是毫米
实参对象---给函数提供参数
*/
t1=setTimeout(function(){
console.log('时间到')
},1000)
t2=setTimeout(function(name,age){
console.log(name,age)
},5000,'小明',10)
function timeFunc(){
console.log('你好')
}
t3=setTimeout(timeFunc,1000)
/*
setInterval(函数，定时时间，参数列表)---每隔指定的时间调用一次函数
*/
num=1
// t4=setInterval(function(){
//
// num++
// console.log('-_-',num)
//
// if(num==10){
// clearInterval(t4)
// }
// },1000)
//
//2.清除定时
//clearTimeout（定时对象）
clearTimeout(t2)
//clearInterval(定时对象)
</script>
四 自动跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1">5秒后自动跳转</p>
<script type="text/javascript">
pNode=document.getElementById('p1')
time=5
t1 = setInterval(function(){
time--
if (time==0){
open('https://www.baidu.com')
clearInterval(t1)
}
pNode.innerText=time+'秒后自动跳转'
},1000)
</script>
</body>
</html>
五 事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--事件绑定1 不推荐使用-->
<button onclick="alert('你好')">按钮1</button>
<button id='btn1' onclick="btnClick()">删除1</button>
<!--事件绑定2-->
<button class="btn1">删除2</button>
<button class="btn1">删除3</button>
<button class="btn1">删除4</button>
<button id="btn3">删除5</button>
<br /><br />
<!--事件绑定3-->
<button id="btn4">删除6</button>
</body>
</html>
<script type="text/javascript">
//js是事件驱动语言
//1.事件三要素：事件源、事件、事件驱动程序
//事件源发送某个事件就做什么事情（事件驱动程序）
//2.事件的绑定
//1）在标签内部给标签的事件属性赋值
//注意：这种方式绑定，this指向的是window
function btnClick(){
console.log(this)
result=confirmn('是否删除')
if(result){
document.getElementById('btn1').remove()
}
}
//2）通过给节点对象的事件属性赋值来绑定
//注意：这种方式绑定的时候，this指向的是window
btnNode=document.getElementById('btn1')
btnNode.onclick=btnClick
btn1Node = document.getElementsByClassName('btn1')
for(x=0;btn1Node.length;x++){
btn1Node=btn1Node[x]
//给事件属性赋匿名函数
btn1Node.onClick=function(){
console.log(this)
result=confirm('是否删除')
if(result){
this.remove()
}
}
}
//3）通过addEventListener方法进行绑定
/*
a.语法
事件源节点.addEventListener(事件名称，事件驱动程序)
b.说明
事件名称----事件属性名去掉on
事件驱动程序---事件发生后需要调用的函数
c.注意
this是事件源
可以给同一个节点的同一个事件绑定不同的事件驱动程序
*/
btnNode4=document.getElementById('btn4')
btnNode4.addEventListener('click',function(){
console.log(this)
alert('你好')
})
btnNode4.addEventListener('click',function(){
this.style.color='red'
})
</script>
六 常见事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//1.onload事件--页面加载完成对应的事件（标签加载成功）
onload=function(){
//写在这儿的代码才会执行
pNode=document.getElementById('p1')
console.log(pNode)
}
</script>
</head>
<body>
<p id = 'p1'>我是标题</p>
<input id="input"/>
<input type="" name="input2" id="input2" value="" />
</body>
</html>
<script type="text/javascript">
//2.鼠标事件
pNode=document.getElementById('p1')
//鼠标点击事件---onclick
pNode.onclick=function(){
alert('p标签被点击')
}
//2）onmouseover ---鼠标悬停事件
pNode.onmouseover=function(){
//alert('鼠标在标签上')
this.style='background-color:yellow'
}
//3）onmouseout ---鼠标离开事件
pNode.onmouseout=function(){
this.style='background-color:red'
}
//3.键盘事件
//键盘事件一般绑定在输入框对应的标签上
//1）onkeypress
inputNode=document.onkeypress=function(){
console.log('键盘摁下弹起')
}
//2）onkeydown ---按键按下 onkeyup --按键弹起
//4.输入框事件
//onchange---输入框中的内容发生改变
inputNode2=document.getElementById('input2')
inputNode2.onchange=function(){
console.log('内容发生改变')
}
//oninput--正在输入
//5.事件对象
//每个事件驱动程序中都可以设置一个参数来表示当前事件对象。不同类型的事件对应事件类型和事件属性不同
//1）鼠标事件对象
//cilentx/clienty---鼠标位置到浏览器左边和顶部的距离
//offsetx/offsety---鼠标位置到事件源标签坐标和顶部的距离
//2）键盘事件
//key-那个按键被按下
</script>
