文章目录
BOM与DOM操作
截至目前为止 学的这些js语法 与浏览器html文件的js代码还是一点关系没有 需要学习 BOM 与 DOM
BOM
BOM 就是浏览器对象模型
可以 js代码操作浏览器
DOM
DOM 就是文档对象模型
可以js代码操作标签
BOM操作
* window 对象
window对象指代的就是浏览器窗口
window.innerHeight 获取浏览器的高度
706
window.innerWidth 浏览器的宽度
770
window.open('https://www.mzitu.com/','','height=600px, width=1000px');
# 新建窗口打开页面 第一个参数写要打开的页面url 第二个参数写空即可 第三个参数写新建窗口的大小和位置
# 扩展父子页面通信window.opener() 子页面可以调用父页面的方法
window.close() // 关闭当前页面
window子对象
window.navigator.appName
"Netscape"
window.navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.72 Safari/537.36"
window.navigator.userAgent / 用来表示当前是否是一个浏览器
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.72 Safari/537.36"
window.navigator.platform # 来自哪个平台
"Win32"
# 如果是window的子对象 那么window可以省略不写
history对象
window.history.forward() # 前进
window.history.back() # 后退
# 对应的就是浏览器右上方的前进和后退
location对象（掌握）
window.location.href # 获取当前页面的url
window.location.href = 'url' # 跳转到指定的url
window.location reload # 刷新页面
弹出框
- 警告框
alert(‘你不要过来’)
undefined
- 确认框
confirm(‘你确定要这么做吗’)
true/false
确认框 用户选择确认就返回true
反之false
- 提示框
confirm(‘手牌号给我看一下’,"")
“返回值是用户在提示框输入栏输入的内容返回过来”
计时器相关
- 过一段时间之后触发（一次）
- 每隔一段时间触发一次（循环）
function func1() {
alert(123)
}
let t = setTimeout(func1,3000) // 毫秒为单位 三秒后自动执行func1函数
clearTimeout(t) // 取消定时任务 如果你要清除定时任务 需要用变量指代定时任务
function func2(){
alert(124)
}
function show(){
let t = setInterval(func2,2000) // 每隔三秒执行一次
function inner() {
clearInterval(t) // 将循环定时任务清除
}
setTimeout(inner, 6000) // 调用取消 循环定时任务 的方法
}
show()
DOM操作
DOM操作需要用关键字 document 起手
DOM树概念
所有的标签都可以称之为是节点
JavaScript 可以通过DOM创建动态的 HTML：
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
DOM操作操作的是标签 而一个html页面上的标签有很多
1.先学如何查找标签
2.再学DOM操作标签
查找标签
- 直接查找（必须要掌握)
id查找
类查找
标签查找
# 根据id查 因为id唯一性 所以是getElement
document.getElementById('d2') # 返回的是对象
# 根据className查 所有加了s 且返回的是列表里面装的是查找到的对象
document.getElementsByClassName('c1')
# 根据标签名找
document.getElementsByTagName('div')
# 用变量存储查找到的对象
let divEle = getElementsByTagName('div')[1]
后续就可以通过divEle. 的形式操作这个标签
···
当你用变量名指代标签对象的时候 一般情况下都推荐你写成 xxxEle 不成文规定
- 间接查找
通过一个对象标签
eg:
pEle.parentElement 获取该p标签对象的父标签
divEle.children 获取该标签的所有子标签
# 获取第一个子标签
divEle.children[0]
divEle.firstElementChild
# 获取最后一个子标签
divEle.lastElementChild
节点操作
'''
创建一个 img标签 这个标签是临时创建出来的 一刷新就会没
# 创建一个img标签的变量 imgELe
let imgEle = document.createElement('img')
# 添加属性值 如果是默认属性可以直接用.方式直接添加 例如img标签中src 和 alt都是默认属性
imgEle.src = 'bb.jpg'
# 如果该属性不是默认属性 就需要用到 .setAttribute()方法 添加属性 用键值对的方式添加
imgEle.setAttribute('username','jason')
# 将创建好的img标签添加到id为d1的标签里面去
* 第一步 先获取d1标签
let divEle = document.getElementById('d1')
* 第二步 直接.append()的方式将imgEle对象添加进去
divEle.append(imgEle)
'''
'''
*创建a标签
设置属性
设置文本
然后添加到标签内部
* 创建a标签
let aEle = document.createElement('a')
# 给a标签添加默认属性href值
aEle.href = 'https:www.baidu.com'
# 给a 标签里面放入文本 需要用到 .innerText方法
aEle.innerText = '点我有你好看'
# 因为需要将a标签插入到 div里面 且在p标签上面 因此需要先获取到两个标签
let divEle = document.getElementById('d1')
let pEle = document.getElementById('d2')
# 然后调用 .insertBefore() 方法将其插入到指定位置
divEle.insertBefore(aEle,pEle)
补充
setAttribute() 设置属性
getAttribute() 获取属性
removeAttribute() 移除属性
innerText 和 innerHTML
divEle.innerText # 获取标签内部所有的文本
"div 点我有你好看\n\ndiv>p\n\ndiv>span"
divEle.innerHTML # 内部文本和标签都拿到
"div\n <a href=\"https:www.baidu.com\">点我有你好看</a><p id=\"d2\">div>p</p>\n <span>div>span</span>\n\n"
divEle.innerText = 'heiheihei'
"heiheihei"
divEle.innerText = '<h1>heiheihei</h1>' # 不识别html标签
"<h1>heiheihei</h1>"
divEle.innerHTML = '<h1>heihei</h1> # 能够识别html标签
VM952:1 Uncaught SyntaxError: Invalid or unexpected token
divEle.innerHTML = '<h1>heihei</h1>'
"<h1>heihei</h1>"
获取值操作
* 获取用户数据标签内部的数据
let inputEle = document.getElementById('d1')
inputEle.value # 实时获取用户输入框输入的内容
# 获取文件
1.let fileELe = .....
2.fileEle.files[0] # 获取该文件对象
"撒大大大苏打"
class、css操作
let divEle = document.getElementById('d1')
divEle.classList # 获取标签所有类属性
DOMTokenList(2) ["bg_green", "bg_red", value: "bg_green bg_red"]
divEle.classList.remove('bg_red') # 移除类属性
undefined
divEle.classList.add('bg_red') # 添加类属性
undefined
divEle.classList.contains('c1') # 验证是否包含某个类属性
false
divEle.classList.toggle('bg_red') # 有则删除 无则添加
false
divEle.classList.toggle('bg_red')
true
divEle.classList.toggle('bg_red')
false
# DOM操作标签样式 统一先用style起手
let pEle = document.getElementsByTagName('p')[0]
pEle.style.color = 'red'
pEle.style.fontSize = '28px'
事件
到达某个事先设定的条件 自动触发的动作
<button id="d1" onclick="func1()">点我</button>
<button id="d2">点我</button>
<script>
// 第一种绑定方式
function func1() {
alert(12+"sf")
}
// 第二种
let btnEle = document.getElementById('d2')
btnEle.onclick = function () {
alert("wcc is a pig")
}
</script>
# script 标签既可以放在head内 也可以放在body内
但是通常情况下都是放在body内的最底部
原生js事件绑定
- 开关等案例
<div id="d1" class="c1 bg_orange bg_red">
</div>
<button id="d2">变色</button>
<script>
let btEle = document.getElementById('d2')
let divEle = document.getElementById('d1')
btEle.onclick = function () {
divEle.classList.toggle('bg_orange')
}
</script>
js展现当时时间案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
margin: 20px auto;
}
</style>
</head>
<body>
<div class="c1">
<input type="text" id="d1" style="height: 50px; width: 200px; display: block;">
<button id="d2">开始</button>
<button id="d3">结束</button>
</div>
<script>
let inputEle = document.getElementById('d1')
let startEle = document.getElementById('d2')
let endEle = document.getElementById('d3')
t = null
function showTime() {
let NowTime = new Date();
inputEle.value = NowTime.toLocaleString()
}
startEle.onclick = function () {
if (!t){
t = setInterval(showTime,1000)
}
}
endEle.onclick = function () {
clearInterval(t)
t = null
}
</script>
</body>
</html>