简介
- BOM（Browser Object Model）
浏览器对象模型：js代码操作浏览器 - DOM（Document Object Model）
文档对象模型：js代码操作标签
BOM操作
window对象
- window对象指代的就是浏览器的窗口
- 相关操作
//当前浏览器的高
window.innerHeight
670
//宽
window.innerWidth
1420
//打开网址 第二个窗口为空即可
//打开的页面是当前页面的子页面
window.open("https//:www.baidu.com", "", "height=800px,width=800px")
Window {window: Window, self: Window, document: document, name: "", location: Location, …}
//指定初始大小和位置
window.open("https//:www.baidu.com", "", "height=800px,width=800px,top=400px, letf=400px")
Window {window: Window, self: Window, document: document, name: "", location: Location, …}
//关闭当前页面
window.close()
window子对象
- navigator
//名称
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.212 Safari/537.36"
//获取ua请求头
//用于辨别是否为浏览器访问
window.navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36"
//查询当前平台
window.navigator.platform
"Win32"
- history
//回退页面
window.history.back()
//前进页面
window.history.forward()
- location
//获取当前地址
window.location.href
"https://edu.csdn.net/content/subscribe"
// 跳转到指定地址
window.location.href = "https://www.baidu.com"
//刷新当前页面
window.location.reload()
弹出框
- 警告框alert
- 确认框confirm
- 提示框prompt
//只有信息显示
alert("你完蛋了")
undefined
//用户可以选择确认或者取消
//返回值是布尔值
confirm("你确定？")
true
confirm("你确定？")
false
//可以设置默认值
//可以获取用户输入的值
prompt("输入你的号码", 1234654564)
"456456456"
计时器相关
- 单次触发
function f1 (){
alert(213)
}
//设置定时任务
//三秒后执行f1
let t = setTimeout(f1, 3000);
//取消定时任务 设置时要使用变量存储
clearTimeout(t);
- 循环触发
function f1 (){
alert(213)
}
//设置循环定时任务
//没隔三秒执行一次
let t = setInterval(f1, 3000);
//清除任务
clearInterval(t);
DOM操作
DOM操作需要用到关键字document
查找标签
- 直接查找
//id查找 结果唯一
document.getElementById("d1")
<div id="d1">…</div>
//class查找 结果不一定唯一 返回数组
document.getElementsByClassName("c1")
HTMLCollection [span.c1]
//标签查找 结果不一定唯一 返回数组
document.getElementsByTagName("div")
HTMLCollection(3) [div, div#d1, div, d1: div#d1]
//后序需要用到标签时。可以先用变量名存储 xxEle
- 间接查找
//父标签查找
let spanELe = document.getElementsByClassName("c1")[0]
spanELe.parentElement
<p>…</p>
spanELe.parentElement.parentElement
<div id="d1">…</div>
spanELe.parentElement.parentElement.parentElement
<div>…</div>
//子标签查找
let idEle = document.getElementById("d1")
//第一个子标签
idEle.children[0]
<p>…</p>
//第一个子标签 和上面相同
idEle.firstElementChild
<p>…</p>
//最后一个子标签
idEle.lastElementChild
<p>…</p>
idEle.lastElementChild.children
HTMLCollection [span.c1]
//同级别下面第一个
idEle.nextElementSibling
//同级别下面第一个
idEle.previousElementSibling
//两种查询都可以一直点
//用非id查询的也需要索引取值
//用子标签查询时一定要记得索引取值
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
节点操作
向标签中添加一个img子标签
//创建元素
let imgEle = document.createElement('img')
//设置元素的属性 自定义属性不能用该方法
imgEle.src = '222.jpg'
//设置自定义元素的属性 默认src也可以用该方法设置
imgEle.setAttribute('name','wcy')
imgEle
<img src="222.jpg" name="wcy">
let idEle = document.getElementById('d1')
// 为idEle添加一个子元素img
idEle.appendChild(imgEle)
//移除元素中的属性
imgEle.removeAttribute('name')
向标签中添加一个a标签
let aElt = document.createElement('a')
//设置href属性
aElt.href = "https://www.baidu.com"
"https://www.baidu.com"
//标签中的文字设置文字
aElt.innerText = '点我'
"点我"
aElt
<a href="https://www.baidu.com">点我</a>
let divEle = document.getElementById('d1')
divEle.appendChild(aElt)
<a href="https://www.baidu.com">点我</a>
方法补充
// 添加 替换 删除 子标签
appendChild()
replaceChild()
removeChild()
// 设置 获取 移除 属性
setAttribute()
getAttribute()
removeAttribute()
// innerText 和 innerHTML
//可以设置和获取标签中的文本
//该方法设置html标签形式的文本显示的还是文本
Ele.innerText
//可以设置和获取标签中所有的HTML代码包括文本
//该方法设置html标签形式的文本显示的是html代码的效果
Ele.innerHTML
获取值操作
获取用户输入的值
- 获取标签内的数据
//获取input框
let inputEle = document.getElementById("d1")
undefined
// 获取值
inputEle.value
"12313"
- 获取用户上传文件！！
let Ele = document.getElementById("d3")
Ele
<input type="file" id="d3">
//value只能获取文件名 无法获取文件数据
Ele.value
"C:\\fakepath\\4k图片.py"
//获取文件信息
Ele.files
FileList {0: File, length: 1}0: File {name: "4k图片.py", lastModified: 1618761154891, lastModifiedDate: Sun Apr 18 2021 23:52:34 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 1582, …}length: 1__proto__: FileList
//获取真正的文件对象
Ele.files[0]
File {name: "4k图片.py", lastModified: 1618761154891, lastModifiedDate: Sun Apr 18 2021 23:52:34 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 1582, …}
属性操作
- class操作
let Ele = document.getElementsByClassName("c1")[0]
undefined
Ele
<div class="c1 bg_red bg_blue"> </div>
//获取class属性列表
Ele.classList
DOMTokenList(3) ["c1", "bg_red", "bg_blue", value: "c1 bg_red bg_blue"]
//移除属性
Ele.classList.remove("bg_blue")
Ele.classList
DOMTokenList(2) ["c1", "bg_red", value: "c1 bg_red"]
//添加属性
Ele.classList.add("bg_blue")
DOMTokenList(3) ["c1", "bg_red", "bg_blue", value: "c1 bg_red bg_blue"]
// 判断属性是否存在
Ele.classList.contains("bg_yellow")
false
// 如果属性存在就删除 不存在就添加
Ele.classList.toggle
ƒ toggle() { [native code] }
Ele.classList.toggle("bg_blue")
false
Ele.classList.toggle("bg_blue")
true
Ele.classList.toggle("bg_blue")
false
Ele.classList.toggle("bg_blue")
true
- 更改标签样式
let Ele = document.getElementsByTagName("p")[0]
undefined
Ele
<p>哈哈哈哈哈</p>
//添加边框属性
Ele.style.border = "2px solid red"
"2px solid red"
//添加颜色属性
Ele.style.color = "red"
"red"
Ele.style.fontSize = "20Px"
"20Px"
//更改样式只需用标签的style中的各个属性
事件
当达到某个事先设定的条件 自动触发的动作
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。
onblur 元素失去焦点。 用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
绑定事件
<button onclick="f1()">点我</button>
<button id="d1">点我</button>
<script>
function f1(){
alert(111)
}
let btnEle = document.getElementById("d1");
btnEle.onclick = function(){
alert(222)
}
</script>
js事件操作实例
- 开关事件
<style>
div{
height: 200px;
width: 200px;
border-radius: 50%;
}
.bg_red{
background-color: red;
}
.bg_yellow{
background-color: yellow;
}
</style>
<body>
<div class="bg_red bg_yellow"></div>
<button id="d1">开关</button>
<script>
//获取元素
let divEle = document.getElementsByTagName('div')[0]
let btnEle = document.getElementById("d1")
//绑定事件
btnEle.onclick = function(){
//有则删除 没有则添加
divEle.classList.toggle('bg_yellow')
}
</script>
</body>
- input框焦点事件
<input type="text" id="d1" value="默认值">
<script>
let inputEle = document.getElementById("d1");
// 获取焦点事件
inputEle.onfocus = function(){
inputEle.value = '';
}
//失去焦点事件
inputEle.onblur = function(){
inputEle.value = "哈哈哈"
}
</script>
- 实时时间显示
<body>
<p style="width: 200px; height: 100px; border: 2px red solid;" id="d1"></p>
<button id="d2">开始</button>
<button id="d3">停止</button>
<script>
let pEle = document.getElementById("d1");
let start = document.getElementById("d2");
let end = document.getElementById("d3");
//用于存储定时事件
t = null;
function getTime(){
//获取时间
let time = new Date();
//添加至标签中
pEle.innerText = time.toLocaleString()
}
start.onclick = function(){
//只有当t为空时才添加循环定时事件
if(!t){
//每秒刷新一次时间
t = setInterval(getTime, 1000);
}
}
end.onclick = function(){
clearInterval(t)
//停止后将t清空
t = null;
}
</script>
</body>
- 省市对应
<body>
<select name="" id="d1">
<option value="" selected disabled>--请选择--</option>
</select>
<select name="" id="d2"></select>
<script>
let proEle = document.getElementById("d1");
let cityEle = document.getElementById("d2");
let data = {
"河北省": ["廊坊", "邯郸"],
"北京": ["朝阳区", "海淀区"],
"山东": ["威海市", "烟台市"]
};
//添加省市
for(key in data){
//创建option
let optionEle = document.createElement("option");
optionEle.innerText = key;
optionEle.value = key;
//添加到select中
proEle.appendChild(optionEle);
}
//添加对应的城市 文本域变换事件
proEle.onchange = function(){
//清空城市下拉框中的信息 防止叠加上一次的结果
cityEle.innerHTML = '';
//获取省对应的城市
let pro = proEle.value;
let cities = data[pro];
// 循环添加城市
for(let i=0; i < cities.length; i++){
let optionEle = document.createElement("option");
optionEle.innerText = cities[i];
optionEle.value = cities[i];
cityEle.appendChild(optionEle);
}
}
</script>
1514
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
