windows对象 document对象 的一些操作 9.23
函数: 四要素
1.返回类型
2.函数名
3.参数列表
4.函数体
window . 对象
opener 打开当前窗口的源窗口 alert(window.opener);
open( ) 例子:
先给他设置一个按钮名。
window.open("第一部分","第二部分","第三部分","第四部分");
特征参数:
第一部分:写要打开的页面地址
第二部分:打开的方式,_blank 是在新窗口打开 _self
第三部分:控制打开的窗口,可以写多个,用空格隔开
toolbar=no新打开的窗口无工具条
menubar=no无菜单栏 status=no无状态栏
width=100 height=100 宽度高度
left=100 打开的窗口距离左边多少距离
resizable=no窗口大小不可调
scrollbars=yes 出现滚动条
location=yes 有地址栏
返回值:新打开的窗口对象
2:最简单的打开窗口
window.open("http://www.baidu.com","_blank","toolbar=no"); 在一个新窗口中打开百度。
3:打开窗口,并保存在一个变量中
var w= window.open();
4:只打开窗口一次,例子如下:
if(w==null)
{
w=window.open("http://www.baidu.com","_blank","toolbar=no");
}
这里用一个if语句,判断w的值是否为空,打开一个窗口之后w的值就不为空了,之后再点击鼠标调用此函数则不执行打开新窗口。
close( ) 关闭指定的窗口
setinteval( ) ("要执行的代码",间隔的毫秒数)
setTimeout( ) ("要执行的代码",延迟的毫秒数)
history
window.history对象
历史记录,通过历史记录可以操作页面前进或者后退
window.history.back();后退
window.history.forward();前进
window.history.go(n); n是正数代表前进n个页面,n是负数代表后退n个页面。
location
location地址栏
var s = window.location.href;获取当前页面的地址
window.location.href="http://www.baidu.com";修改页面地址,会跳转页面 *******
window.location.hostname: 主机名,域名,网站名,可用变量接收
window.location.pathname: 路径名,可用变量接收
document . 对象
找元素: 第一方法:getElementById()根据ID找
alert(document.getElementById("ID名")); 根据ID找
根据class找。 返回数组,有几个标签名就出来数字是几。
第二种方法: getElementsByClassName()根据class找,返回数组
var attr = document.getElementsByClassName("class名");
alert(attr[2]);
第三种方法:getElementsByName()根据name找,返回数组
根据name找。 返回数组,有几个标签名就出来数字是几。
alert(document.getElementsByName("name名")[0]);
第四种方法:getElementsByTagName()根据标签名找,返回数组
根据标签名找。 返回数组,有几个标签名就出来数字是几。
alert(document.getElementsByTagName("div").length);
操作内容:
普通元素:
innerText获取内容文本我们能够看到的操作内容:
普通元素:例子
var a = document.getElementById("a");
1.获取内容文本
alert(a.innerText);
2.设置内容
a.innerText = "ok"; 要把(ok)设置进去 (a)只是一个名称可以随便的
innerHTML获取标签里所有内容所有代码包括标签
例子:
3.获取内容代码
alert(a.innerHTML);
4.设置内容
a.innerHTML = "<span style='color:red'>ok</span>";
5.显示出标签
a.innerText = "<a href='#'>超链接</a>";
表单元素:
value
操作属性:
.setAttribute(属性名,属性值)设置属性
.removeAttribute(属性名)移除属性
.getAttribute(属性名)获取属性
操作样式:
a.style.width获取样式
例:::
操作样式
var a = document.getElementById("d");
1.获取样式,只能获取内嵌的
alert(a.style.width);
2.设置样式
a.style.fontSize = "30px";
3.修改样式
a.style.backgroundColor = "green";
a.style.color="white";
windows对象 document对象 的一些操作 9.23的更多相关文章
- BOM对象,math对象document对象的属性和操作和 事件的基本操作
Math对象 //该对象中的属性方法 和数学有关. abs(x) 返回数的绝对值. exp(x) 返回 e 的指数. floor(x) 对数进行下舍入. log(x) 返回数的自然对数(底为e). m ...
- JavaScript对象(document对象 图片轮播)
图片轮播: 需要注意的HTML需要img标签,他和input标签一样,是非封闭的标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
- HTML中 DOM操作的Document 对象详解(收藏)
Document 对象Document 对象代表整个HTML 文档,可用来访问页面中的所有元素.Document 对象是 Window 对象的一个部分,可通过 window.document 属性来访 ...
- 【使用 DOM】使用 Document 对象
Document 对象时通往DOM功能的入口,它向你提供了当前文档的信息,以及一组可供探索.导航.搜索或操作结构与内容的功能. 我们通过全局变量document访问Document对象,它是浏览器为我 ...
- 【温故而知新-Javascript】使用 Document 对象
Document 对象时通往DOM功能的入口,它向你提供了当前文档的信息,以及一组可供探索.导航.搜索或操作结构与内容的功能. 我们通过全局变量document访问Document对象,它是浏览器为我 ...
- dom对象详解--document对象(一)
document对象 Document对象代表整个html文档,可用来访问页面中的所有元素,是最复杂的一个dom对象,可以说是学习好dom编程的关键所在. Document对象是window对象的一 ...
- 浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Document 对象
ylbtech-浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Document 对象 1.返回顶部 1. HTML DOM Document 对象 Docume ...
- JS中的DOM对象及JS对document对像的操作
DOM对象 windows:属性:opener(打开者) 方法:open().close(),setTimeout().setInterval()... location:属性:href 方法:rel ...
- JavaScript的DOM操作。Window.document对象
间隔执行一段代码:window.setlnteval("需要执行的代码",间隔毫秒数) 例 : window.setlnteval("alert("你 ...
随机推荐
- .NET 并行编程——任务并行
本文内容 并行编程 任务并行 隐式创建和运行任务 显式创建和运行任务 任务 ID 任务创建选项 创建任务延续 创建分离的子任务 创建子任务 等待任务完成 组合任务 任务中的异常处理 取消任务 Task ...
- 关于redis性能问题分析和优化
一.如何查看Redis性能 info命令输出的数据可以分为10个分类,分别是: server,clients,memory,persistence,stats,replication,cpu,comm ...
- PHP——自定义比较算法
很多时候,程序都是直接写好逻辑运算,提供给用户的是一个值,然后后台去比较:但是有时会提供一种类似计算器一样的交互方式的时候,PHP只能读懂用户的输入来进行比较了- 最近的一个项目涉及到一个由用户自定义 ...
- [svc]证书各个字段的含义
证书生成工具 1,openssl 2,jdk自带的keystone 3,cfssl 证书中各个字段的含义 - 查看证书的内容 openssl x509 -in /etc/pki/CA/cacert.p ...
- 阅读《深入应用C++11:代码优化与工程级应用》
虽然一直是写C++的,但是却对C++11了解的不是太多,于是从图书馆借了本书来看 这本书分两大部分: 一.C++11的新特性讲解 二.工程级代码中C++11的应用 这样的安排很合理,第一部分把新特性讲 ...
- java解析Excel(xls、xlsx两种格式)
https://www.cnblogs.com/hhhshct/p/7255915.html ***************************************************** ...
- 【iCore4 双核心板_ARM】例程二:读取ARM按键状态
实验原理: 按键的一端与STM32 PB9相连,另外一端接地,且PB9外接一个1K电阻大小的上拉电阻, 初始化时把PB9设置成输入模式,当按键弹起时,PB9由于上拉电阻的作用呈高电平(3.3V): 当 ...
- Jquery计算指定日期加上多少天、加多少月、加多少年的日期
/* * 功能:实现VBScript的DateAdd功能. * 参数:interval,字符串表达式,表示要添加的时间间隔. * 参数:number,数值表达式,表示要添加的时间间隔的个数. * 参数 ...
- JVM 内部原理(六)— Java 字节码基础之一
JVM 内部原理(六)- Java 字节码基础之一 介绍 版本:Java SE 7 为什么需要了解 Java 字节码? 无论你是一名 Java 开发者.架构师.CxO 还是智能手机的普通用户,Java ...
- Java连接各种数据库写法
# 示例配置参考,涵盖几乎所有的主流数据库 ############# Oracle数据库 ######################## # 数据库驱动名 driver=oracle.jdbc ...