1、DOM获取节点
- DOM - document object mode(文档对象模型)
js内部自动创建了一个对象，叫document, 通过这个对象可以去获取网页中的内容。
1)直接获取节点
document.getElementById(id属性值) - 获取HTML中id属性是指定值的标签, 返回值是标签对应的节点对象
document.getElementsByClassName(class属性值) - 获取HTML中class属性是指定值的所有标签，返回值是容器，
容器中的元素是满足要求的节点
document.getElementsByTagName(标签名) - 获取HTML中指定标签，返回值是容器，容器中的元素就是指定标签对应的节点
document.getElementsByName(name属性值)(了解) - 获取HTML中name属性是指定值的所有标签，返回值是容器，容器中的元素是满足要求的节点
<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>
2)、父子节点
子节点对象.parentElement：获取父节点
节点对象.children：获取所有的子节点
节点对象.firstElementChild：获取第一个子节点
节点对象.lastElementChild：获取最后一个子节点
<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>
2、节点的创建和删除
1)创建节点
document.createElement(标签名):创建指定标签对应的节点
2)添加节点
节点1.appendChild(节点2): 在节点1的最后添加节点2
节点1.insertBefore(节点2,节点3) : 在节点1中的节点3的前面插入节点2
<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>
3)拷贝节点
节点.cloneNode():拷贝指定节点产生一个一模一样的新的节点(浅拷贝: 只拷贝当前这一个标签)
节点.cloneNode(true):拷贝指定节点产生一个一模一样的新的节点(深拷贝: 拷贝当前标签和标签中所有的子标签)
4)删除节点
节点1.removeChild(节点2):删除节点1中的节点2
节点.remove():删除指定节点
<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)替换节点
节点1.replaceChild(节点2,节点3):将节点1中的节点3替换成节点2
<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>
3、节点的属性和内容
1)双标签的内容
innerText属性：双标签的文字内容属性(没有处理标签的能力)
innerHTML属性:双标的内容属性（有处理标签的能力）
2)普通属性
- HTML标签中所有的属性，在js节点中都会对应一个一样的属性
3)随机数演示
<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>
4、BOM
- BOM - browser object mode(浏览器对象模型)
js内部自动创建了一个window对象，代表当前页面对应的浏览器(窗口)
<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>
5、窗口基本操作
1)打开新的窗口
open():打开并且返回一个新的空白窗口
open(网页地址):打开并且返回一个有指定页面的窗口
open(网页地址,'','width=?,height=?'):打开并且返回一个指定大小的窗口
2)关闭窗口
窗口对象.close():关闭指定窗口
移动窗口:只有浮动的小窗口有效
窗口对象.moveTo(x坐标, y标准)
获取窗口大小
窗口对象.innerWidth / 窗口对象.innerHeight：窗口能够显示网页内容的有效宽高
窗口对象.outerWidth / 窗口对象.outerHeight：整个窗口的宽高
<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>
3)弹框
普通对话框(提示信息+确定按钮)
批准弹框(提示信息+确定按钮+取消按钮)
带输入框的提示框(提示信息+输入框+确定按钮+取消按钮)
<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>
4)定时操作
周期性的定时器
设置周期性的定时器：setInterval(函数,时间) - 每隔指定的时间就调用一次函数; 会创建一个定时器对象并且返回
取消周期性的定时器：clearInterval(定时器对象) - 关闭指定的定时器对象
<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>
一次性的定时
一次性的定时操作:setTimeout(函数,时间) - 到了指定的时间后执行函数(函数只会执行一次), 返回定时器对象
取消一次性定时器：clearTimeout(定时器对象) - 关闭指定定时器
<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>
6、事件绑定
1.事件三要素: 事件源、事件、事件驱动程序
事件源发生指定的事件就完成事件驱动程序(谁谁谁发生什么就做什么)
2.事件绑定
1)直接给事件源标签的事件属性赋值
2)在事件源标签的事件属性中调用事件驱动程序对应的函数; 事件驱动程序中的this是window对象
(事件驱动程序中没有办法获取事件源)
事件源标签的事件属性赋一个函数调用表达式
3)给事件源对应的节点的事件属性赋值，赋函数名或者匿名函数; 事件驱动程序中的this是事件源
4)事件源节点.addEventListener(事件属性名, 事件驱动程序); 事件驱动程序中的this是事件源
注意: 1.事件属性名要驱动最前面的on 2.可以同时给同一个事件源的同一个事件绑定多个事件驱动程序
<!--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>
7、常见事件类型
onload：页面加载完成
onclick:鼠标单击事件
ondbclick:鼠标双击事件
onmouseover：鼠标进入事件
onmouseout:鼠标离开事件
onchange:内容改变事件(input,radio,checkbox,select)
<p id="p1">test</p>
<img src="img/ghost.png" id="img1" alt="" />
<img src="img/anchor.png" id="img2" alt="" />
<script type="text/javascript">
document.getElementById('img1').ondblclick = function(){
this.style = 'width:300px; height:400px;'
}
_img1 = document.getElementById('img2')
_img1.onmouseover = function(){
this.src = 'img/hat.png'
}
_img1.onmouseout = function(){
this.src = 'img/anchor.png'
}
</script>
<hr />
<input id="input1" />
<br />
<select name="" id="select1">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="贵阳">贵阳</option>
</select>
<input type="radio" name="gender" value="男" /><label for="">男</label>
<input type="radio" name="gender" value="女" /><label for="">女</label>
<script type="text/javascript">
// 输入框输入完成后会触发onchange事件
_input1 = document.getElementById('input1')
_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
}
// 下拉菜单(select)切换选项的时候会触发onchange事件
document.getElementById('select1').onchange = function(){
alert(this.value)
}
</script>
8、事件捕获
节点.stopPropagation()
clientX,clientY:鼠标点击的点到浏览器左边和上边的距离
offsetX,offsetY:鼠标点击的点到标签左边和顶部的距离
<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>
