js的BOM-DOM-事件
BOM操作
BOM， 浏览器对象模型，即利用js代码操控浏览器。
window对象
window对象指的就是浏览器窗口，它是BOM的核心对象。
window.innerHeight // 浏览器窗口的高度
window.innerWidth // 浏览器窗口的宽度
window.open('','','') // 新建窗口打开页面 第一个参数写url，第二个参数写空即可，第三个参数写新建的窗口的大小和位置;
window.opener() // 扩展父子页面通信;了解
window.close() 关闭当前页面
window子对象
window.navigator.appName // "Netscape"
window.navigator.appVersion // 浏览器版本
window.navigator.userAgent // 浏览器型号，爬虫时的一个反爬参数
window.navigator.platform // 平台型号 "Win32"
补充：如果是window子对象，可以省略window不写。
history对象
- history是window子对象，保存着用户上网的历史记录。
window.history.back() // 回退到上一页
window.history.forward() // 前进到下一页
location对象
- location既是window子对象也是document子对象。
- location是最有用的BOM对象之一,它提供了与当前窗口中加载的文档有关的信息，还提供了一 些导航功能。
window.location.href // 获取当前页面的url
window.location.href = url // 跳转到指定的url
window.location.reload() // 页面重新加载，即刷新页面
三种弹出框
- 都是window对象下面的方法
- 警告框：
alert('你不要这样') - 确认框：
confirm('这样好吗?') - 提示框：
prompt('你吃了吗？')
计时器相关
- window对象下面的方法，提供计时相关的功能。
- 三个有用方法：
setTimeout()、setInterval()、clearInterval() setTimeout表示等待多长时间之后，出发一个函数的执行，仅仅执行一次；setTimeout接受两个参数，一个是要执行的函数名，一个是定时的时间(单位毫秒)。setInterval表示每隔一段时间执行一次；同样它也接受两个参数，第一个是函数名，第二个时间间隔。clearInterval表示清除计时器，接收一个参数，计时器对象
<script>
function func1() {
alert(123)
}
let t = setTimeout(func1, 3000);
clearTimeout(t) // 取消事件 ，还没来得及执行就被取消啦。
function func2() {
alert(123)
}
function show(){
let t = setInterval(func2, 3000); // 每隔3秒执行一次
function inner(){
clearInterval(t) // 清除定时器
}
setTimeout(inner, 9000) // 9秒之后触发
}
show()
</script>
DOM操作
DOM， 文档对象模型，即利用js代码操作文档内的标签。
DOM把文档比成DOM树，把文档内的元素比成树中的一个节点，这样就形成了一个层级结构的关系。在这个树中。所有的标签都可以称之为节点。
JavaScript 可以通过DOM创建动态的 HTML：
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
DOM操作操作的是标签 而一个html页面上的标签有很多
- 1.先学如何查找标签
- 2.再学DOM操作标签
- 3.DOM操作需要使用关键字document关键字打头。
查找标签节点的方式
查找标签也就是查找DOM树中的节点。
- 直接查找
document.getElementById('id_name') // 返回一个标签对象
document.getElementsByClassName('class_name') // 返回一个数组，需要通过索引取值获取节点对象
document.getElementsByTagName('tag_name') // 返回一个数组
补充：节点对象保存的变量名命名规范：xxxEle
let pEle = document.getElementById('d1')
let divEle = document.getElementsByTagName('div')[1]
- 间接查找：通过标签间的层级关系查找
let pEle = document.getElementsByClassName('c1')[0] // 基准标签
pEle.parentElement.parentElement // pEle标签的父级的父级标签
pEle.children //获取pEle所有的子标签,返回一个数组，通过索引取值
pEle.firstElementChild // 获取pEle标签的第一个子标签
pEle.lastElementChild // 获取pEle标签的最后一个子标签
pEle.nextElementSibling // 获取pEle标签同层级的后一个标签
pEle.previousElementSibling // 获取pEle标签同层级的前一个标签
节点操作
- 动态创建标签
let imgEle = document.createElement('img') // 创建img标签
- 标签属性：设置|获取|移除
imgEle.src = '111.png' // 给标签设置默认的属性
imgEle.setAttribute('img_name','the3times') // 给标签设置自定义属性
getAttribute() // 获取属性
removeAttribute() // 移除属性
- 标签内增加新标签
divEle.appendChild(imgEle) // 尾部追加
divEle.insertBefore(node, child) // 指定位置添加
- 增加文本
aEle.innerText = '点我有你好看!' // 给标签设置文本内容，不识别html语法
- 增加HTML
divEle.innerHTML = '<h1>一级标题</h1>' // 识别html语法
- 补充：移除|替换标签
removeChild(child)
replaceChild(node, child)
获取值操作
- 标签内部的数据
let seEle = document.getElementById('d2')
seEle.value // value
- 上传文件的数据
let fileEle = document.getElementById('d3')
fileEle.files[0] // 获取指定文件对象
File {name: "02_测试路由.png", lastModified: 1557043082000, lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 29580, …}
class的属性操作
let divEle = document.getElementById('d1')
divEle.classList // 获取标签所有的类属性
divEle.classList.remove('bg_red') // 移除某个类属性
divEle.classList.add('bg_red') // 添加类属性
undefined
divEle.classList.contains('c1') // 验证是否包含某个类属性,返回true/false
divEle.classList.toggle('bg_red') // 有则删除无则添加,开关属性
css操作
DOM操作标签样式，统一使用style。
let pEle = document.getElementsByTagName('p')[0]
pEle.style.color = 'red'
pEle.style.border = '3px solid red'
事件
事件：达到某一个特定的条件，自动触发的动作。
事件的绑定是通过DOM操作完成的。
绑定事件的两种方式
- 第一种：html标签内，直接设置事件属性，属性值设置为绑定的函数
- 第二种：js代码内，js对象调用事件属性，赋值对应的函数。
// 第一种绑定事件的方式
<button onclick="func1()">点我</button>
<script>
function func1() {
alert(111);
}
</script>
// 第二种绑定事件的方式
<button id="d1">点我</button>
<script>
let btnEle = document.getElementById('d1');
btnEle.onclick = function () {
alert(222);
}
</script>
补充：
- script标签既可以放在head内，也可以放在body内。
- 但是通常情况下都是放在body内的最底部，等到页面内容加载完毕再执行事件。
js的主要事件
| 事件 | 说明 |
|---|---|
| onclick | 鼠标单击事件 |
| onmouseover | 鼠标经过事件 |
| onmouseout | 鼠标移开事件 |
| onchange | 文本框内容改变事件 |
| onselect | 文本框内容被选中事件 |
| onfocus | 光标聚焦事件 |
| onblur | 光标失焦事件 |
| onload | 网页加载事件 |
具体示例
具体事例1：onclick事件（开关灯）
<div id="d1" class="c1 bg_red bg_green"></div>
<button id="d2">变色</button>
<script>
let btnEle = document.getElementById('d2')
let divEle = document.getElementById('d1')
btnEle.onclick = function () { // 绑定点击事件
divEle.classList.toggle('bg_red') // 动态的修改div标签的类属性
}
</script>
具体示例2：onfocus事件和 onblur事件
<input type="text" value="老板 去吗?" id="d1">
<script>
let iEle = document.getElementById('d1')
iEle.onfocus = function () { // 获取焦点事件
iEle.value = '' // 将input框内部值清空
}
iEle.onblur = function () { // 失去焦点事件
iEle.value = '没钱 不去!' // 给input标签重写赋值
}
</script>
具体示例3：onchange事件（省市联动）
<select id="d1" name="pro">
<option disabled selected value="">--请选择--</option>
</select>
<select id="d2" name="city">
<option disabled selected value="">--请选择--</option>
</select>
<script>
let proEle = document.getElementById('d1');
let cityEle = document.getElementById('d2');
data = {
"河北": ["廊坊", "邯郸",'唐山'],
"北京": ["朝阳区", "海淀区",'昌平区'],
"山东": ["威海市", "烟台市",'临沂市'],
'上海': ['浦东新区','静安区','黄浦区'],
'深圳': ['南山区','宝安区','福田区']
};
// 选for循环获取省
for(let key in data){
// 将省信息做成一个个option标签 添加到第一个select框中
let opEle = document.createElement('option');
opEle.innerText = key;
opEle.value = key;
proEle.appendChild(opEle)
}
// 文本域变化事件, onchange事件,获取该省下的市列表并循环添加到select的option里
proEle.onchange = function () {
let currentPro = proEle.value;
let currentCityList = data[currentPro];
cityEle.innerHTML = '<option disabled selected>请选择</option>';
// for循环所有的市 渲染到第二个select中的option里
for (let i=0; i<currentCityList.length; i++){
let currentCity = currentCityList[i];
let opEle = document.createElement('option');
opEle.innerText = currentCity;
opEle.value = currentCity;
cityEle.appendChild(opEle)
}
}
</script>
浙公网安备 33010602011771号