BOM&DOM
BOM
Browser Object Model 浏览器对象模型,于浏览器对话.
window对象
所有浏览器支持window对象.
调用window对象和属性时,可以省略window对象的引用.
window.document.write() 可以简写成 document.write()
常用方法:
- window.innerHeight -- 浏览器窗口的内部高度
- window.innerWidth -- 浏览器窗口的内部宽度
- window.open() -- 打开新窗口
- window.close() -- 关闭当前窗口
弹出框
警告框
需要用户点击确定按钮才能继续操作.
alert("see it?")
确认框
需要用户点击去确定或者取消按钮才能继续操作.
confirn("are you sure?")
提示框
需要用户输入某个值,然后点击确认或者取消按钮才能继续操作.
prompt("enter under there","your answer")
计时相关
setTimeout()
var t= setTimeout("js statements",ms)
jsstatements js语句
ms毫秒
clearTimeout()
clearTimeout(t)
setInterval()
设置周期性执行的值,不停息执行
setInterval("JS statements",ms)
clearInterval()
clearInterval(t)
DOM
Document Object Model 文档对象模型,可以访问HTML文档的所有元素.
用来对文档的内容进行抽象和概念化.
当网页被加载时,浏览器会创建页面的文档对象模型.
HTML DOM 树
HTML DOM 模型被构造为对象的树.
DOM标注规定HTML文档中每个成分都是一个节点(node):
查找标签
直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByClassName 根据class属性获取,生成一个数组,取[0]
document.getElementsByTagName 根据标签名获取标签合集,生成一个数组,取[0]
注意:
js代码尽量放在body的最下面
间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
节点操作
创建节点
var divEle = document.createElement("div");
其中内置属性可以直接动过`.`的方式直接添加
添加节点
追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)；
把增加的节点放到某个节点的前边。
somenode.insertBefore(newnode,某个节点)
aEle.innerText = "check me " //添加内部文本
divEle.insertBefore(aEle,pEle) //指定位置添加元素
删除节点
获得要删除的元素，通过父元素调用该方法删除。
somenode.removeChild(要删除的节点)
替换节点
somenode.replaceChild(newnode, 某个节点);
属性节点
获取节点值
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML
设置文本节点值
var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"
指定CSS操作
obj.style.backgroundColor="red"
JS操作CSS属性的规律：
1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
事件
当达到某个状态的时候,自动触发某个动作或者响应.
常用事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
事件的绑定过程中,thisi相当于python中的self
练习:
//显示时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id = "d1">
<button id = 'b1'>start</button>
<button id = 'b2'>end</button>
<script>
var t = null;
var b1Ele = document.getElementById('b1');
var b2Ele = document.getElementById('b2');
var iEle = document.getElementById('d1');
function showTime() {
var currentTime = new Date();
var ctime = currentTime.toLocaleString()
iEle.value =ctime
}
b1Ele.onclick = function () {
if(!t){
t = setInterval(showTime,1000)
}
};
b2Ele.onclick = function () {
clearInterval(t);
t = null
}
</script>
</body>
</html>
//闪光灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
height: 400px;
width: 400px;
border-radius: 50%;
}
.bg_green {
background-color: green;
}
.bg_red {
background-color: red;
}
</style>
</head>
<body>
<div class="c1 bg_green bg_red"></div>
<button id = "d1">bianse</button>
<script>
let btnEle = document.getElementById('d1');
btnEle.onclick = function () {
// 找到div标签
var divEle = document.getElementsByClassName('c1')[0];
// 修改类属性 有在删除 无则添加
divEle.classList.toggle('bg_red')
}
</script>
</body>
</html>
//聚焦变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" value="linux" id="d1">
<script>
var iEle = document.getElementById('d1');
iEle.onfocus = function () {
iEle.value = ''
}
iEle.onblur = function () {
iEle.value = 'next time'
}
</script>
</body>
</html>
//省市区
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="d1">sheng</select>
<select name="" id="d2">shi</select>
<script>
var s1Ele = document.getElementById('d1');
var s2Ele = document.getElementById('d2');
var data = {
"河北省": ["廊坊", "邯郸",'石家庄'],
"北京": ["朝阳区", "海淀区",'昌平区'],
"山东": ["威海市", "烟台市",'青岛'],
"上海":["静安区",'黄浦区','徐汇区']
};
for (let province in data){
var optEle = document.createElement('option');
optEle.innerText = province;
optEle.value = province;
s1Ele.appendChild(optEle)
}
s1Ele.onchange = function () {
var currentPro = this.value;
var cityList = data[currentPro];
s2Ele.innerHTML = ''
for (let i=0;i<cityList.length;i++){
var optEle = document.createElement('option');
optEle.innerText = cityList[i];
optEle.value = cityList[i]
s2Ele.appendChild(optEle)
}
}
</script>
</body>
</html>
