前端开发之BOM和DOM
BOM
BOM:是指浏览器对象模型,它使JavaScript可以和浏览器进行交互。
1,navigator对象:浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息。
navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统
2,screen对象:屏幕对象,可以获取一些和屏幕相关的信息。
screen.availWidth // 可用的屏幕宽度
screen.availHeight // 可用的屏幕高度
3,history对象:浏览历史对象,包含了用户对当前页面的浏览历史,但我们无法查看具体的地址,可以简单的用来前进或后退一个页面。
history.forward() // 前进一页
history.back() // 后退一页
4,location对象:用于获取浏览器的当前的网页地址,还可以重定向新的地址。
location.href // 获取URL
location.href="URL" // 跳转到指定页面
location.reload() // 重新加载页面
5,弹出框相关方法
1,alert方法:警告框,让用户看到某些信息。
alert("浏览此网页注意个人信息保护!");
2,confirm方法:确认框,用于验证一些用户的选择。
confirm("是否要下载此文件?")
3,prompt方法:提示框,用于接收用户的输入值。
prompt("请在输入你的答案")
6,计时相关方法
1,setTimeout方法:设定多长时间后开始执行一段JavaScript代码。
setTimeout("JavaScript代码",秒数) // 秒数的单位为毫秒
2,clearTimeout方法:取消计时设定。
var t=setTimeout("console.log('哈哈哈')",2000);
clearTimeout(t);
3,setInterval方法:按设定的周期执行一段JavaScript代码。
setInterval("JavaScript代码",时间间隔) // 返回ID值
4,clearInterval方法:取消设定的setInterval()。
clearInterval(setInterval返回的ID值)
DOM
DOM:是指文档对象模型,使用它可以访问HTML文档中的所有元素。
DOM树:DOM规定HTML文档中的每一个元素都是一种节点。
1,document对象:文档节点,代表整个HTML文档
2,element对象:标签节点,代表文档中的标签
3,text对象:文本节点,代表标签中的文本内容
4,attribute对象:属性节点,代表标签中的属性
5,comment对象:注释节点,代表文档中的添加的注释
通过这些对象我们就可以操作HTML文档做出各种动态变化。
1,标签查找
1,直接查找
document.getElementById("id值") // 根据ID获取一个标签
document.getElementsByClassName("类名") // 根据class属性获取
document.getElementsByTagName("标签名") // 根据标签名获取标签合集
2,间接查找
document.parentElement // 父节点标签元素
document.children // 所有子标签
document.firstElementChild // 第一个子标签元素
document.lastElementChild // 最后一个子标签元素
document.nextElementSibling // 下一个兄弟标签元素
document.previousElementSibling // 上一个兄弟标签元素
2,节点操作
1,创建节点:createElement(标签名)
document.createElement("div");
2,添加节点:
// 添加一个子节点
某节点.appendChild(标签名) // 在某节点内的一个节点之前添加一个节点
某节点.insertBefore(标签名,一个节点)
3,删除节点:
// 删除某节点下的一个子节点
某节点.removeChild(要删除的节点)
4,替换节点:
// 替换某节点下的一个子节点
某节点.replaceChild(新节点, 要替换的子节点);
5,节点的文本:
// 获取节点的文本值
某节点.innerHTML // 获取节点的所有的标签以及文本值
某节点.innerText // 只获取节点的文本值 // 设置节点的文本值
某节点.innerHTML = 新的标签和文本值
某节点.innerText = 新的文本值
6,节点的属性:
// 设置节点的属性和值
某节点.setAttribute("属性名","属性值") // 获取节点的属性值
某节点.setAttribute("属性名") // 删除节点的属性
某节点.removeAttribute("属性名") // 标签的自带属性还可以通过 .属性名 来获取和设置
节点.自带属性名
节点.自带属性名=属性值
7,获取节点返回值:
// 适用的标签有:input select textarea
节点.value
8,节点的类的操作:
className // 获取所有样式类名(字符串)
classList.remove() // 删除指定类
classList.add() // 添加类
classList.contains() // 类存在返回true,否则返回false
classList.toggle() //类存在就删除,否则添加
JavaScript操作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
事件
当用户触发某一条件时,浏览器会运行一些JavaScript代码来改变HTML文件的一些属性,从而完成某一件事情,这个条件就是事件。
JavaScript中常用的事件:
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。
onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动) onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。 onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击,使用的对象是form。
事件要想被触发就要事先将其绑定到对应的标签上,JavaScript绑定事件的方式有:
1,在标签内添加事件属性
<div id="d1" onclick="changeColor(this);">点我</div> // this表示触发事件的当前元素
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
2,在body标签的最后的script标签里添加事件
<div id="d2">点我</div>
<script>
var divEle2 = document.getElementById("d2");
divEle2.onclick=function () {
this.innerText="真点啊";
}
</script>
前端开发之BOM和DOM的更多相关文章
- 前端开发之BOM和DOM(转载)
BOM BOM:是指浏览器对象模型,它使JavaScript可以和浏览器进行交互. 1,navigator对象:浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息. naviga ...
- 前端开发之JavaScript HTML DOM理论篇二
主要内容: 1.HTML DOM元素 2.HTML DOM事件 一.DOM元素 主要操作有添加.删除和替换HTML元素 1.创建新的HTML元素 (1)方法一: appendChild() 追加 如 ...
- 前端开发之JavaScript HTML DOM理论篇一
主要内容: 1.DOM简介 2.DOM 节点 3.DOM 方法和属性 4.DOM 访问和修改 一.DOM简介 1.什么是 DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTM ...
- 前端开发之JavaScript HTML DOM实战篇
实战案例一: “灯泡发光” <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}
前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
- 前端基础之BOM和DOM day52
前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互 ...
- day 47 前端基础之BOM和DOM
前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些 ...
- 前端知识之BOM和DOM
前端基础之BOM和DOM windw对象 指浏览器窗口,所有的浏览器都支持window对象 常用的window方法 window.innerHeight 浏览器窗口的内部高度 window.inner ...
- #笔记# 移动前端开发之viewport
一般移动设备的浏览器都默认设置了一个 viewport ,并初始定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题.下面我们来认识几个与 viewport ...
随机推荐
- WPF DrawingVisual详解
在WPF中,如果需要绘制大量图形元素,并且对性能要求严苛的话,最好使用DrawingVisual,当然,你也可以选用 Path类和比Path类更轻量级的Geometry(几何形状)来实现你的需求,但是 ...
- FreeMarker中<#include>和<#import>标签的区别
在使用freemarker作为前端页面模板的应用中,会有很多的freemarker模板页面,这些ftl会在不同的页面中重复使用,一是为了简化布局的管理,二是可以重复使用一些代码. 在freemarke ...
- Eclipse创建jsp web项目
Eclipse 是一个开放源代码的.基于Java的可扩展开发平台.就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境.幸运的是,Eclipse 附带了一个标准的插件集,包括Java开 ...
- tomcat的日志不输出日志信息的解决方法
1.下载日志jar包,例如:commons-logging-1.1.1.jar.放在tomcat的bin目录下,或者是自己项目的lib包里. 2.修改tomcat的bin目录下面的catalina.b ...
- python 对位运算
- PHP定时任务获取微信access_token的方法
一.使用brew安装php多版本方法 # brew install php56# brew install php70二.安装切换工具 # brew install php-version# sour ...
- 大数据技术之Hadoop入门
第1章 大数据概论 1.1 大数据概念 大数据概念如图2-1 所示. 图2-1 大数据概念 1.2 大数据特点(4V) 大数据特点如图2-2,2-3,2-4,2-5所示 图2-2 大数据特点之大量 ...
- ubuntu更新问题
ubuntu 下出现E: Sub-process /usr/bin/dpkg returned an error code 在用apt-get安装软件时出现了类似于install-info: No d ...
- 阿里云的重大战略调整,“被集成”成核心,发布SaaS加速器助力企业成长
摘要: 阿里云战略调整,“被集成”成为生态战略,讲讲即将“退居幕后”的阿里云. 阿里云近期调整动作巨大,阿里云新任总裁张剑锋(花名,行颠)上任后充分体现其创新和自我探索不断求“变”的阿里特性.期间,达 ...
- 寻找第K大数的方法总结
http://www.cnblogs.com/zhjp11/archive/2010/02/26/1674227.html