1.DOM操作获取节点
<!--
1.什么是DOM
DOM - document object mode(文档对象模型)
js内部自动创建了一个对象，叫document, 通过这个对象可以去获取网页中的内容。
2.获取节点 - 在js中获取标签对应的节点
document.getElementById(id属性值) - 获取HTML中id属性是指定值的标签, 返回值是标签对应的节点对象
document.getElementsByClassName(class属性值) - 获取HTML中class属性是指定值的所有标签，返回值是容器，
容器中的元素是满足要求的节点
document.getElementsByTagName(标签名) - 获取HTML中指定标签，返回值是容器，容器中的元素就是指定标签对应的节点
(了解)document.getElementsByName(name属性值) - 获取HTML中name属性是指定值的所有标签，返回值是容器，
容器中的元素是满足要求的节点
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1">我是段落1</p>
<a href="" class="c1">百度</a>
<p class="c1">我是段落2</p>
<!--1.直接获取节点-->
<script type="text/javascript">
//1)通过id获取节点对象
p1Node = document.getElementById('p1')
console.log(p1Node)
//2)通过class获取节点对象
c1Nodes = document.getElementsByClassName('c1')
//c1Nodes是元素是class是c1的节点的容器
console.log(c1Nodes)
//注意: 不能通过for-in遍历获取每个节点！
for(x of c1Nodes){
console.log(x)
}
//3)通过标签名获取节点
console.log('=========================')
pNodes = document.getElementsByTagName('p')
for(x of pNodes){
console.log(x)
}
</script>
<div>
<p id="p3">我是段落3</p>
<a href="">我是超链接2</a>
<input type="" name="userName" id="userName" value="" />
</div>
<!--2.父子节点-->
<script type="text/javascript">
//1)获取父节点 - 子节点对象.parentElement
console.log('================获取父节点====================')
p3Node = document.getElementById('p3')
divNode1 = p3Node.parentElement
console.log(divNode1)
//2)获取所有的子节点 - 节点对象.children
console.log('================获取所有子点===================')
divChildren = divNode1.children
console.log(divChildren)
//3)获取第一个子节点 - 节点对象.firstElementChild
console.log('================第一个子节点===================')
pNode = divNode1.firstElementChild
console.log(pNode)
//4)获取最后一个子节点 - 节点对象.lastElementChild
console.log('================最后一个子节点==================')
console.log(divNode1.lastElementChild)
</script>
</body>
</html>
2.节点的创建和删除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="subject">
<li>python</li>
<li id="h5">h5</li>
</ul>
<script type="text/javascript">
//1.创建节点
console.log('==================创建节点====================')
//document.createElement(标签名) - 创建指定标签对应的节点
//注意: 创建节点，节点不会被添加到网页中，也不会显示
liNode = document.createElement('li')
//设置双标签的文本内容
liNode.innerText = 'Java'
console.log(liNode)
//2.添加节点
console.log('==================添加节点====================')
//1)节点1.appendChild(节点2) - 在节点1的最后添加节点2
subjectNode = document.getElementById('subject')
subjectNode.appendChild(liNode)
//2)节点1.insertBefore(节点2,节点3) - 在节点1中的节点3的前面插入节点2
liNode2 = document.createElement('li')
liNode2.innerText = '物联网'
h5Node = document.getElementById('h5')
subjectNode.insertBefore(liNode2, h5Node)
</script>
<div id="box" style="background-color: chartreuse; width: 300px; height: 500px;">
<p>我是段落1</p>
<img src="img/hat1.png"/>
</div>
<br />
<!---------3.拷贝节点--------->
<script type="text/javascript">
//节点.cloneNode() - 拷贝指定节点产生一个一模一样的新的节点(浅拷贝: 只拷贝当前这一个标签)
//节点.cloneNode(true) - 拷贝指定节点产生一个一模一样的新的节点(深拷贝: 拷贝当前标签和标签中所有的子标签)
console.log('=====================拷贝节点================')
//1）浅拷贝
_box = document.getElementById('box')
_box2 = _box.cloneNode()
console.log(_box2)
_body = document.getElementsByTagName('body')[0]
_body.appendChild(_box2)
//2)深拷贝
_box3 = _box.cloneNode(true)
_body.appendChild(_box3)
</script>
<!-----------4.删除节点-------------->
<hr />
<div id="box2">
<p id="p2">我是段落2</p>
<a href="">我是超链接1</a>
<img src="img/logo.png"/>
</div>
<script type="text/javascript">
//1)节点1.removeChild(节点2) - 删除节点1中的节点2
_box2 = document.getElementById('box2')
_box2.removeChild(document.getElementById('p2'))
//2)节点.remove() - 删除指定节点
_box2.lastElementChild.remove()
</script>
<!-----------5.替换节点------------>
<hr />
<div id="box3">
<p>我是段落3</p>
<img src="img/logo.png"/>
<a href="">我是超链接3</a>
</div>
<script type="text/javascript">
//节点1.replaceChild(节点2,节点3) - 将节点1中的节点3替换成节点2
_box3 = document.getElementById('box3')
_box3.replaceChild(document.createElement('input'), _box3.children[2])
</script>
<button onclick="func1()">按钮</button>
<script type="text/javascript">
function func1(){
alert('你好')
alert('hello')
}
</script>
</body>
</html>
3.添加盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box>div{
width: 300px;
height: 100px;
background-color: red;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="box"></div>
<button onclick="addAction()">添加</button>
<script type="text/javascript">
_box = document.getElementById('box')
function addAction(){
var _div = document.createElement('div')
_box.appendChild(_div)
}
</script>
</body>
</html>
4.节点的内容和属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/tools.js"></script>
</head>
<body>
<p id="p1">我是段落<a href="https://www.baidu.com">隐私政策</a></p>
<img id="img1" src="img/anchor.png"/>
<script type="text/javascript">
//节点内容和属性: 获取到节点后，节点对应的标签的内容和属性在节点中都会对应一个属性
//1.双标签的内容
//1)innerText属性 - 双标签的文字内容属性(没有处理标签的能力)
//2)innerHTML属性 - 双标的内容属性（有处理标签的能力）
_p1 = document.getElementById('p1')
//获取标签内容
console.log(_p1.innerText)
console.log(_p1.innerHTML)
//修改标签内容
// _p1.innerText = '<img src="img/bear.png"/>我不是段落!'
_p1.innerHTML = '<img src="img/bear.png"/>我不是段落!'
//2.普通属性
//HTML标签中所有的属性，在js节点中都会对应一个一样的属性
_img1 = document.getElementById('img1')
console.log(_img1.src)
_img1.src = 'img/bucket.png'
_img1.title = '酒桶'
//设置class属性
_img1.className = 'c1'
//设置标签的整体样式
_p1.style = 'color:red; font-size:20px;background-color:yellow;'
//单独设置指定样式的指定属性
_p1.style.width = '200px';
//补充: Math.random() - 产生 [0,1)的随机小数
//parseInt(Math.random()*255) - 0~255
//parseInt(Math.random()*90+10) - 10~100
r = parseInt(Math.random()*255)
g = parseInt(Math.random()*255)
b = parseInt(Math.random()*255)
//rgb(r,g,b)
// _p1.style.backgroundColor = 'rgb('+r+','+g+','+b+')'
_p1.style.backgroundColor = randowColor(0.5)
</script>
</body>
</html>
5.BOM基本操作
<!--
1.什么是BOM
BOM - browser object mode(浏览器对象模型)
js内部自动创建了一个window对象，代表当前页面对应的浏览器(窗口)
2.window对象
声明在js中的所有的变量都是绑定在window对象上的属性
3.window提供常用的属性和方法
1)窗口基础操作
2)弹框
3)定时
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//1.直接声明的变量就是绑定在window上的属性
//使用window的属性和方法的时候window可以省略
a = 100 //相当于window.a = 100
var name = 'xiaoming' //相当于window.name = 'xiaoming'
function func1(){ //相当于window.func1 = function(){console.log('你好')}
console.log('你好')
}
console.log(a, window.a)
console.log(name, window.name)
func1()
window.func1()
// window.alert('你好')
</script>
</body>
</html>
6.窗口基本操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>窗口基本操作</title>
</head>
<body>
<button onclick="closeWindow()">关闭窗口</button>
<!-----------窗口基本操作------------->
<script type="text/javascript">
//1.打开新的窗口
//open() - 打开并且返回一个新的空白窗口
//open(网页地址) - 打开并且返回一个有指定页面的窗口
//open(网页地址,'','width=?,height=?') - 打开并且返回一个指定大小的窗口
window1 = window.open()
console.log(window1, window)
window2 = window.open('https://www.baidu.com')
window3 = window.open('01-DOM操作获取节点.html','','width=500,height=300')
//2.关闭窗口
//窗口对象.close() - 关闭指定窗口
function closeWindow(){
window1.close()
window2.close()
window3.close()
window.close()
}
//3.移动窗口(只有浮动的小窗口有效)
//窗口对象.moveTo(x坐标, y标准)
window3.moveTo(300, 300)
//4.获取窗口大小
//窗口对象.innerWidth / 窗口对象.innerHeight - 窗口能够显示网页内容的有效宽高
//窗口对象.outerWidth / 窗口对象.outerHeight - 整个窗口的宽高
console.log(window.innerWidth, window.innerHeight)
console.log(window.outerWidth, window.outerHeight)
</script>
</body>
</html>
7.弹框
`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//1.普通对话框(提示信息+确定按钮)
//alter(提示信息)
// alert('删除成功!')
//2.批准弹框(提示信息+确定按钮+取消按钮)
//confirm(提示信息) - 返回值是选择的结果，false -> 取消; true -> 确定
// result = confirm('是否确定删除？')
// console.log(result)
//3.带输入框的提示框(提示信息+输入框+确定按钮+取消按钮)
//prompt(提示信息) - 返回值是选择的结果， null -> 取消; 不是null(输入框的内容) -> 确定
result = prompt('请输入你的姓名:')
console.log(result)
</script>
</body>
</html>
8.定时操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="clearInterval(timer1)">关闭定时器</button>
<hr />
<button onclick="start()">开始</button>
<button onclick="stop()">结束</button>
<script type="text/javascript">
// 1.设置周期性的定时器
//setInterval(函数,时间) - 每隔指定的时间就调用一次函数; 会创建一个定时器对象并且返回
// 时间单位 - 毫秒
num = 1
timer1 = setInterval(function(){
num += 1
console.log('hello!', num)
}, 1000)
//2.取消周期性的定时器
//clearInterval(定时器对象) - 关闭指定的定时器对象
// clearInterval(timer1)
//练习: 点击开始按钮就每个1秒打印一个数字，从1开始打印；点击暂停就停止打印
num2 = 1
function start(){
timer2 = setInterval(function(){
console.log(num2)
num2 += 1
}, 1000)
}
function stop(){
clearInterval(timer2)
}
</script>
<hr />
<button onclick="clearTimeout(timer3)">拆炸弹</button>
<script type="text/javascript">
//3.一次性的定时操作
//setTimeout(函数,时间) - 到了指定的时间后执行函数(函数只会执行一次), 返回定时器对象
timer3 = setTimeout(function(){
alert('完蛋了!')
}, 5000)
//4.取消一次性定时器
//clearTimeout(定时器对象) - 关闭指定定时器
// clearTimeout(timer3)
//补充：修改当前窗口加载的地址
// window.location.href = 'https://www.baidu.com'
</script>
</body>
</html>
9.延迟跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1">5s后自动跳转到百度...</p>
<script type="text/javascript">
p1_ = document.getElementById('p1')
//时间
num = 5
timer1 = setInterval(function(){
num --
if(num >= 1){
p1_.innerText = num+'s后自动跳转到百度...'
}else{
clearInterval(timer1)
window.location.href = 'https://www.baidu.com'
}
}, 1000)
</script>
</body>
</html>
10.事件绑定
<!--
1.事件三要素: 事件源、事件、事件驱动程序
事件源发生指定的事件就完成事件驱动程序(谁谁谁发生什么就做什么)
2.事件绑定
1)直接给事件源标签的事件属性赋值
2)在事件源标签的事件属性中调用事件驱动程序对应的函数; 事件驱动程序中的this是window对象
(事件驱动程序中没有办法获取事件源)
事件源标签的事件属性赋一个函数调用表达式
3)给事件源对应的节点的事件属性赋值，赋函数名或者匿名函数; 事件驱动程序中的this是事件源
4)事件源节点.addEventListener(事件属性名, 事件驱动程序); 事件驱动程序中的this是事件源
注意: 1.事件属性名要驱动最前面的on 2.可以同时给同一个事件源的同一个事件绑定多个事件驱动程序
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.事件绑定方式1-->
<button onclick="alert('按钮被点击')">按钮1</button>
<!--2.事件绑定方式2-->
<button onclick="func1()">按钮2</button>
<script type="text/javascript">
function func1(){
alert('你好!')
alert('hello!')
console.log(this)
}
</script>
<!--3.事件绑定方式3-->
<button id="btn3">按钮3</button>
<script type="text/javascript">
btn3_ = document.getElementById('btn3')
btn3_.onclick = function(){
alert('按钮3被点击')
console.log(this)
}
btn3_.onclick = function(){
alert('新的功能!')
}
btn3_.addEventListener('click', function(){
alert('新的功能2！')
})
</script>
<hr />
<button class="c1">按钮41</button>
<button class="c1">按钮42</button>
<button class="c1">按钮43</button>
<script type="text/javascript">
function c1Action(){
console.log(this)
this.style.backgroundColor = 'red'
}
c1s = document.getElementsByClassName('c1');
for(c1_ of c1s){
c1_.onclick = c1Action
}
</script>
<!--4.事件绑定方式4-->
<hr />
<button id="btn5">按钮5</button>
<script type="text/javascript">
btn5_ = document.getElementById('btn5')
btn5_.addEventListener('click', function(){
alert('按钮5被点击')
console.log(this)
})
btn5_.addEventListener('click', function(){
alert('新功能!')
})
</script>
</body>
</html>
11.常见事件类型
<!--
1.常见事件类型
onload - 页面加载完成
onclick - 鼠标点击(单击)标签对应的事件(一般绑定在按钮上)
ondblclick - 鼠标双击事件
onmouseover - 鼠标进入标签事件
onmouseout - 鼠标离开标签事件
onchange - 内容改变事件
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//1.页面中的标签加载完成，才去获取页面中的内容
window.onload = function(){
p1_ = document.getElementById('p1')
console.log(p1_)
}
</script>
</head>
<body>
<p id="p1">我是段落1</p>
<!--2.鼠标双击事件-->
<img id="img1" src="img/ghost.png"/>
<script type="text/javascript">
document.getElementById('img1').ondblclick = function(){
//双击后放大图片
this.style = 'width:300px;height:300px;'
}
</script>
<!--3.鼠标进入和鼠标离开事件-->
<br />
<img id="img2" src="img/hat1.png"/>
<script type="text/javascript">
img2_ = document.getElementById('img2')
img2_.onmouseover = function(){
this.src = 'img/hat2.png'
}
img2_.onmouseout = function(){
this.src = 'img/hat1.png'
}
</script>
<!--4.值改变事件-->
<input type="" name="" id="input1"value="" />
<br />
<input type="radio" name="gender" value="男" /><label for="">男</label>
<input type="radio" name="gender" value="女" /><label for="">女</label>
<br />
<br />
<select name="" id="city">
<option value="北京">北京</option>
<option value="成都">成都</option>
<option value="重庆">重庆</option>
<option value="上海">上海</option>
</select>
<script type="text/javascript">
input1_ = document.getElementById('input1')
//输入框输入完成后会触发onchange事件
input1_.onchange = function(){
console.log(this.value)
}
//单选按钮和复选按钮选中或者取消选中触发的都是onchange事件
function genderChange(){
alert(this.value)
}
genders = document.getElementsByName('gender')
for(var gender_ of genders){
gender_.onchange = genderChange
}
//下拉菜单切换选项的时候触发的也是onchange事件
document.getElementById('city').onchange = function(){
alert(this.value+':onchange被触发')
}
</script>
</body>
</html>
12.事件捕获
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1" style="background-color: red; width: 400px; height: 400px; margin: auto;">
<div id="div2" style="background-color: green; width: 250px; height: 250px; margin: auto;">
<div id="div3" style="background-color: yellow; width: 100px; height: 100px; margin: auto;">
</div>
</div>
</div>
<script type="text/javascript">
//事件传递: 发生在子标签上的事件会传递给父标签。
//事件传递问题：如果父子标签都对同一个事件进行绑定，那么子标签触发事件的时候父标签也会做出反应
//解决事件传递问题: 捕获事件
document.getElementById('div1').onclick = function(){
alert('红色div被点击')
}
document.getElementById('div2').onclick = function(evt){
alert('绿色div被点击')
evt.stopPropagation()
}
document.getElementById('div3').onclick = function(evt){
alert('黄色div被点击')
//鼠标事件对象属性:
//clientX和clientY - 点击点到浏览器左边和顶部的距离
//offsetX和offsetY - 点击点到标签左边和顶部的距离
console.log(evt)
console.log(evt.offsetX, evt.offsetY)
//捕获事件(阻止事件传递到父标签)
evt.stopPropagation()
}
</script>
<input type="" name="input1" id="input1" value="" />
<script type="text/javascript">
document.getElementById('input1').onkeydown = function(evt){
//键盘事件对象属性: key - 键值
console.log(evt)
console.log(evt.key)
// console.log(arguments)
}
</script>
</body>
</html>
13.拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
top: 200px;
left: 200px;
position: absolute;
}
</style>
</head>
<body>
<div id="div1" style="background-color: pink; width: 100px; height: 100px;">
</div>
<script type="text/javascript">
//是否移动
var isMove = false
console.log('==============:',typeof(isMove))
var startX;
var startY;
//移动的div
var div1_ = document.getElementById('div1')
//鼠标按下
div1_.onmousedown = function(evt){
isMove = true
startX = evt.offsetX
startY = evt.offsetY
console.log('按下.....', startX, startY)
}
//鼠标弹起
div1_.onmouseup = function(){
isMove = false
}
//鼠标移动
div1_.onmousemove = function(evt){
if(!isMove){
return;
}
//isMove是true的是才移动
var top1 = evt.clientY - startY;
var left1 = evt.clientX - startX;
console.log('top:'+top1+' left:'+left1);
this.style.top = top1+'px';
this.style.left = left1+'px';
}
</script>
</body>
</html>
