04 前端之BOM与DOM
前端之BOM与DOM
BOM与DOM操作
BOM 浏览器对象模型>>>:使用js操作浏览器
DOM 文档对象模型>>>:使用js操作前端页面
BOM基本指令
window.open() - 打开新窗口
window.close() - 关闭当前窗口
history.forward() // 前进一页
history.back() // 后退一页
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面
setTimeout()
clearTimeout()
setInterval()
clearInterval()
DOM操作之查找标签
前缀关键字>>>:document
# 基本查找(核心)
document.getElementById 根据ID获取一个标签
document.getElementsByClassName 根据class属性获取
document.getElementsByTagName 根据标签名获取标签合集
"""
如果我们的js代码需要页面上某个标签加载完毕
那么该js代码应该写在body内部最下方或者引入外部js文件
"""
# 间接查找(重要)
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
快速书写代码：
div#d$*3 div就是标签 #就是id d就是d1的d $就是数字 *3就是三行
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
div.c$*3 div就是标签 .就是class c就是c1的c $就是数字 *3就是三行
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
节点操作
var aEle = document.createElement('a'); # 创建标签
aEle.setAttribute('href','https://www.mmzztt.com/') # 设置属性
aEle.innerText = '好不好看?' # 设置内容文本
document.getElementsByTagName('p')[0].appendChild(aEle) # 动态添加
"""一定要明确当前手上是什么对象"""
var imgEle = document.createElement('img')
imgEle.src = 'https://img1.baidu.com/... 图片地址 '
pEle.append(imgEle)
imgEle.getAttribute('src') # 获取标签的图片地址
imgEle.getAttribute('title') # 获取标签属性
'''但是getAttribute() 无法获取实时的数据信息'''
innerText
不加赋值符号是获取内部文本
加了赋值符号是设置内置文本
# 不可以识别HTML标签
innerHTML
不加赋值符号是获取内部标签+文本
加了赋值符号是设置内置标签+文本
# 可以识别HTML标签
获取值操作
获取值：用户在页面上写了数据（form）了，怎么获取用户写的数据呢，用户输入什么就获取什么。
在form表单情况下进行
input标签，在页面中，用户是输入文本框中，输入的就是V值，即value。
# 普通的文本数据获取
前文说到getAttribute()无法获取实时的数据，但是#下面的方法可以。
eg：ipEle.value > jason666
标签对象.value
# 特殊的文件数据获取
在'input'标签属性是'file'时：
1.标签对象.value '''仅仅获取一个文件地址而已'''
eg：ipEle.value > C:\\admin\\python\\day
2.标签对象.files[0] '''获取单个文件数据对象'''
eg：ipEle.files[0] > File {...} 文件信息
3.标签对象.files '''获取所有文件数据'''
标签属性添加 multaple
class操作
classList 查看所有的类
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
Console:
var d2Ele = document.getElementById('d2')
d2Ele.style.backgroundColor = 'red'
var d2Ele = document.getElementsByTagName('p')[0]
d2Ele.style.backgroundColor = 'green'
样式操作
标签对象.style.属性名 = 属性值
事件
# 就是给HTML元素添加自定义的功能
绑定事件的方式1 (不常用，不建议使用)
<body>
<button onclick="func()">点我</button>
<script>
function func() {
alert(123)
}
</script>
</body>
绑定事件的方式2 # 使用最多，推荐使用
<body>
<button id="d1">选我</button>
<script>
// 1.先查找标签
var btnEle = document.getElementById('d1')
// 2.绑定事件
btnEle.onclick = function () {
alert(456)
}
</script>
</body>
内置参数this
# this指代的就是当前被操作对象本身
在事件的函数体代码内部使用，
btnEle.onclick = function () {
alert(456)
console.log(this)
}
事件练习
input里面只有 value， 没有innertext
onclick单击事件
onfocus聚焦事件
onblur失去焦点事件
onchange文本域变化事件
onload等待...加载完毕后执行的事件
# 定时器
# 数据校验
# 省市联动
如果某个标签已经有事件了 那么绑定会冲突
