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()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
随机推荐
- 前端开发面试题总结之——JAVASCRIPT(一)
___________________________________________________________________________________ 相关知识点 数据类型.运算.对象 ...
- Oracle索引语句整理
转载:http://www.cnblogs.com/djcsch2001/articles/1823459.html 索引,索引的建立.修改.删除 索引索引是关系数据库中用于存放每一条记录的一种对象, ...
- Mybatis实战之TypeHandler高级进阶
上篇文章分享了在项目实战中自定义Mybatis的TypeHandler来处理枚举类型.文章结尾也指出了美中不足之处,那就是每次都需要指定我们自定义的枚举TypeHandler. 随着项目枚举类型的增多 ...
- Myeclipse 搭建Java Web 项目 《一》
今天将图文并茂的介绍如何使用myclipse 创建Java Web 项目;我使用的是myclipse 8.6 来进行创建: 1.打开Myeclipse,点击File --->然后New ---- ...
- path和classpath的用途
1 path很明显是unix shell的环境变量,比如bash shell,输入一个命令,它会先去path指定的目录下查找是不是有该命令的可执行文件. 2 -classpath 只是用在下面这种不发 ...
- Matlab将三维变量分割为多个二维变量的方法
最近在处理 Matlab 中的三维矩阵的时候,遇到了一个问题: 假如m 为 5*5*5的矩阵,如果以第三个维度为基础,分割为5个不同的矩阵 m1,m2,m3,m4,应该如何解决? 解决方法:eval函 ...
- loadrunner11.0之IP欺骗
一:设置虚拟ip地址 操作步骤: 1:添加ip地址 运行loadrunner---tools---IP wizard 2:选择create new setting,点击"下一步" ...
- 第36篇 Asp.Net源码解析(一)
上面两篇文章说了http协议和IIS处理,这次说下当IIS把请求交给Asp.net后的过程. AppManagerAppDomainFactory 当IIS把请求交给asp.net时候,如果AppDo ...
- weui.css中flex容器下子项目的水平和垂直居中
想用weui.css写微信平台的页面,发现没有让flex(weui-flex)容器下,子项目(weui-flex__item)居中的类. 百度了一下,是用justify-content:center; ...
- 用C++11实现C++17的apply(动态数组用作函数参数)
标题有点错误,apply是用tuple做参数,调用一个函数.这个标题是为了能更好的适配搜索关键字. 动态数组用作函数参数更适合嵌入了脚本环境的C++程序,比如lua或javascript(js). 若 ...