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()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
随机推荐
- 设置/修改wampserverd默认项目地址
打开WampServer安装目录下bin\apache\Apache2.4.4\conf\文件夹打开httpd.conf 首先我们安装完wampserver后一般默认的项目存放地址如下: " ...
- 关于Test--Pattern Generator IP核的测试
关于Test--Pattern Generator IP核的测试 1.Test--Pattern Generator 功能介绍 生成24-bit RGB视频流,此IP核可以用于系统测试,不需要先在片上 ...
- JavaScript中国象棋程序(8) - 进一步优化
在这最后一节,我们的主要工作是使用开局库.对根节点的搜索分离出来.以及引入PVS(Principal Variation Search,)主要变例搜索. 8.1.开局库 这一节我们引入book.js文 ...
- [PHP] PHP1 与 CGI
早期,一个web程序通过cgi方式提供数据处理,编写cgi程序可以用不同的语言. 这个过程是,我们生成一个服务端可执行程序,处理 web server 传过来的请求,(设置header头)然后返回数据 ...
- iOS开发之Runtime常用示例总结
经常有小伙伴私下在Q上问一些关于Runtime的东西,问我有没有Runtime的相关博客,之前还真没正儿八经的总结过.之前只是在解析第三方框架源码时,聊过一些用法,也就是这些第三方框架中用到的Runt ...
- [转]云计算之hadoop、hive、hue、oozie、sqoop、hbase、zookeeper环境搭建及配置文件
云计算之hadoop.hive.hue.oozie.sqoop.hbase.zookeeper环境搭建及配置文件已经托管到githubhttps://github.com/sxyx2008/clou ...
- JavaScript学习--8.1
JavaScript学习--8.1(常见的js代码兼容工具总结) 1.取css样式表和非行间样式的属性 function getStyle(obj,attr){ if(obj.currentStyle ...
- iOS性能检测之Instrunments - 几种常用工具简单介绍
Instrunments: 没错,就是这货,很多人平时开发可能不一定会用到这个,但我要说的是,学会使用它,会让你加分不少哦 先来一张全家福: 1.打开方式 或者 两种方式都行. 2.今天主要介绍一下 ...
- Android性能测试工具Emmagee
下面介绍一个简单实用的Android性能软件 ~~欢迎加入测试群574875837一起讨论研究 一.Emmagee 简介 Emmagee主要用于监控单个App的CPU,内存,流量,启动耗时,电量,电流 ...
- 向上管理(manage up)的的五条原则
绝大多数的工程师很可能很少关注代码之外的能力,摸爬滚打了将近10年后,我才领悟到除了技术之外还有一项最重要的修炼,那就是"领导与被领导"学(其中包含了换位思考,但不局限于换位思考) ...