JS之BOM、DOM
https://www.cnblogs.com/12345huangchun/p/10171146.html
一、BOM对象
1，window对象
所有浏览器都支持window对象，从概念上讲：一个HTML文档对应一个window对象，从功能上讲：控制浏览器窗口的，从使用上讲：window对象不需要创建对象，直接使用即可
2，window对象方法
alert() 显示带有一段消息和一个确认按钮的警告框。 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 prompt() 显示可提示用户输入的对话框。 open() 打开一个新的浏览器窗口或查找一个已命名的窗口。 close() 关闭浏览器窗口。 setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。 clearInterval() 取消由 setInterval() 设置的 timeout。 setTimeout() 在指定的毫秒数后调用函数或计算表达式。 clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 scrollTo() 把内容滚动到指定的坐标。
3，方法的使用
3.1弹窗方法，警告窗alert、确认窗confirm、输入窗prompt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function waring() {
alert('小心点')
}
function certain() {
var status=confirm('确定跳转？');
if (status){
location.href='http://www.baidu.com';
}
}
function shuru() {
var content=prompt('请输入');
console.log(content)
}
</script>
</head>
<body>
<button onclick="waring()">警告窗</button>
<button onclick="certain()">确认窗</button>
<button onclick="shuru()">输入窗</button>
</body>
</html>
3.2 setinterval：间隔指定的毫秒数不停的执行指定的代码、clearInterval：停止方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function gettime() {
let now=new Date().toLocaleString();
let ss=document.getElementById('content');
ss.value=now;
}
var id;
function settime() {
if (id==undefined){
gettime();
id=setInterval(gettime,1000); #每1000毫秒（即1秒）后执行
}
}
function over() {
clearInterval(id);
id=undefined
}
</script>
</head>
<body>
<input type="text" id="content">
<button onclick="settime()">start</button>
<button onclick="over()">end</button>
</body>
</html>
3.3 settimeout（）：在指定的毫秒数后执行代码，cleartimeout（）：停止
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="set()">执行</button>
<button onclick="cle()">停止</button>
<p id="p1">欢迎光临</p>
<script>
var id;
function set(){
id=setTimeout(function () {
document.getElementById('p1').innerHTML='谢谢'
},3000)
}
function cle() {
clearTimeout(id)
}
</script>
</body>
</html>
二、DOM对象
HTML document object model（文档对象模型）
1，DOM树，展示文档中各个对象的关系，用于导航
2，节点关系
3，节点查找方法
3.1 直接查找
document.getElementById(); #通过id查找，得到是一个准确标签 document.getElementsByClassName(); #通过类查找，不管同一类有几个标签，得到都是由同一类标签组成的数组 document.getElementsByTagName(); #通过标签名查找，不管同一种标签有几个，得到的都是由同一种标签组成的数组 document.getElementsByName(); #通过name属性查找，返回的是同一name值的标签组成的数组
注意：涉及寻找元素，注意<script>的位置，写在被查找标签后面
3.2 导航查找
''' parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素 '''
注意：是没法直接找到所有的兄弟标签
4，节点操作
创建节点 var tag=document.createElement（标签名）
var father=document.Element.....
添加节点 追加一个子节点 father.appendchild(tag) 在father标签里加一个tag标签 在某个节点前面加一个节点 var ele=document.getElement..... father.insertbefore(tag,ele) 在father标签里的ele节点前加上tag节点
删除节点
var ele=document.getElement.....
father.removechild(ele) 删除father标签里的ele节点
替换节点
var ele=document.getElement.....
father.replace(tag,ele) 把father标签里的ele节点换成tag新节点
注意：所有的添加、删除、替换节点都是基于父级标签来操作的。创建几个节点，就最多可以添加几个节点。比如创建一个节点，最多添加几个节点
节点操作例子5，节点属性操作
5.1 文本操作：innerHTML，innerText
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1"><a href="#">欢迎来电</a></div>
<script>
var t1=document.getElementsByClassName('c1')[0].innerHTML;
var t2=document.getElementsByClassName('c1')[0].innerText;
console.log(t1);
console.log(t2);
</script>
</body>
</html>
innerHTML拿到的是对应标签里包含的所有内容，包括标签，比如上面的例子拿到‘<a href="#">欢迎来电</a>’
innerText拿到的只是内容，没有标签，比如上面的例子就只拿到‘欢迎来电’，而没有a标签
5.2 属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: yellow;
}
.c2{
color: white;
}
.c3{
font-size: 30px;
}
</style>
</head>
<body>
<div id="d1">你好啊</div>
<button onclick="set1()">加背景</button>
<button onclick="set2()">加背景，字体颜色，字体大小</button>
<button onclick="rem1()">去掉class属性</button>
<button onclick="get1()">拿到class属性</button>
<script>
var ele=document.getElementById('d1');
function set1(){
ele.setAttribute('class','c1') #给标签设置属性，第一个参数为属性名，第二参数为属性值
}
function set2() {
ele.setAttribute('class','c1 c2 c3')
}
function rem1() {
ele.removeAttribute('class') #把标签的某个属性给删除，参数为属性名
}
function get1() {
var va=ele.getAttribute('class'); #拿到标签的某个属性值，参数为属性名
console.log(va)
}
</script>
</body>
</html>
5.3 class属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: grey;
color: yellow;
font-size: 20px;
margin-bottom: 5px;
}
ul{
list-style: none;
}
.hh{
display: none;
}
</style>
</head>
<body>
<div class="c1">菜单一</div>
<ul class="hh">
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
<div class="c1">菜单二</div>
<ul class="hh">
<li>222</li>
<li>222</li>
<li>222</li>
</ul>
<div class="c1">菜单三</div>
<ul class="hh">
<li>333</li>
<li>333</li>
<li>333</li>
</ul>
<script>
var eles=document.getElementsByClassName('c1');
for ( var i=0;i<eles.length;i++){
eles[i].onclick=function () {
for (var j=0;j<eles.length;j++){
if (eles[j]!=this){
eles[j].nextElementSibling.classList.add('hh') #在标签的class属性列表里加‘hh类’。若已经存在，就不用添加
}
}
this.nextElementSibling.classList.remove('hh') #把标签的class属性列表里删除‘hh类’，若不存在，就不用删除
}
}
5.4 改变css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="p1">这是一个寂寞的天，下着有些伤心的雨</p>
</body>
<script>
document.getElementById('p1').style.color='red';
document.getElementById('p1').style.fontSize='30px';
</script>
</html>
注意：对于中间用—连接的属性，在这里中间的—给去掉。比如font—size写成fontSize，后面的单词首字母大写
5.5 value操作
对于input，select，textarea标签来说，可以.value获取到value值
6，事件
6.1 事件分类
onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onmouseleave 鼠标从元素离开 onselect 文本被选中。 onsubmit 确认按钮被点击。
6.2 绑定事件方法
方法一：
<div id="div" onclick="foo(this)">点我呀</div>
<script>
function foo(self){ // 形参不能是this;
console.log("点你大爷!");
console.log(self);
}
</script>
方法二：
<p id="abc">试一试!</p>
<script>
var ele=document.getElementById("abc");
ele.onclick=function(){
console.log("ok");
console.log(this); // this直接用
};
</script>
6.3 事件介绍
onload：给body元素加onload，意味着页面内容被加载完成然后做某事，应用场景：有些动作需要在页面加载完成后立即执行，就可以用这属性
View Codeonsubmit：当表单提交触发，该属性只能给form元素使用。在表单提交前验证用户输入是否正确，如果验证失败，在该方法中我们应该阻止表单的提交
View Codeonselect：
View Codeonchange：
View Codeonkeydown：
View Code7，实例
7.1 二级联动
View Code7.2 导航栏
View Code7.3三级联动
View Code7.4模态对话框
View Code
浙公网安备 33010602011771号