document 对象
一. document 对象
1. 属性的设置
title : 页面标题的设置
alert(document.title); 输出页面的标题;
document.title = "test1"; 设置页面标题为"test1"
URL : 返回当前文档的URL (URL大写)
alert( document.URL); 输出页面的url
bgColor : 设置当前页面的背景色
document.bgColor = "red"; (颜色名称用字符串显示)
fgColor : 设置字体颜色
document. fgColor = "black"; (颜色名称用字符串显示)
2. 方法
1. getElementById("id名"); 通过id获取页面的元素
2. getElementsByTagName("标签名");
通过标签名获取元素的对象,其返回值为标签对象的集合,可以把它当成数组来应用,但其不是数组
3. getElementsByName("name的属性值");
通过标签的name属性的值来获取页面元素对象;
name不是div的标准属性;
在IE中,只有当 getElementsByName 针对的是form表单,这个方法才有效,否则无效.
4. getElementsByClassName("类的属性值");
通过标签的class属性的值来获取页面元素对象;
在IE中,不存在这个方法,可以用function封装一个方法来解决其兼容性.(解决兼容性时,注意: 每一个对象里都有一个className的属性值)
3. 对象的集合
document.all : 返回页面上所有元素对象 (只有IE中才有这个方法);
alert(document.all.length); 输出页面中所有元素的个数
alert(document.forms.length); 输出页面中form表单的个数
二. history + location
1. history : 记录访问的历史页面
var a = history.length; 返回的是历史访问的页面数
history有三个方法:
1. go (number): 表示向前进一页
number为正数,代表向前进number个页面;
number为负数,代表向后退number个页面;
number为零,代表刷新;
例如: history.go(1) ; history.go(-1) ; history.go(0) ;
2. forward (): 调用后代表向前进一页
history.forward(); 表示向前进一页;
3. back(): 调用后代表向后退一页
history.back(); 表示向后退一页;
4. load(): 调用后代表刷新
history.load(); 表示刷新
2. location : 包含当前URL的相关信息
1. var a = location.href; 返回当前页面的路径(URL)
location.href = "http://www.baidu.com"; 表示导航到新的页面(例如这里写的百度)
2. search : 返回url的查询数据
解释: 在页面一设置 a 标签跳转到页面二, a.href = "页面二.html?username=zhang&password=123";在页面二里调用alert(location.search),当点击页面一里的跳转后,进入页面二,这时弹出窗口,输出"?username=zhang&password=123"
3. assign : 页面跳转(有历史记录)
location.assign("url"); 代表跳转到"url"这个页面
4. replace : 页面跳转(只是无历史记录)
location.replace("url"); 代表跳转到"url"这个页面,无历史记录
5. reload : 刷新页面
location.reload(true); 代表从服务器载入,刷新本页面
location.reload(false); 代表从缓存载入,刷新本页面
三. 操作元素的内容
1. innerHTML : 设置或获取标签中的内容
div2.innerHTML = div1.innerHTML;
表示: 把div1的内容赋给div2,其中的内容的是带标签赋值(也就是说包括样式也会复制过去)
2. innerText : 设置或获取标签中文本的内容(支持IE 和 chrom)
div2.innerText = div1.innerText;
表示: 把div1的内容赋给div2,不带标签(样式)的复制,纯粹只复制文子
3. 兼容性问题:
textContent : 功能跟innerText的一样,只是不支持IE,只支持 FF 和 chrom
四. 属性操作
1. 直接操作 : 对象 . 属性 = 值 (设置\获取\添加)
a.href = "test.html"; 设置a 标签跳转的路径
alert(a.id); 获取a 标签 id 的属性值
a.className = "a-1"; 添加a标签的class属性,并设值
2. 方法
1. getAttribute("属性"); 获取该属性的值
1. setAttribute("属性","值"); 设置某属性的值
五. 样式操作(首先找到对象,再操作其样式)
1. 行内样式 : 对象. style. 属性
例: div.style.color = "black"; 注意""的位置
div.style.width = "100px";
批量修改样式:
div. className = "div2";
解释: 每一个对象都有一个className的属性值,上面的div2是定义好的一个类名(在style中定义的".div2"),
把div2赋给div.className,这样该div就有一个跟".div2"一样的样式了;
若是多个div同时设置样式,可以通过数组来做.
2. a.onmouseover = function(){ }; 设置鼠标移上去的样式
a.onmouseout = function(){ }; 设置鼠标移出的样式
3. styleSheets
document.stySheets[index],rules[index],style.属性 (查找到某个对象,为其设置样式)
例如: document.stySheets[0],rules[0],style.width;
解释: 找到第一个style块, 在这个块里,找到第一个对象,设置其宽度;
rules 支持IE,chrom
CSSRules : 支持FF,chrome
4. screen 对象
avaiHeight : 返回显示屏幕的高度(是屏幕,不是浏览器,且不含任务栏)
avaiWidth : 返回显示屏幕的宽度(是屏幕,不是浏览器,且不含任务栏)
height : 屏幕高度(包含任务栏)
width : 屏幕宽度(包含任务栏)
