2017-3-28 javaScript DOM 操作
一、DOM的基本概念:DOM是文档对象模型,这种模型为树模型;文档是指标签文档;对象是指文档中每个元素;模型是指抽象化得东西。
二、Windows 对象操作:1、属性和方法:属性(值或者子对象):opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是 null。
dialogArgument:对话框返回值。
子对象:history,location,document,status,menubar,toolbar等。
方法(函数):事件(事先设置好的程序,被触发)。
2、Window.open("第一部分","第二部分","第三部分","第四部分")
第一部分:写页面地址。
第二部分:_blank 打开方式,或者_self ,在新窗口还是自身打开
第三部分:控制打开的窗口格式,可以写多个,用空格隔开;
toolbar=no 新打开的窗口无工具条;menubar=no 无菜单栏;status=no 无状态栏;
width=100 height=100 宽度高度;left=100 打开的窗口距离左边多少距离;
resizable=no 窗口大小不可调; scrollbars=yes 出现滚动条; location=yes 有地址栏;
注:Window.open 也有返回值,它的返回值是新打开的窗口对象。
例如:var a=window.open(); 打开一个窗口并保存在变量中。
打开多个窗口并保存在数组w中: function openw()
{
w[i++]=window.open();
}
3、window.close():关闭当前窗口;
w.close():关闭保存在变量w中的那个窗口;
关闭多个子窗口:先将打开的窗口存入数组中,利用循环将其挨个关闭;
关闭打开当前窗口的源窗口:window.opener.close();
4、调整页面:window.navigate("url") 跳转至目标页面,在谷歌浏览器下有bug;
window.moveTo(x,y) 移至页面至某一位置,位置由x和y 决定;
window.resizeTo(宽,高) 调整页面的宽度和高度;
window.scrollTo(x,y) 滚动页面至哪里,y代表纵向滚动。
5、模态对话框和非模态对话框:
模态对话框(Modal Dialogue Box),是指在用户想要对对话框以外的应用程序进行操作时,必须首先对该对话框进行响应。如单击【确定】 或【取消】按钮等将该对话框关闭,它和非模态对话框都是永远置顶的,它们的区别在于对话框打开时,是否允许用户进行其他对象的操作。
打开模态对话框:window.showModalDialog("url","向目标对话框传的值","窗口特征参数");
特征参数:用分号隔开,像素大小用px。dialogHeight,dialogWidth,center等
打开非模态对话框:window.showModelessDialog("url","向目标对话框传的值","窗口特征参数")
var a=window.dialogArgument;可以用一个参数来获取模态或者非模态对话框传递的值。
三、Window.history 对象:
window.history.back(); 页面进行后退;
window.history.forward(); 页面前进;
window.history.go(n); n如果是正数则代表前进n个页面,n如果是负数则代表后退n个页面。
四、Window.location 对象: (location 地址栏)
var a=window.location.href; 获取当前页面的地址;
window.location.href="http://www.baidu.com"; 修改页面地址,会跳转页面
window.location.hostname: 主机名,域名,网站名,可用变量接收;
window.location.pathname: 路径名,可用变量接收。
五、Window.status 对象: (status 状态栏)
window.status="要在状态栏显示的内容";
例如:function s()
{
window.status="向前走 就这么走";
}
2017-3-28 javaScript DOM 操作的更多相关文章
- javascript DOM 操作 attribute 和 property 的区别
javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...
- javascript DOM 操作
在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...
- javascript DOM操作之 querySelector,querySelectorAll
javascript DOM操作之 querySelector,querySelectorAll
- javascript DOM 操作基础知识小结
经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC ...
- javascript DOM操作HTML文档
文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...
- 仅100行的JavaScript DOM操作类库
如果你构建过Web引用程序,你可能处理过很多DOM操作.访问和操作DOM元素几乎是每一个Web应用程序的通用需求.我们我们经常从不同的控件收集信息,我们需要设置value值,修改div或span标签的 ...
- SVG基础以及使用Javascript DOM操作SVG
SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...
- Javascript DOM操作实例
最近在学DOM,但是还是没有办法很好的记住API,想找些例子来练习,网上的例子将一个个DOM对象方法挨个举例,并没有集合在一起用,效果不尽人意.所以自己写一份实例,顺便巩固下学到的知识. ...
- javascript DOM操作 第19节
<html> <head> <title>DOM对象</title> <script type="text/javascript&quo ...
- 常见的原生javascript DOM操作
1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
随机推荐
- testNG实现test失败后重复执行,
test失败自动执行大大提高测试结果的准确性, 1.修改testNG源码实现test失败自动执行, 首先获取testng的源码, 获取源代码,构建过程: $ git clone git://githu ...
- http状态码及解释
简单版: 100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息 200 OK 正常返回 ...
- BZOJ 1050: [HAOI2006]旅行comf (并查集 或 单调队列)
这是建空间后做的第一道题啊= =好水 排序,枚举最小边,然后并查集求出联通时的最大边 或者排次序,从小到大插边,如果插边时最小的边拿掉不会使s与t不联通,就删去。 code: #include< ...
- MyBatis 源码分析——类型处理器
官网上面讲到:无论是 MyBatis 在预处理语句(PreparedStatement)中设置一个参数时,还是从结果集中取出一个值时, 都会用类型处理器将获取的值以合适的方式转换成 Java 类型.那 ...
- JavaScript:void(0);的作用
JavaScript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值. void 操作符用法格式如下: 1. javascript:void (expression) 2. javas ...
- Yii前台后台登录混淆问题
我们在用yii开发项目时候,如果前后台使用modules实现 那么 做登录时候用户名就会出现前后台登录混淆的事情 于是可以在adminModule.php文件中做个设置 public function ...
- MDX 用Ancestors得到Hierarchy中指定Level的值(附带SCOPE用法之一)
需求:用户想要用Excel,对比每月预算和整年预算,需要在两个用户定义的Hierarchy都可以浏览.财年季月日(FYQMD)和财年月日(FYMD). 自定义hierarchy 属性关系(Attrib ...
- storm1.0节点间消息传递过久分析及调优
序:最近对storm平台系统进行性能检测发现偶尔会出现oncebolt向另一个twobolt发送数据后,twobolt要500毫秒后才接收到进行处理.这里简单说增大twobolt的并行度即可解决,但是 ...
- Cesium原理篇:3D Tiles(2)数据结构
上一节介绍3D Tiles渲染调度的时候,我们提到目前Cesium支持的Cesium3DTileContent目前支持如下类型: Batched3DModel3DTileContent Instanc ...
- 【js数据结构】栈解决括号不匹配问题
栈可以用来判断一个算术表达式中的括号是否匹配. 思路:读取算术表达式,遇到左括号'{'.'['.'('压入栈,栈的特点是后入先出,所以当遇到右括号'}'.']'.')'的时候,取出栈顶元素,是否满足读 ...