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()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
随机推荐
- Dynamics CRM 2015-Custom Workflow Activity
CRM的Workflow给我们的流程处理带来不少便利,但是这种自带的Workflow并不是万能的,中间某一step不能支持,往往会牵一发而动全身,可能造成整个Workflow Steps的重新设计.幸 ...
- 从C#到TypeScript - async await
总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...
- 核心动画(UIView封装动画)
一.UIView动画(首尾) 1.简单说明 UIKit直接将动画集成到UIView类中,当内部的一些属性发生改变时,UIView将为这些改变提供动画支持 执行动画所需要的工作由UIView类自动完成, ...
- AlloyTouch之select选择插件
原文地址:https://github.com/AlloyTeam/AlloyTouch/wiki/Simple-Select 写在前面 很多情况下,产品希望统一安卓和IOS select交互和样式. ...
- 【Zookeeper】源码分析之网络通信(一)
一.前言 前面已经分析了请求处理链中的多数类,接着继续分析Zookeeper中的网络通信模块. 二.总体框图 对于网络通信模块,其总体框图如下所示 说明: Stats,表示ServerCnxn上的统计 ...
- 2017-2-17 c#基础学习 (控制台程序的创建,输出,输入,定义变量,变量赋值,值覆盖,值拼接,值打印)
1 控制台程序的创建 > 新建项目 ,选择 c#, 框架选择4.0 , 选择控制应用台程序, 选择文件保存位置 修改名字. 2 c#输出与输入 >在main函数中编写代码 >在编 ...
- Handlebars模板引擎之进阶
取得索引 我想取得索引作为序号这个是常用的.在handlebars也是存在的. 就是使用 @index 来获取索引 {{#each this}} <tr> <td>{{ @in ...
- java 线程及synchronized关键字
从本篇开始,我们将会逐渐总结关于java并发这一块的内容,也可以理解为是我的笔记,主要来自于一些博客和java书籍中的内容,所有的内容都是来自于他们之中并且加上了我自己的理解和认识. ...
- Spring+CXF的WebServices简单示例
本文就最简单的WebServices示例来演示Spring和CXF的整合. 使用Maven创建webapp项目,pom如下 <properties> <cxf.version> ...
- HTML 5入门知识——Drag
HTML 5拖放 拖放的步骤: 1.对象元素的draggable属性设置为true,还需要注意的是a元素和img元素必须指定href. 2.编写与拖放有关的事件处理代码: DataTransfer对象 ...