1、DOM的基本概念

DOM是文档对象模型,这种模型为树模型;文档是指标签文档;对象是指文档中每个元素;模型是指抽象化的东西。

2、Window对象操作

一、属性和方法

属性(值或者子对象):

opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null。

dialogArgument:对话框返回值。

子对象:history,location,document,status,menubar,toolbar等。

方法(函数):事件(事先设置好的程序,被触发)。

二、Window.open"第一部分""第二部分""第三部分""第四部分"

Window.open的特征参数:

第一部分:写页面地址。

第二部分:_blank 打开的方式,在新窗口还是自身的窗口。

第三部分:控制打开的窗口格式,可以写多个,用空格隔开如下:

toolbar=no新打开的窗口无工具条 ;

menubar=no无菜单栏 status=no无状态栏 ;

width=100 height=100 宽度高度;

left=100 打开的窗口距离左边多少距离;

resizable=no窗口大小不可调 ;

scrollbars=yes 出现滚动条;

location=yes 有地址栏;

Window.open也有返回值,它的返回值是:新打开的窗口对象。

例如:

最简单的打开窗口:window.open("Untitled-6.html");

打开一个窗口并保存在变量中:var w= window.open();

可以将打开的多个窗口保存在数组w里:

function openW()

{

w[i++]=window.open();

}

三、window.close():关闭当前窗口;

w.close():关闭保存在变量w中的那个窗口;

关闭多个子窗口:先将打开的窗口存入数组内,利用循环将其挨个关闭;

关闭打开当前窗口的源窗口: window.opener.close();

四、间隔与延迟

间隔执行一段代码(函数):window.setInterval("要执行的代码",间隔的毫秒数)

清除间隔执行:window.clearInterval(间隔的id); 循环一次之后用来清除隔执行的代码

延迟一段时间执行某一段代码(函数):window.setTimeout("要执行的代码",延迟的毫秒数)

清除延迟:window.clearTimeout(延迟的id);清除setTimeout

五、调整页面

window.navigate("url") 跳转至目标页面,在谷歌浏览器下有bug;

window.moveTo(x,y) 移动页面至某一位置,位置由x和y决定;

window.resizeTo(宽,高) 调整页面的宽度和高度;

window.scrollTo(x,y)滚动页面至哪里,y代表纵向滚动。

六、模态对话框和非模态对话框

模态对话框(Modal Dialogue Box),是指在用户想要对对话框以外的应用程序进行操作时,必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭,它和非模态对话框都是永远置顶的,它们的区别在于当对话框打开时,是否允许用户进行其他对象的操作。

打开模态对话框:window.showModalDialog("url","向目标对话框传的值","窗口特征参数");

特征参数:用分号隔开,像素大小用px。dialogHeight,dialogWidth,center,等

打开非模态对话框:window.showModelessDialog("url","向目标对话框传的值","窗口特征参数")

var a = window.dialogArgument;可以用一个参数来获取模态或非模态对话框传递的值。

3、Window.history对象

window.history.back();页面进行后退;

window.history.forward();页面前进;

window.history.go(n); n如果是正数则代表前进n个页面,n如果是负数则代表后退n个页面,一般常用这一种。

4、Window.location对象

location地址栏

var s = window.location.href;获取当前页面的地址

window.location.href="http://www.baidu.com";修改页面地址,会跳转页面

window.location.hostname: 主机名,域名,网站名,可用变量接收

window.location.pathname: 路径名,可用变量接收

5、Window.status对象

status状态栏,可以给状态栏添加要显示的文字

window.status="要在状态栏显示的内容";设置状态栏文字

例如:

function s()
{
    window.status = "向前走 就这么走";
}

JavaScript的DOM操作(1)的更多相关文章

  1. 第一百一十六节,JavaScript,DOM操作样式

    JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...

  2. 第一百一十五节,JavaScript,DOM操作表格

    JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...

  3. Python之路day13 web 前端(JavaScript,DOM操作)

    参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...

  4. 网站开发综合技术 三 JavaScript的DOM操作

    第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...

  5. Javascript的DOM操作 - 你真的了解吗?

    摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...

  6. (转)Javascript的DOM操作 - 性能优化

    转载:https://my.oschina.net/blogshi/blog/198910 摘要: 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维 ...

  7. JavaScript:DOM操作

    一.DOM基础DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某 ...

  8. JavaScript之DOM操作,事件操作,节点操作

    1,DOM操作 1.1  概念 所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸 ...

  9. JavaScript 的DOM操作详解

    内容概要 DOM之查找标签 基本查找 间接查找 节点操作 获取值操作 class操作 样式操作 事件 内置参数this 事件练习 内容详细 DOM操作 DOM(Document Object Mode ...

  10. HTML JavaScript的DOM操作

    1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...

随机推荐

  1. 软件工程 speedsnail 冲刺9

    20150313 完成任务:为周五检查做了相关准备,包括稳定性测试,分辨率测试: 遇到问题: 问题1 进入关卡的开始蜗牛会跳一段距离 解决1 没有解决 明日任务: 冲刺结束

  2. Ado.net利用反射执行SQL得到实体

    public Model.orderParent GetTraceIDforID(string orderid) { string sql = string.Format(" select ...

  3. [leetcode]_Valid Palindrome

    题目:判断一个数字字符串是否是回文串.空串认为是回文串. 思路:双指针问题,重点在于此题的很多陷进:例如,s = " " ,return true. s = ".,&qu ...

  4. CDH 不能监控hadoop状态

    1 背景:公司集群整体搬迁 2 问题:hadoop重启后,发现一个非常坑爹的问题.用 hadoop dfsadmin -report 查看datanode状态完全正常,但是Cloudera Manag ...

  5. object在ie8与ie9中与下文多出几像素问题

    今天发现一个很古怪的问题,object与下面文字部分的间隔超过了30个像素,关系是不管用padding还是margin都是一样的效果: 给其设置overflow:hidden属性依然没有任何效果,再设 ...

  6. 通过HttpClient方式连接网络

    xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...

  7. javascript绑定时间 含(IE)

    script language = "javascript" type = "text/javascript"> function test(){ win ...

  8. Treeview获取父节点

    private void treeView1_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object&g ...

  9. 信驰达蓝牙4.0模块全面升级 v2.20 U最新发布

    作为国际蓝牙联盟成员之一,德州仪器(TI)于2012年强势推出CC254X系列单芯片(SOC)低功耗蓝牙收发器,经典51内核,最强优势在于丰富的外围(21个IO,UART,SPI,USB2.0,PWM ...

  10. Python学习教程(learning Python)--1.2.1 Python输出语句print基本使用

    Python提供很多的内建(built-in)函数,使用者可以不用自己写代码就可以完成一个功能很强大的程序, 在Python里使用最多的(也许是)print函数主要用于用户输出信息. 基本用法:pri ...