Ø Windows对象与document对象关系图示
Ø 其中Document对象代表了网页中的文档
Ø Image对象代表了文档中的所有图片
Ø Link对象代表了文档中的所有超链接
Ø Frames是windows的一个实例,亦是一数组;而images,links,anchors则是隶属于document的对象实例。
Ø Location对象的属性search以及方法reload(),replace()均很重要。
Ø Document对象的属性:
通用属性 | |
bgColor | 获取或设置文档背景色 |
cookie | 读写Cookie对象 |
domain | 用于指定当前文档所属Internet域 |
fgColor | 获取或设置文本的默认颜色 |
forms | 获取当前文档中的表单 |
images | 获取当前文档中的所有图像 |
lastModified | 获取当前文档最后一次修改时间 |
links | 代表当前文档中的所有超链接 |
title | 获取或设置当前文档的标题 |
URL | 代表当前文档的URL |
referrer | 返回链接到当前文档的HTML文档的URL |
Ø Document对象的all属性返回值为包含文档中所有HTML标签的数组,对all[]数组中的元素的引用方法有以下三种:
² document.all[i]
² document.all[name]
² document.all.tags[tagName]
Ø Document对象提供了一些处理文档内容的方法
方法 | 说明 |
clear() | 清除文档中的所有内容,不推荐使用 |
close() | 关闭一个文档输出流,并显示文档流中的内容 |
open() | 打开一个新文档 |
write() | 在文档中输出数据 |
writeln() | 在文档中输出数据 |
createElement(name) | 创建元素 |
createTextNode(text) | 创建文本元素 |
getElementById(id) | 根据ID属性获取元素 |
getElementsByName(name) | 根据name属性获取元素列表 |
getElementsByTagName(tagname) | 根据HTML标签名称获取元素列表 |
appendChild(node) | 在某个元素中追加子元素 |
removeChild(childreference) | 删除某个元素的子节点 |
cloneNode(deepBoolean) | 复制节点 |
replaceChild(newChild, oldChild) | 替换节点 |
insertBefore(newElement, targetElement) | 在某个节点之前插入一个新节点 |
click() | 执行某个元素的onclick方法 |
Ø appendChild 方法可以向当前节点对象追加子节点,经常用于给页面动态的添加内容,例如:给div添加一个文本节点:
<div id="test"></div>
<script type="text/javascript">
var newdiv=document.createElement("div")
var newtext=document.createTextNode("A new div")
newdiv.appendChild(newtext)
document.getElementById("test").appendChild(newdiv)
</script>
Ø removeChild 方法可以移除并返回当前节点的子节点,这个被移除的节点可以被插入到document树中其他地方
<div id="f">
<div id="child">A child</div>
</div>
<script type="text/javascript">
var cd=document.getElementById("child");
var rd=document.getElementById("f").removeChild(cd);
</script>
Ø ReplaceChild 方法可以把当前节点的一个子节点替换为另一个节点
<div id="adiv">
<span id="innerspan">span</span>
</div>
<script type="text/javascript">
var oldele=document.getElementById("innerspan");
var newele=document.createElement("p");
var text=document.createTextNode("I am a new Element");
newele.appendChild(text);
document.getElementById("adiv").replaceChild(newele, oldele);
</script>
Ø InsertBefore 方法可以向当前节点插入一个新节点
语法为:insertBefore(newElement,targetElement)
如果targetElement被设置为null,那新节点被当作最后一个子节点插入,否则那新节点应该被插入targetElement之前的最近位置
<body> <span id="love">熊掌我所欲也!</span> </body>
<script type="text/javascript">
var love=document.getElementById("love")
var newspan=document.createElement("span")
var ref=document.body.insertBefore(newspan, love)
ref.innerHTML="鱼与";
</script>
Ø Click 方法用于执行元素的一次点击事件,可以用于通过脚本来触发onClick函数
<script>
function wow() {
alert("我好象没有点鼠标啊");
}
</script>
<div id="test" οnclick=‘wow()’>我是一个可以被点击的层</div>
<script type="text/javascript">
var div = document.getElementById("test");
div.click();
</script>
Ø 与元素相关的属性成员
childeNodes | 返回某个元素的所有子节点对象 |
innerHTML | 设置或获取某节点的Html文本 |
innerText | 设置或获取某节点的Text文本 |
Style | 返回一个元素的style对象的引用 |
firstChild | 返回某个元素的第一个子节点 |
lastChild | 返回某个元素的最后一个子节点 |
parentNode | 返回某个元素的父节点的对象 |
nextSibling | 返回某个元素的下一个兄弟节点的对象 |
previousSibling | 返回某个元素的前一个兄弟节点的对象 |
nodeName | 返回节点的HTML标记名称 |
Ø innerHTML与innerText是两个非标准属性,但是几乎所有浏览器都支持这两个属性。
通过这个属性我们很容易修改一个元素的Html文本或Text文本
<p>
<b>新人类,什么?!</b>
</p>
<script type="text/javascript">
window.οnlοad=function(){
var p0 = document.getElementsByTagName("p")[0];
p0.innerHTML="<b>新新人类,什么?!</b>";
}
</script>