前端（四）BOM和DOM
目录
a.window对象 b.location对象 c.浏览器弹出框 d.计时器 e.其他对象
a.导入方法：点击变色 b.计时器 c.搜索框 d.select联动
4.1JavaScript的组成
ECMAScript：一种语言的规范
BOM：Browser Object Model（浏览器对象模型）
DOM：Document Object Model（文件对象模型）
4.2BOM
a.window对象
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口b.location对象
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面
c.浏览器弹出框
1.警告框：只显示文本内容
alert('文本内容')
2.确认框：用户可以点击确认或取消，返回布尔值
confirm('你18？？？')
3.提示框：用户可以输入文本，返回文本
prompt('请输入：')
d.计时器
var t = setTimeout("alert('xxx')", 1000);//多少毫秒后执行前面的js语句
clearTimeout("ID");//取消还未执行的暂停，将暂停ID传递给它
var t = setIntervall("alert('xxx')", 1000);//每隔多少毫秒循环执行
clearIntervall(t) //取消还未执行的循环，将暂停ID传递给它e.其他对象
navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
history.forward() // 前进一页
history.back() // 后退一页4.3DOM
a.查找标签
1.根据ID找标签(有且只能找到一个)
document.getElementById("ID值")
2.根据class名字找(找到的可以是多个)
document.getElementsByClassName("class值")
3.根据标签名找(找到的可以是多个)
document.getElementsByTagName("标签名")
间接查找：
var idEle = document.getElementById("ID值")
idEle.parentElement 父节点标签元素
idEle.children 所有子标签
idEle.firstElementChild 第一个子标签元素
idEle.lastElementChild 最后一个子标签元素
idEle.nextElementSibling 下一个兄弟标签元素
idEle.previousElementSibling 上一个兄弟标签元素b.标签操作
var imgEle=document.createElement("img");//创建标签
somenode.appendChild(newnode)；//追加一个子节点（作为最后的子节点）
somenode.insertBefore(newnode,某个节点);//把增加的节点放到某个节点的前边。
imgEle.setAttribute("src", "图片地址");//添加src内容
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);//在d1Ele追加一个子节点
somenode.removeChild(要删除的节点)//删除标签
somenode.replaceChild(新标签, 某个节点);//替换标签var divEle = document.getElementById("d1")
divEle.innerText="1" //标签内文本内容
divEle.innerHTML="<p>2</p>" //整个标签
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."c.样式操作
class操作：
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
Js操作CSS属性：
1.对于没有中横线的CSS属性一般直接使用style.属性名即可。
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可
obj.style.marginTop
obj.style.borderLeftWidth4.4事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）a.导入方法：点击变色
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>class相关操作</title>
<style>
.c1 {
height: 200px;
width: 200px;
border-radius: 50%;
background-color: grey;
}
.c2 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="c1 c2 c3" onclick="change(this);">div</div>
<div class="c1 c2 c3">div</div>
<div class="c1 c2 c3">div</div>
<div class="c1 c2 c3">div</div>
<script>
function change(ths) {
ths.classList.toggle("c2");
}
// 第二种绑定事件的方式
var divEles = document.getElementsByTagName("div");
for (var i=0;i<divEles.length;i++){
divEles[i].onclick=function () {
this.classList.toggle("c2");
}
}
</script>
</body>
</html>b.计时器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>定时器练习</title>
</head>
<body>
<input id="i1" type="text">
<input id="start" type="button" value="开始">
<input id="stop" type="button" value="停止">
<script>
// 声明一个全局的t,保存定时器的ID
var t;
// 在input框里显示当前时间
// 1. 获取当前时间
function foo() {
var now = new Date();
var nowStr = now.toLocaleString();
// 2. 把时间字符串填到input框里
var i1Ele = document.getElementById("i1");
i1Ele.value = nowStr;
}
// 点开始让时间动起来
// 找到开始按钮,给它绑定事件
var startButton = document.getElementById("start");
startButton.onclick=function () {
foo();
// 每隔一秒钟执行foo
if (t===undefined){
t = setInterval(foo, 1000); // 把定时器的ID复制给之前声明的全局变量t
}
};
// 点停止
// 找到停止按钮,给它绑定事件
var stopButton = document.getElementById("stop");
stopButton.onclick=function () {
// 清除之前设置的定时器
clearInterval(t); // 清除t对应的那个定时器,t的值还在
console.log(t);
t = undefined;
}
</script>
</body>
</html>c.搜索框
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>搜索框示例</title>
</head>
<body>
<input type="text" id="i1" value="玩具">
<input type="button" value="搜索">
<script>
// 找到input框
var i1Ele = document.getElementById("i1");
i1Ele.onfocus=function () {
// 把value清空
this.value="";
};
i1Ele.onblur=function () {
// 失去焦点之后把如果值为空就填回去
if (!this.value.trim()){
this.value="玩具";
}
}
</script>
</body>
</html>d.select联动
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>select联动示例</title>
</head>
<body>
<select id="s1">
<option value="0">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
</select>
<select id="s2"></select>
<script>
var data = {1: ["昌平区", "朝阳区", "海淀区"], 2: ["静安区", "闵行区", "浦东区"]};
// 给第一个select绑定事件,绑定的是onchange事件
var s1Ele = document.getElementById("s1");
s1Ele.onchange = function () {
// 取到你选的是哪一个市
console.log(this.value);
// 把对应市的区填到第二个select框里面
var areas = data[this.value]; // 取到市对应的区
// 找到s2
var s2Ele = document.getElementById("s2");
// 清空之前的
s2Ele.innerHTML="";
// 生成option标签
for (var i = 0; i < areas.length; i++) {
var opEle = document.createElement("option");
opEle.innerText = areas[i];
// 添加到select内部
s2Ele.appendChild(opEle);
}
}
</script>
</body>
</html>