什么是BOM
bom:浏览器对象模型
什么是DOM
dom:文档对象模型
BOM操作:
调用windows浏览器窗口
windows对象可以通过点调用子对象
windows.navigator对象,可以获取浏览器相关信息
navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统
screen对象:获取屏幕信息
screen.navailWidth 可用屏幕宽度
screen.availHeight 可用屏幕高度
history包含浏览器历史,说是历史就是前进后退两个功能
history.forward() 前进一页
history.back() 返回上一页
location对象:获取信息
location.href 获取url
location.href='URL' 跳转到指定页面
location》reload() 重新加载页面
弹出框:提示框,警告框,确认框
1、警告框:
alter('内容');
2、确认框:
confirm(‘确定吗?’)
用于用户验证或者接受一些信息,出现框后,需要榕湖确认,点击确认返回true,点击取消,返回值为false
3、提示框:
prompt("在框内输入信息")
提示框需要你输入内容,点击确定或者取消这个确认框才会取消。如果确认,返回值为输入的值,如果取消,那么返回值为null
计时:SetTimeout()
分为一次计时:
循环计时:
语法:
var t=setTimeout(“语句”,毫秒)
取消:
clearTimeout(t) 括号内的值为设置技术定义的函数
循环指定周期:setlnterval()
语法:
setInterval("语句",时间间隔)
取消:
clearInterval("设置循环的变量名")
DOM:对文档的内容进行抽象和概念化
dom固定html文档中的乜咯成分都是一个节点(node)
文档节点:代表整个文档
元素节点:代表一个元素(标签)
文本节点(text对象):代表元素(标签)中的文本
属性节点:代表一个属性,元素(标签)才有属性
JavaScript可以通过dom创建动态的html:
JavaScript可以改变页面中所有html元素;
JavaScript可以改变页面中所有html属性
JavaScript可以改变页面中所有css样式
JavaScript可以怼页面中所有时间做出反应
查找标签
1、直接查找
document.getELementById 根据id获取一个标签
document.getELementsByClassName 根据class属性获取
document.getElementsByTagName 根据标签获取标签合集
2、间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
netxElementSibling 下一个兄弟标签元素
previousElementSibling 下一个兄弟标签元素
节点操作:
创建节点:
createElement(标签名)
添加节点:
语法:
追加一个子节点(作为最后的子节点)
somenode.appendChild(newnode);
把增加的节点放到某个节点的前面:
somenode.insertBefore(newnode,某个节点)
删除节点:
语法:
获取要删除的元素,通过父元素调用该方法删除
somenode.removeChild(要删除的节点)
替换节点:
语法:
somenode.replaceChild(newnode, 某个节点);
属性节点:
获取文本节点的值
设置文本节点的值:
获取值
语法:
elementNode.value
使用标签:
input
select
textarea
class操作:
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true,否在返回false
classList.toggle(cls) 存在就删除,否则就添加
常用事件:
两种绑定事件的方法:
1、标签内直接调用相应事件函数
2、js代码自动查找标签并绑定事件
<div class="bg-red " id="d1"></div> <button id='b1' onclick='change();'>开关1</button> <button id='b2'>开关2</button> <script> // 标签直接绑定事件 function change(){ var d1Ele = document.getElementById('d1'); d1Ele.classLict.toggle('bg-green'); } // 通过JS代码绑定事件 var b2Ele = document.getElementById('b2'); b2Ele.onclick = ()=>{ change(); }
搜索框案例
<input type="text" value="苹果手机" id="i1"> var i1Ele = document.getElementById('i1'); i1Ele.onfocus = function (ev) { i1Ele.value = ''; // 也可以直接用this this.value = '' }; i1Ele.onblur = function (ev) { i1Ele.value = '苹果电脑'; // 也可以直接用this this.value = '苹果电脑' }
计时器案例
// 全局变量 var t; // 步骤1 // 将当前时间填写到i1中 var now = new Date(); var i1Ele = document.getElementById('i1'); i1Ele.value = now.toLocalString(); // 步骤2(点开始,时间动起来)>>>(每隔一秒执行一次展示时间操作) // 将添加时间的功能封装成一个函数 function showTime(){ var now = new Date(); var i1Ele = document.getElementById('i1'); i1Ele.value = now.toLocalString(); }; // 页面一刷新先展示当前时间 showTime() // 找到开始按钮,绑定事件 var b1Ele = document.getElementById('b1'); b1Ele.onclick = function(){ // 判断是否已经开启过定时器了 if (!t){ // t指代定时器 t = setInterval(showTime,1000); } } // 步骤3(给停止按钮绑定事件,点击后清除定时器) var b2Ele = document.getElementById('b1'); b2Ele.onclik = function(){ // 问题来了,清除谁呢?需要有一个变量指代定时器 clearInterval(t); } // 步骤4(如果点击多次开始按钮,发现无法清除定时器) // 判断定时器是否已开启
省市联动(选择省后可以显示选择对应市)
data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]}; // 先提前将两个标签对象查找到 var pEle = document.getElementById('province'); var cEle = document.getElementById('city'); // 先展示省份信息 for (var province in data){ var proEle = document.createElement('option'); proEle.innerText = province; pEle.appendChild(proEle) } // 绑定变化事件 pEle.onchange = function () { // 获取对应的省信息 var currentProvince = pEle.value; // 将之前的省对应的市清除 cEle.innerHTML = ''; // 添加默认的请选择项 var newEle = document.createElement('option'); newEle.innerText = '请选择'; cEle.appendChild(newEle); // 获取当前省对应的市 relCity = data[currentProvince]; // 循环对应的市,添加到市对应的选择框中 for(var i=0;i<relCity.length;i++){ var cityEle = document.createElement('option'); cityEle.innerText = relCity[i]; cEle.appendChild(cityEle) } }