前端JavaScript之BOM与DOM
什么是BOM,DOM
avaScript分为 ECMAScript,DOM,BOM。
BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”。
DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。
Window对象是客户端JavaScript最高层对象之一,由于window对象是其它大部分对象的共同祖先,在调用window对象的方法和属性时,可以省略window对象的引用。例如:window.document.write()可以简写成:document.write()。
window对象
所有浏览器都支持 window 对象。通俗的将window对象就是浏览器窗口
window对象方法:
- window.innerHeight - 浏览器窗口的内部高度
- window.innerWidth - 浏览器窗口的内部宽度
- window.open() - open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。(完整语法:window.open(URL,name,specs,replace))
- window.close() - 关闭当前窗口
window子对象
Navigator 对象
Navigator 对象包含有关浏览器的信息。
注意: 没有应用于 navigator 对象的公开标准,不过所有浏览器都支持该对象。
Screen 对象
Screen 对象包含有关客户端显示屏幕的信息。
注意: 没有应用于 screen 对象的公开标准,不过所有浏览器都支持该对象。
History 对象
History 对象包含用户(在浏览器窗口中)访问过的 URL。
History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
注意: 没有应用于History对象的公开标准,不过所有浏览器都支持该对象。
Location 对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分,可通过 window.Location 属性对其进行访问。
注意: 没有应用于Location对象的公开标准,不过所有浏览器都支持该对象。
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面
弹出框
alert() 警告框,当警告框出现后,用户需要点击确定按钮才能继续进行操作
confirm() 确认框,如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。
prompt() 提示框,如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
计时相关
- setTimeout()
- clearTimeout()
- setInterval()
- clearInterval()
setTimeout()语法:
setInterval("JS语句或函数",时间间隔)
例:var t = setTimeout("alert('adsa')",4000) 意为4000毫秒后执行alert('adsa')
注意如果这里alert没加双引号var t = setTimeout(alert('adsa'),4000),那么延时不会起效果,也并不会报错,会直接弹出警告框
var timer = setTimeout(function(){alert(123);}, 3000)
clearTimeout():取消setTimeout()设置
var t = setTimeout("alert('adsa')",4000)
clearTimeout(t)
setInterval()语法:
setInterval("JS语句或函数",时间间隔)
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭
例:var timer = setInterval(function(){console.log(123);}, 3000) 每隔3秒打印一次123
clearInterval():取消setInterval()设置 var timer = setInterval(function(){console.log(123);}, 3000)
clearInterval(timer);
HTML DOM Document 对象
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:
- 文档是一个文档节点。
- 所有的HTML元素都是元素节点。
- 所有 HTML 属性都是属性节点。
- 文本插入到 HTML 元素是文本节点。are text nodes。
- 注释是注释节点。
Document 对象
当浏览器载入 HTML 文档, 它就会成为 Document 对象。
Document 对象是 HTML 文档的根节点。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。
HTML DOM 节点
在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 :
- 文档本身就是一个文档对象
- 所有 HTML 元素都是元素节点
- 所有 HTML 属性都是属性节点
- 插入到 HTML 元素文本是文本节点
- 注释是注释节点
元素对象
在 HTML DOM 中, 元素对象代表着一个 HTML 元素。
元素对象 的 子节点可以是, 可以是元素节点,文本节点,注释节点。
NodeList 对象 代表了节点列表,类似于 HTML元素的子节点集合。
元素可以有属性。属性属于属性节点(查看下一章节)。
查找标签
直接查找
- document.getElementById 根据ID获取一个标签
- document.getElementsByClassName 根据class属性获取
- document.getElementsByTagName 根据标签名获取标签合集
间接查找
- parentElement 父节点标签元素
- children 所有子标签
- firstElementChild 第一个子标签元素
- lastElementChild 最后一个子标签元素
- nextElementSibling 下一个兄弟标签元素
- previousElementSibling 上一个兄弟标签元素
节点操作
创建节点和添加节点
语法:
- 创建节点 createElement(标签名)
- 追加一个子节点(作为最后的子节点) somenode.appendChild(newnode);
- 把增加的节点放到某个节点的前边。 somenode.insertBefore(newnode,某个节点);
- 获得要删除的元素,通过父元素调用该方法删除。 somenode.removeChild(要删除的节点)
- 替换节点: somenode.replaceChild(newnode, 某个节点);
- 获取文本节点的值: somenode.innerText
somenode.innerHTML
- 设置文本节点的值: omenode.innerText='值
somenode.innerHTML='值'
somenode.innerText:只返回标签的文本值
somenode.innerHTM:返回所有的标签及其文本值
somenode.innerText='值: 不能识别html语法
somenode.innerHTML='值':可以识别html语法
attribute操作
自带的属性还可以直接.属性名来获取和设置。
获取值操作(form表单)
语法:
elementNode.value
class的操作
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true,否则返回false
classList.toggle(cls) 存在就删除,否则添加(可实现开关灯操作)
指定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
事件
常用事件
绑定方式
方式一:
<div id="d1" οnclick="changeColor(this);">点我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
注意:this是实参,表示触发事件的当前元素。函数定义过程中的ths为形参。
方式二:
<div id="d2">点我</div>
<script>
var divEle2 = document.getElementById("d2");
divEle2.οnclick=function () {
this.innerText="呵呵";
}
</script>
window.onload()
window.onload() 通常用于 <body> 元素,在页面完全载入后(包括图片、css文件,js文件等等)才执行脚本代码。
转载于:https://www.cnblogs.com/tuanzibuku/p/10970218.html
前端JavaScript之BOM与DOM相关推荐
- JavaScript之BOM和DOM入门
JavaScript之BOM和DOM入门 JavaScript的组成包含三大部分,分别为ECMAScript.DOM和BOM.JavaScript组成,如下图所示: ECMAScript是JavaSc ...
- JavaScript中BOM及DOM的学习
JavaScript中BOM及DOM的学习 文章目录 JavaScript中BOM及DOM的学习 1 BOM编程 1.1 BOM编程概述 1.1.1 BOM编程的概念 1.1.2 BOM编程的作用 1 ...
- 前端基础之BOM和DOM
前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...
- python cad 二次开发bom_30.Python前端基础之BOM和DOM
前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...
- JavaScript中BOM和DOM(持续更新)
文章目录 1.API和WebAPIs 1.1 Web APIs和JS基础关联性 1.2 API和Web API 1.3 API和WebAPI总结 2.DOM 2.1 DOM简介 2.1.1 什么是DO ...
- Javascript之BOM与DOM讲解
一.Javascript组成 JavaScript的实现包括以下3个部分: ECMAScript(核心) 描述了JS的语法和基本对象. 文档对象模型 (DOM) 处理网页内容的方法和接口 浏览器对象模 ...
- javascript 学习 —— BOM和DOM编程学习
这是我的第一个博客,用来记录自己的学习历程.之前的学习会在项目下写备注,再次翻看也有些不方便.从今天开始就用博客记录吧. 一.BOM ( browser object model ) 与DOM 1.在 ...
- Web前端——JavaScript(bom文档对象模型)
>window对象 是bom的顶层对象,其中包含document对象: Window 对象表示浏览器中打开的窗口. 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML ...
- 再谈BOM和DOM(1):BOM与DOM概述
JavaScript的实现包括以下3个部分: ECMAScript(核心):描述了JS的语法和基本对象. 浏览器对象模型(BOM):与浏览器交互的方法和接口 文档对象模型 (DOM):处理网页内容的方 ...
最新文章
- 使用Python和OpenCV检测图像中的条形码
- Debian 9 Samba共享的一个问题总结
- 《PhoneGap精粹:构建跨平台的移动App》——1.10节PhoneGap资源
- OpenCV Resize Reshape
- 秒懂 QPS、TPS、PV、UV、GMV、IP、RPS!
- 惠普ns1005w使用说明_惠普 NS1005w 多功能一体机解析:15秒智能闪充 + 全功能手机操控...
- 腾讯,创新工场,淘宝等公司最新面试三十题(第171-200题)
- 霍尔传感器和直流无刷电机
- centos8平台用NetworkManager/nmcli管理网络
- python day1 5:23
- WPF事件中的sender就是事件源
- centos 7 重设密码总是失败
- python开发环境有哪些_python开发环境哪个好用?如何搭建?
- 程序员如何做好应聘?简历、面试和Offer
- tp5 验证码 验证不正确 (跨域问题)
- 7计数 contact form_接近开关和光电开关是一种具有开关量输出的位置传感器
- java 将网页表格导出_Java导出网页表格Excel过程详解
- 基于QT的游戏修改器
- 第五次网页前端培训(JavaScript)
- 利用ArcMap将CAD数据转为shp
热门文章
- JNI开发笔记(七)--aar库的生成和调用
- OpenCV学习——矩阵操作总结(转)
- 利用OpenCV实现人脸检测
- 浮点数在计算机中存储方式float,double)---转
- 作为现代计算机理论的基础的,作为现代计算机理论基础的冯·诺依曼原理和思想是()。...
- 二叉树先序、中序和后序遍历
- Java(TM) platform SE binary 占用cpu过高
- 宝塔 php5.6 极速安装_cltphp5.6.6版本安装教程-宝塔练手
- java纪元时间_Java实现纪元秒和本地日期时间互换的方法【经典实例】
- ASP.NET Core 入门教程 8、ASP.NET Core + Entity Framework Core 数据访问入门