DOM
DOM(Document Object Model),即文档对象模型
常用节点操作
- 创建节点:
document.createElement
- 添加节点:
element.appendChild
- 删除节点:
element.removeChild
- 查找节点:
document.getElementById
、document.getElementsByClassName
、document.querySelector
、document.querySelectorAll
、document.getElementsByTagName()
举例:
<!--html页面-->
<html>
<head>
</head>
<body>
<div id='div1'>
<div id = 'div1-1'> div1-1</div>
<div id = 'div1-2'> div1-2</div>
</div>
</body>
</html>
/*css样式*/
* {
margin: 0;
padding: 0;
}
#div1 {
width: 400px;
height: 300px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: rgba(0,122,204,0.7);
}
#div1 > div{
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0,122,204);
}
- 查找结点
var element = document.getElementById('div1-1') //根据id查找结点
element.innerText = 'div1-1节点' //修改innerText属性
var element2= document.getElementById('div1-2') //根据id查找结点
element2.innerText = 'div1-2节点' //修改innerText属性
- 删除节点
var childElement1 = document.getElementById('div1-1') //定位到要删除的节点div1-1
var childElement2 = document.getElementById('div1-2')
var ParentElement = document.getElementById('div1') //找到节点div1-1的父节点div1
ParentElement.removeChild(childElement1) //移除子节点
- 创建节点
var parentElement=document.getElementById('div1')
var chlldElement3=document.createElement('div')
parentElement.appendChild(chlldElement3)
chlldElement3.innerText='新增节点div1-3'
DOM的事件
包括单击双击,键盘,滚轮,鼠标移入移出等
事件参数e是事件触发时,浏览器传给事件触发函数的一个参数对象,e里面包括了鼠标的坐标信息(鼠标在屏幕的坐标)、键盘的按键信息(键盘按了哪个键)等
js事件的冒泡指的是事件从子元素向父元素「渗透」的过程,给一个元素绑定点击事件,有addEventListener和onclick等多种方式,onclick只能给元素点击事件绑定一个事件,addEventerListener可以绑定多个。
eg:点击div1-1,div1变黄,点击div1-2,div1变红
- 找到div1-1,div1-2
- 监听div1-1,div1-2上的「点击」事件
- 写触发【点击】事件之后的逻辑
a. 找到div1
b. 改变div1的背景颜色
var element = document.getElementById('div1-1')
var element2=document.getElementById('div1-2')
element.onclick = function (e) {
var parentEle = document.getElementById('div1')
parentEle.style.backgroundColor = 'yellow'
}
element2.onclick = function (e) {
var parentEle = document.getElementById('div1')
parentEle.style.backgroundColor = 'red'
}
//点击div1-2,新增节点
var element1 = document.getElementById('div1-1')
var element2 = document.getElementById('div1-2')
var parentElement = document.getElementById('div1')
element1.onclick=function (e){//点击div1-1,删除div1-3
var element3 = document.getElementById('div1-3')
parentElement.removeChild(element3)
}
element2.onclick = function (e) {//点击div1-2,新增节点
var childElement = document.createElement('div')
childElement.innerText='新增节点'
parentElement.appendChild(childElement)
}
BOM
BOM(Browser Object Model),即浏览器对象模型,是浏览器提供的一个对象,用来操作浏览器。
BOM核心对象是 window,window 对象包含了6大核心模块:
- document:文档对象
- frames:窗口中所有命名的框架
- history:当前页面历史记录
- location:当前页面地址信息
- navigator:浏览器相关信息
- screen:用户显示屏幕相关属性