JS之BOM、DOM
一、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新节点
注意：所有的添加、删除、替换节点都是基于父级标签来操作的。创建几个节点，就最多可以添加几个节点。比如创建一个节点，最多添加几个节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c2">
<button class="c1">添加节点</button>
<p>这是一个寂寞的天，下着有些伤心的雨</p>
<button class="c3">删除节点</button><br>
<button class="c4">替换节点</button>
</div>
<script>
var ele =document.getElementsByClassName('c1')[0];
var ele1=document.getElementsByClassName('c2')[0];
ele.onclick=function () {
var tag=document.createElement('a');
tag.setAttribute('href','#');
tag.innerHTML='点我';
ele1.appendChild(tag);
var tag1=document.createElement('p');
tag1.innerHTML='我哭了';
var ele3=document.getElementsByTagName('p')[0];
ele1.insertBefore(tag1,ele3);
};
var ele2=document.getElementsByClassName('c3')[0];
var ele3=document.getElementsByTagName('p')[0];
ele2.onclick=function () {
ele1.removeChild(ele3)
};
var ele4=document.getElementsByClassName('c4')[0];
ele4.onclick=function () {
var tag1=document.createElement('p');
tag1.innerHTML='下雨管你吊事，干活去';
tag1.setAttribute('style','font-size:30px');
ele1.replaceChild(tag1,ele3);
}
</script>
</body>
</html>
节点操作例子
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，意味着页面内容被加载完成然后做某事，应用场景：有些动作需要在页面加载完成后立即执行，就可以用这属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <script>
/*
window.onload=function(){
var ele=document.getElementById("ppp");
ele.onclick=function(){
alert(123)
};
}; */ function fun() {
var ele=document.getElementById("ppp");
ele.onclick=function(){
alert(123)
};
} </script>
</head>
<body onload="fun()"> <p id="ppp">hello p</p> </body>
</html>
onsubmit：当表单提交触发，该属性只能给form元素使用。在表单提交前验证用户输入是否正确，如果验证失败，在该方法中我们应该阻止表单的提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <script> window.onload=function(){
//阻止表单提交方式1().
//onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行. var ele=document.getElementById("form");
ele.onsubmit=function(event) {
// alert("验证失败 表单不会提交!");
// return false; // 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。
alert("验证失败 表单不会提交!");
event.preventDefault(); } }; </script>
</head>
<body> <form id="form">
<input type="text"/>
<input type="submit" value="点我!" />
</form> </body>
</html>
onselect：
<input type="text"> <script>
var ele=document.getElementsByTagName("input")[0]; ele.onselect=function(){
alert(123);
} </script>
onchange：
<select name="" id="">
<option value="">111</option>
<option value="">222</option>
<option value="">333</option>
</select> <script>
var ele=document.getElementsByTagName("select")[0]; ele.onchange=function(){
alert(123);
} </script>
onkeydown：
<input type="text" id="t1"/>
<script type="text/javascript">
var ele=document.getElementById("t1");
ele.onkeydown=function(e){
e=e||window.event;
var keynum=e.keyCode;
var keychar=String.fromCharCode(keynum);
alert(keynum+'----->'+keychar);
};
</script>
7，实例
7.1 二级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<select name="pro" id="i1">
<option value="0">请选择省份</option>
<option value="1">四川省</option>
<option value="2">广东省</option>
<option value="3">河南省</option>
</select>
<select name="citys" id="i2">
<option value="0">请选择城市</option>
</select>
</div>
<script>
var related={'1':['成都','绵阳','南充','泸州','宜宾'],'2':['广州','深圳','珠海','中山','汕头'],'3':['焦作','郑州','洛阳','新乡','驻马店']};
var ele=document.getElementById('i1');
ele.onchange=function () {
var list1=related[this.value];
var father=document.getElementById('i2');
father.length=1;
for (var i=0;i<list1.length;i++){
var new1=document.createElement('option');
new1.innerText=list1[i];
father.appendChild(new1);
}
}
</script>
</body>
</html>
7.2 导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
background-color: darkgray;
width: 100%;
}
.c1{
width: 500px;
margin: 0 auto;
color: blue;
font-size: 30px;
}
.c3{
width: 1100px;
margin: 0 auto;
margin-top: 50px;
}
img{
width: 200px;
}
.hidde{
display: none;
}
</style>
</head>
<body>
<div id="d1" onmouseover="xiaoshi()">
<div class="c1">
<span class="c2" id="s1">电脑</span>
<span class="c2" id="s2">手机</span>
<span class="c2" id="s3">家电</span>
<span class="c2" id="s4">照相机</span>
</div>
</div>
<div class="c3">
<div class="cc s1 hidde">
<img src="11.jpg" alt="" >
<img src="12.jpg" alt="" >
<img src="13.jpg" alt="" >
<img src="14.jpg" alt="" >
<img src="15.jpg" alt="" ></div>
<div class="cc s2 hidde">
<img src="21.jpg" alt="" >
<img src="22.jpg" alt="" >
<img src="23.jpg" alt="" >
<img src="24.jpg" alt="" >
<img src="25.jpg" alt="" ></div>
<div class="cc s3 hidde">
<img src="31.jpg" alt="" >
<img src="32.jpg" alt="" >
<img src="33.jpg" alt="" >
<img src="34.jpg" alt="" >
<img src="35.jpg" alt="" ></div>
<div class="cc s4 hidde">
<img src="41.jpg" alt="" >
<img src="42.jpg" alt="" >
<img src="43.jpg" alt="" >
<img src="44.jpg" alt="" >
<img src="45.jpg" alt="" ></div>
</div>
<script>
var lists=document.getElementsByClassName('c2');
for (var i=0;i<lists.length;i++){
lists[i].onmouseover=function () {
var eles=document.getElementsByClassName('cc');
for (var j=0;j<eles.length;j++){
eles[j].classList.add('hidde');
}
this.setAttribute('style','background-color:white');
var ele=document.getElementsByClassName(this.id)[0];
ele.classList.remove('hidde');
};
lists[i].onmouseleave=function () {
// var ele=document.getElementsByClassName(this.id)[0];
this.removeAttribute('style');
// ele.classList.add('hidde');
}
}
// function xiaoshi() {
// var ss=document.getElementsByClassName('cc');
// for (var j=0;j<ss.length;j++){
// ss[j].classList.add('hidde');
// }
// }
</script>
</body>
</html>
7.3三级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<select name="pro" id="i1">
<option value="0">请选择省份</option>
<option value="1">四川省</option>
<option value="2">广东省</option>
<option value="3">河南省</option>
</select>
<select name="citys" id="i2">
<option value="0">请选择城市</option>
</select>
<select name="qu" id="i3">
<option value="0">请选择区</option>
</select>
</div>
<script>
var related={'1':['成都','绵阳','南充','泸州','宜宾'],'2':['广州','深圳','珠海','中山','汕头'],'3':['焦作','郑州','洛阳','新乡','驻马店']};
var relate1={'11':['金牛区','锦江区'],'12':['校区','大区'],'13':['阆中','禁区'],'14':['纳溪区','江阳区'],'15':['翠屏区','蓝池区'],
'21':['广1','广2'],'22':['深1','深2'],'23':['珠1','珠2'],'24':['中1','中2'],'25':['汕1','汕2'],
'31':['焦1','焦2'],'32':['郑1','郑2'],'33':['洛1','洛2'],'34':['新1','新2'],'35':['驻1','驻2']};
var ele=document.getElementById('i1');
ele.onchange=function () {
var list1=related[this.value];
var father=document.getElementById('i2');
var father1 = document.getElementById('i3');
father1.length=1;
father.length=1;
for (var i=0;i<list1.length;i++){
var new1=document.createElement('option');
new1.innerText=list1[i];
var n=i+1+this.value*10;
new1.setAttribute('value',n);
father.appendChild(new1);
}
};
var ele1=document.getElementById('i2');
ele1.onchange=function () {
var list2 = relate1[this.value];
var father1 = document.getElementById('i3');
father1.length = 1;
for (var m=0; m<list2.length; m++) {
var new2 = document.createElement('option');
new2.innerText = list2[m];
var n1 =m +1+this.value *10;
new2.setAttribute('value', n1);
father1.appendChild(new2);
}
}
</script>
</body>
</html>
7.4模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c2{
width: 100%;
height:1000px;
background-color: grey;
position: absolute;
left:0;
top:0;
opacity: 0.4;
}
.c3{
width: 300px;
height: 300px;
background-color: white;
position: fixed;
top:300px;
left:900px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<button class="c1" onclick="set()">entry</button>
<div class="c2 hide"></div>
<div class="c3 hide">
<button onclick="relea()">关闭</button><br>
这是一个寂寞的天，下着有些伤心的雨
这是一个寂寞的天，下着有些伤心的雨
这是一个寂寞的天，下着有些伤心的雨
这是一个寂寞的天，下着有些伤心的雨
这是一个寂寞的天，下着有些伤心的雨
这是一个寂寞的天，下着有些伤心的雨
</div>
<script>
function set() {
var eles=document.getElementsByTagName('div');
for (var i=0;i<eles.length;i++){
eles[i].classList.remove('hide')
}
}
function relea() {
var eles = document.getElementsByTagName('div');
for (var i = 0; i < eles.length; i++) {
eles[i].classList.add('hide')
}
}
</script>
</body>
</html>
JS之BOM、DOM的更多相关文章
- JS之BOM和DOM(来源、方法、内容、应用)
1.Javascript组成(此文为转载) JavaScript的实现包括以下3个部分: 1)核心(ECMAScript):描述了JS的语法和基本对象. 2)文档对象模型 (DOM):处理网页内容的方 ...
- js，bom，dom（相信我，你看不懂我写的）
js dom bom 2种结合方式: 1.在body中加入script标签,<script type="text/javascript" >alert(" 向 ...
- 前端（十六）—— JavaScript盒子模型、JS动画、DOM、BOM
JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...
- day45:JS中的json&JS的BOM操作和DOM操作
目录 1.补充:CSS中的弹性盒子 2.JS中json的序列化 3.JS中的BOM操作 3.1 location操作 3.2 计时器 4.JS中的DOM操作 4.1 创建标签 4.2 查找标签 4.3 ...
- JavaScript BOM DOM 对象
title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...
- 原生js快速渲染dom节点
function renderDom(str){ var _div = document.createElement('div'); _div.innerHTML = str; var dom_tem ...
- JavaScript基础16——js的BOM对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【原生js】js动态添加dom，如何绑定事件
首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...
- [笔记]原生JS实现的DOM操作笔记
原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...
- JS对象与Dom对象与jQuery对象之间的区别
前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save&qu ...
随机推荐
- 判断终端类型、微信的文章防盗链、h5页面跳转打开新的app、跳转到app市场
判断终端的类型.安卓.ios.微信.qq function GetMobelType() { var browser = { ...
- 居于H5的多文件、大文件、多线程上传解决方案
文件上传在web应用中是比较常见的功能,前段时间做了一个多文件.大文件.多线程文件上传的功能,使用效果还不错,总结分享下. 一. 功能性需求与非功能性需求 要求操作便利,一次选择多个文件进行上传: 支 ...
- noip第17课资料
- QT在Linux下的安装
QT是一个跨平台的C++开发库,设计思想是同样的,C++无需修改就可以在windows.linux.macOS等平台上使用,他使开发更专注于构建软件的核心价值,而不是维护API.作为面向对象的框架,它 ...
- 可在广域网部署运行的即时通讯系统 -- GGTalk总览（附源码下载）
(最新版本:V6.2,2019.01.03 .Xamarin移动端版本已经推出,包括 Android 和 iOS) GGTalk开源即时通讯系统(简称GG)是QQ的高仿版,同时支持局域网和广域网, ...
- 9：集合collection
第一 集合框架的概述 集合类的由来: 对象用于封装特有数据,对象多了需要存储,如果对象的个数不确定,就使用集合容器进行存储. 集合和数组的区别: 数组虽然可以存储对象,但是长度是固定的:集合长度 ...
- go操作redis
package main import ( "fmt" "github.com/gomodule/redigo/redis" ) func main() { c ...
- 设置win版vim启动项[利刃篇]
vim默认启动设置有时不太好,想改一下,但是又不像windows其他软件那样,界面设置后就生效,这里需要手动设置文件才可以,那就赶紧设置一下吧! 修改文件为 vim安装目录/_vimrc 文件,或者在 ...
- 开源性能测试工具Locust使用篇（三）
脚本增强 面对较复杂的测试场景,我们可能还是会感觉无从下手:例如,很多时候脚本需要做关联或参数化处理,Locust中就不知道怎么实现了.可能也是这方面的原因,感觉难以将Locust应用到实际的性能测试 ...
- 谈谈我们对userAgent的看法，为什么爬虫中需要userAgent？
首先打开浏览器,按 F12 进入控制台(Console),然后输入:navigator.userAgent,即可看到 UA.例如: 1 2 Mozilla/5.0 (Windows NT 10.0; ...