BOM和DOM的操作
到目前为止,我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法,并没有和浏览器有任何交互。也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DOM相关知识。
JavaScript分为 ECMAScript,DOM,BOM。
一、BOM
Browser Object Model:浏览器对象模型,它使 JS有能力与浏览器进行对话。
1、window对象
①window.innerHeight 浏览器窗口的内部高度
②window.innerWidth 浏览器窗口的内部宽度
③window.open() 打开新窗口
④window.close() 关闭当前窗口
2、window的子对象
①location对象
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
常用属性和方法:
location.href 获取URL
location.href="URL" 跳转到指定页面
location.reload() 重新加载页面
②弹出框
可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。
警告框:经常用于确保用户可以得到某些信息。当警告框出现后,用户需要点击确定按钮才能继续进行操作。
确认框:用于使用户可以验证或者接受某些信息。当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。
提示框:经常用于提示用户在进入页面前输入某个值。当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
③计时相关
通过使用 JavaScript,我们可以在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
setTimeout()
语法:
var t=setTimeout("JS语句",毫秒) setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。
假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。 setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。
这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数(1000 毫秒等于一秒)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <script>
function func() {
alert(123)
}
function demo(){
let s = setTimeout(func,3000);
function inner() {
clearTimeout(s)
}
setTimeout(inner,9000)
}
demo() </script>
</body>
</html>
clearTimeout()
语法:
clearTimeout(setTimeout_variable)
setInterval()
语法:
setInterval("JS语句",时间间隔) 返回值:
一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
clearInterval()
语法:
clearInterval(setinterval返回的ID值) clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
例子:循环计时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <script>
function f1() {
alert(123)
}
function clear(){
let s = setInterval(f1,3000);
function inner() {
clearInterval(s)
}
setTimeout(inner,9000)
}
clear() </script>
</body>
</html>
二、DOM
Document Object Model:
文档对象模型,通过它,可以访问HTML文档的所有元素。 JavaScript 可以通过DOM创建动态的 HTML:
能够改变页面中的所有 HTML 元素
能够改变页面中的所有 HTML 属性
能够改变页面中的所有 CSS 样式
能够对页面中的所有事件做出反应
1、HTML DOM树
2、js查找标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span id="s1" class="c1">我是div上面的span</span>
<div id="d1" class="c2">我是div
<span id="s2">我是div里面的第一个span</span>
<p id="p1">我是div里面span下面的p标签
<span id="s3">我是div里面的p标签里面的span标签</span>
</p>
<span id="s4">我是div里面的p标签下面的span标签</span>
</div>
<span>我是div下面的span</span>
</body>
</html>
①直接查找(*****)
document.getElementById 根据ID获取一个标签
document.getElementsByClassName 根据class属性获取
document.getElementsByTagName 根据标签名获取标签合集
②间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
3、节点操作
js可以创建标签
给标签添加属性、文本和样式
操作html文档
①创建节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <span>div上面的span</span>
<div>div
<p>div>p</p>
<span id="s1">div>span</span>
<p>div>p
<span>div>p>span</span>
</p> </div>
<span>div+span</span> </body>
</html>
②添加节点
追加一个子节点(作为最后的子节点)
somenode.appendChild(newnode); 把增加的节点放到某个节点的前边。
somenode.insertBefore(newnode,某个节点);
③属性节点
获取文本节点的值:
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML 设置文本节点的值:
var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"
④获取值操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text"> <textarea name="" id="t1" cols="30" rows="10"></textarea>
</body>
</html>
语法:
elementNode.value 适用于以下标签:
input
select
textarea
⑤class操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 400px;
height: 400px;
border-radius: 50%;
border: 3px solid black;
}
.bg_red {
background-color: red;
}
.bg_green {
background-color: green;
}
</style>
</head>
<body>
<div class="c1 bg_red bg_green"></div>
</body>
</html>
classList 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls)存在返回true,否则返回false
classList.toggle(cls) 存在就删除,否则添加
⑥指定css操作
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
4、事件
①常用事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。
onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动) onload 一张页面或一幅图像完成加载。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击,使用的对象是form。
②绑定方式
方式一: <div id="d1" onclick="changeColor(this);">点我</div>
<script>
function changeColor(this) {
ths.style.backgroundColor="green";
}
</script> 注意:this是实参,表示触发事件的当前元素。函数定义过程中的this为形参。 方式二: <div id="d2">点我</div>
<script>
var divEle2 = document.getElementById("d2");
divEle2.onclick=function () {
this.innerText="呵呵";
}
</script>
事件案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="d1">
<button id="b1">开始</button>
<button id="b2">结束</button> <script>
// 定义一个存储定时器的全局变量
var flag;
// 先获取代码中需要用到的一些固定标签对象
var b1Ele = document.getElementById('b1');
var iEle = document.getElementById('d1');
var b2Ele = document.getElementById('b2');
// 定义一个展示时间的函数
var showTime = function(){
// 获取当前时间
var cTime = new Date();
iEle.value = cTime.toLocaleString()
};
// 给b1标签绑定点击事件
b1Ele.onclick = function () {
// 先判断flag是否已经指代了一个定时器
if (!flag){
flag = setInterval(showTime,1000)
}
}; b2Ele.onclick = function () {
// 取消定时器
clearInterval(flag);
// 将标志位手动置为布尔值为false的值即可
flag = null;
}
</script>
</body>
</html>
定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="d1"> </select> <select name="" id="d2"> </select> <script>
// 先获取需要操作的标签对象
let proEle = document.getElementById('d1');
let cityEle = document.getElementById('d2');
let data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
// 将所有的省渲染到proEle标签内部 for循环获取所有的省
for (let pro in data){
// 创建option标签
let opEle = document.createElement('option');
// 给option标签设置文本值
opEle.innerText = pro;
// 将生成的option标签添加到proEle中
proEle.appendChild(opEle)
}
proEle.onchange = function () {
// 先清空cityEle标签内所有的内容
cityEle.innerHTML = '';
// 获取用户选择的省 根据省拿到对应的市
let choice_pro = proEle.value;
let cityList = data[choice_pro];
// for循环创建option标签添加到cityEle标签内
for (let i=0;i<cityList.length;i++){
// 创建option标签并添加文本
let cEle = document.createElement('option');
// 给option标签设置文本值
cEle.innerText = cityList[i];
// 将生成的option标签添加到proEle中
cityEle.appendChild(cEle)
}
} </script>
</body>
</html>
省市联动
BOM和DOM的操作的更多相关文章
- JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}
前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
- 前端基础之BOM和DOM操作
目录 BOM和DOM定义 windows对象 windows的子对象 navigator对象 screen对象 history对象 location对象 弹出框 警告框 确认框 提示框 计时相关 se ...
- 前端基础之BOM与DOM操作
目录 BOM操作 navigator对象 screen对象 history对象 localtion对象 弹出框 计时 setTimeout() clearTimeout() setInterval() ...
- JavaScript之BOM和DOM及其兼容操作详细总结
BOM(浏览器对象模型) 所有浏览器都支持window对象,他表示浏览器窗口. 所有js全局对象,函数,变量均自动成为window对象的成员. 全局变量是window对象的属性. 全局函数是windo ...
- 前端javascript之BOM、DOM操作、事件
BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>:使用js操作前端页面 window对象 所有浏览器都支持 wind ...
- BOM,DOM,ECMAScripts三者的关系
一:DOM 文档对象模型(DOM)是表示文档(比如HTML和XML)和访问.操作构成文档的各种元素的应用程序接口(API) DOM是HTML与JavaScript之间沟通的桥梁. DOM下,HTM ...
- BOM和DOM
Day 01 正课: 1.什么是DOM: 2.DOM Tree 3.遍历DOM树: 1.什么是DOM: 原生js=ECMAScript(核心语法)+ DOM(专门操作网页内容的API)+ 3天 BOM ...
- 实现JavaScript的组成----BOM和DOM
我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型). 今天主要学习BOM和DOM. BOM: BOM提供了 ...
- JavaScript的组成—ECMAScript、BOM和DOM
JavaScript 是一种基于 ECMAScript 规范的脚本语言,并在此基础上进行了自己的封装.ECMAScript 不是一种编程语言,仅仅是一种脚本语言规范,由欧洲计算机协会制定和发布,任 ...
随机推荐
- Spring MVC 中使用AOP 进行统一日志管理--注解实现
1.AOP简介 AOP称为面向切面编程 AOP的基本概念 (1)Aspect(切面):通常是一个类,里面可以定义切入点和通知 (2)JointPoint(连接点):程序执行过程中明确的点,一般是方法的 ...
- spark 常用设置
1.spark.hadoop.validateOutputSpecs 若设置为true,saveAsHadoopFile会验证输出目录是否存在.虽然设为false可直接覆盖文件路径
- Vue.js官方文档学习笔记(二)组件化应用的构建
组件化应用的构建 组件化应用允许我们使用小型.独立和通常可复用的组件构建大型应用. Vue注册组件 Vue.component('todo-item',{template:'<li>这是个 ...
- 洛谷 P5239 回忆京都 题解
题面 裸的杨辉三角前缀和,但----- 在求前缀和的时候有可能得到一个负数(由于取模的原因),所以一定要加上模数后再取模!!!! #include <bits/stdc++.h> #def ...
- 洛谷 P2398 GCD SUM 题解
题面 挺有意思的. 设f[i]表示gcd(i,j)=i的个数,g[i]表示k|gcd(i,j)的个数; g[i]=(n/i)*(n/i); g[i]=f[i]+f[2i]+f[3i]+...; 所以f ...
- Python笔记(二)
python笔记 函数式编程 函数 函数是Python内建支持一种封装(将大段代码拆成函数) 通过函数的调用,可以将复制的任务分解. 函数式编程(Functional Programming) 计算机 ...
- input搜索框实时检索功能实现(超简单,核心原理请看思路即可)
问题:实现input搜索框实时检索的功能,类似哔哩哔哩首页搜索功能(壮哉我大b站!).公司要求,emmmm没办法,果然懒人是要被赶着走才会进步的说,诶嘿O(∩_∩)O. 解决方法: 1.参考资料:ht ...
- Laravel session的保存机制
与$_SESSION不同Laraver中的session是在当次程序执行完毕时保存到文件或其他存储引擎中的,也就是说如果使用了die等强制结束程序的函数将不会自动保存session导致session失 ...
- mysql之innodb存储引擎
mysql之innodb存储引擎 innodb和myisam区别 1>.InnoDB支持事物,而MyISAM不支持事物 2>.InnoDB支持行级锁,而MyISAM支持表级锁 3>. ...
- keepalived和lvs实现mysql读负载均衡
keepalived+lvs实现对mysql读负载均衡 环境:redhat 6.5 real server: 172.25.254.189 172.25.254.224 lvs: 172.25.254 ...