
JavaScript的DOM对象
noscript元素
<noscropt>
<p class="error">警告:此网站需要JavaScript。请启动JavaScript的web浏览器访问此网站。</p>
</noscript>
全局DOM对象
对象名称 | 含义 |
document | 当前的web页面 |
history | 用户以前访问过得页面列表 |
location | 当前web页面的URL |
navigator | 用户正在使用web浏览器 |
screen | 浏览器和页面占用的屏幕区域 |
window | 浏览器窗口 |
window对象的方法
方法名称 | 描述 |
alert,confirm,prompt | 弹出框 |
setInterval,setTimeout, clearInterval,clearTimeout | 记时器 |
open(URL,name,options) close() | 弹出新的浏览器窗口 |
print() | 发送web页面到打印机 |
blur() ,focus() | 将窗口设置成活动窗口或非活动窗口 |
moveBy(dx,dy) moveTo(x,y) | 移动浏览器窗口到屏幕的指定位置 |
resizedBy(dw,dh) resizeTo(width,height) | 改变浏览器窗口 |
scrollBy(dx,dy) scroll(x,y) | 将页面上下滚动到特定点 |
document对象的属性
属性名称 | 类型 | 描述 |
body | DOM元素 | 页面实体DOM对象 |
cookies | 字符串 | 提供给该页面的所有cookies的字符串表示形式 |
referrer | 字符串 | 在此之前用户正在查看的文档的URL |
title | 字符串 | 标题栏中显示的网页标签 |
URL | 字符串 | Web页面的完整URL |
navigator对象的属性
属性名称 | 类型 | 描述 |
appName | 字符串 | 浏览器名称 |
appVersion | 字符串 | 浏览器版本号 |
cookieEnables | 布尔型 | 如果浏览器支持cookies则为真 |
language | 字符串 | 用户的语言,如“en-us” |
platform | 字符串 | 用户使用的操作系统,如“Win 7” |
userAgent | 字符串 | 表示用户浏览器,操作系统和版本的长“用户代理” 字符串 |
history对象的方法和属性
方法/属性名称 | 描述 |
back(),forward() | 将浏览器重定向到其上一页或下一页 |
go(index) | 将浏览器重定向到历史记录中的特定页 |
length | 历史记录中的URL数(属性) |
属性名称 | 类型 | 描述 |
availHeight, availWidth | 整型 | 显示屏的宽度/高度,不包括任务栏 |
colorDepth | 整型 | 用户监视器上可用的颜色位深度 |
height,width | 整型 | 显示屏的宽度/高度 |
location对象的属性
名称 | 类型 | 描述 | 示例 |
hash | string | anchor(part of URL after #) | “#link05” |
host | string | 主机名和端口号 | “www.foryouos.com:80” |
hostname | string | 主机/域的名称 | “www.foryouo.com” |
href | string | 完整的URL | |
pathname | string | 目录/文件名 | “/foo/bai/” |
port | string | 端口号 | “8080” |
portocol | string | 协议,后面跟着一个冒号 | “http:” |
search | string | 查询字符串(URL中?后的部分) | “?a=b&c=d” |
window.onload和不显眼的JavaScript
不显眼的JavaScript描述了一种在不将任何JavaScript放入HTML页面主体的情况下附加事件处理程序的方法
这将为我们提供更清晰的HTML代码,以及内容表示和行为的清晰分离
理想的Web页面划分
- 内容–HTML
- 外观样式信息—-CSS中
- 代码/脚本—-JS文件中
///通过DOM附加事件处理程序的语法模板
element.event = functionName;
///以前会这样处理
<btton id="ok" onclick="booyah()";>Okey</button>
//使用新的不显眼的样式时可以这样做
<button id="ok">Okey</button>
///将onclick处理程序附加到OK按钮
var okayButton =document.getElementById("ok");
okeyButton.onclick=booyah;
window对象的事件
事件名称 | 描述 |
onerror | 加载文档或图像时出错 |
onload | 浏览器加载页面 |
onresize | 浏览器窗口已调整大小 |
onunload | 浏览器退出页面 |
window.onload 处理程序语法模板
window.onload = functionName;
...
function functionName() {
code to attach event handlers;
}
举例:
...
<button id ="compute"> Compute!</button>
...
window.onload =pageLoad;
function pageLoad() {
var computeButton =document.getElementById("computer")
computerButton.conclick = compute;
}
function compute() {
...
}
匿名函数
function(parameters) {
statement;
}
- JavaScript允许声明匿名函数
- 快速创建函数而不给它命名
- 可以存储为变量,附加为事件处理程序
window.onload =function() {
statements;
}
其它代码和其它JS文件可以查看和修改他们
全局变量的缺点
模块模式
(function() {
statements;
}) ();
- 在声明并立即调用的匿名函数中包装文件的所有代码。
- 将引入0个全局变量。
- 由以上代码定义的变量和函数不能在外部进行处理。
关键词this
- 引用当前对象的关键字,在事件处理程序中,引用处理程序附加到的元素
- 所有的JavaScript代码实际上都在对象内部运行
- 默认情况下,代码在全局窗口对象中运行(因此this===window)
- 声明的所有全局变量和函数都将成为窗口的一部分
- this关键字引用当前对象
小费处理器
//JS代码main.js函数
window.onload =function (){
document.getElementById("tenpercent").onclick =computeTip10
document.getElementById("fifteenpercent").onclick=computeTip10;
document.getElementById("eighttennpercent").onclick=computeTip10;
};
function computeTip10() {
var subtotal = parseFloat(document.getElementById("subtotal").value);
var tipPercent =parseInt(this.innerHTML);
var tipAmount =subtotal*tipPercent/100.0;
document.getElementById("total").innerHTML ="Tip: $" +tipAmount;
}
/*HTML代码*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签栏测试</title>
<script src="js/main.js" type="text/javascript"></script>
</head>
<body>
<a>浏览器启动JavaScript测试</a>
<noscript>
<p class="error">警告:此网站需要JavaScript。请启动JavaScript的web浏览器进行访问网站</p>
</noscript>
<h1>Tip calculator</h1>
<div>
$<input id="subtotal" type="text" size="5"/>subtotal<br/>
<button id="tenpercent">10%</button>
<button id="fifteenpercent">15%</button>
<button id="eighttennpercent">18%</button>
<span id="total"></span>
</div>
</body>
</html>
DOM元素对象—-文本交互
获取文本和HTML内容的各种DOM属性
属性名 | 描述 | 浏览器支持情况 |
innerHTML | 节点内的文本和/或 HTML标签 | 所有浏览器 |
innerText | 节点内的文本(没有HTML标签) | 仅支持IE浏览器 |
textContent | 节点内的文本(没有HTML标签) | 除IE浏览器的所有浏览器 |
value | 表单控件中的文本值 | 所有浏览器 |
若要设置错误ID的段落以显示特定错误信息,可以编写如下代码,这些代码适用于符合标准的浏览器
var errorArea =document.getElementById("error");
errorArea.textContent ="Error:Missing last name";
如果希望代码能够在包含IE在内的所有浏览器上运行,则可以这样编写
var errorArea =document.getElementById("erroe");
errorArea.innerText = errorArea.textContent = "Error:Missing last name";
//或者
errorArea.innerHTML ="Error:Missing last name";
innerHTML可以将任意HTML内容注入页面,然而这样容易出现缺陷与错误,是一种不良的风格形式,禁止使用innerHTML注入HTML标签,只能注入文本内容。(后面会有更好的方式)
用DOM调整样式
element.style.property //获取值
element.style.property = "value"; //设置值
<p id="slogan">Eat at Joe's.you can't beat our prices! /*HTML*/
var paragraph =document.getElementById("alogan");
paragraph.style.color="red";
DOM样式属性值
CSS属性名 | DOM属性名 | 示例 |
background_color | backgroundColor | “#ff00dd” |
border | border | “1em solid red” |
border-top-width | borderTopWidth | “3px” |
color | color | “red” |
float | cssFloat | “left” |
font-weight | fontWeight | “bold” |
font-size | fontSize | “12pt” |
z-index | zIndex | “456” |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签栏测试</title>
<script src="js/main.js" type="text/javascript"></script>
</head>
<body>
<noscript>
<p class="error">警告:此网站需要JavaScript。请启动JavaScript的web浏览器进行访问网站</p>
</noscript>
<p id="lyrics">
Never gonna give you up <br/>
Never gonna let you down <br/>
Never gonna run around and desert you <br/>
Never gonna say goodbye <br/>
Never gonna tell a lie and hurt you
</p>
<div>
Font:
<label>
<input id="serif" type="radio" name="font" checked="checked"/>
Serif</label>
<label><input id="fantasy" type="radio" name="font"/>
Fantasy</label>
<label><input id="monospace" type ="radio" name="font">
Monospace
</label>
</div>
style:
<label><input id="bold" type="checkbox"/>Bold</label>
<label><input id="italic" type="checkbox"/>Italic </label>
</body>
</html>
window.onload =function (){
document.getElementById("bold").onclick =boldClick;
document.getElementById("italic").onclick=italicClick;
document.getElementById("monospace").onclick=fontClick;
document.getElementById("bold").onclick=boldClick;
document.getElementById("italic").onclick=italicClick;
};
function boldClick() {
var lyrics=document.getElementById("lyrics");
if(this.checked) {
lyrics.style.fontWeight ="bold";
}
else {
lyrics.style.fontWeight="normal"
}
}
function italicClick(){
var lyrics =document.getElementById("lyrics");
if(this.checked) {
lyrics.style.fontStyle="italic";
}
else {
lyrics.style.fontStyle="normal";
}
}
function fontClick(){
var lyrics =document.getElementById("lyrice");
lyrics.style.fontFamily=this.id;
lyrics.style.fontSize =20;
}
遍历属性和方法
每个DOM节点对象具有下列属性
属性名 | 描述 |
firstChild,lastChild | 此节点的子节点列表中的开始与结束节点 |
childNodes | 此节点的所有子节点数组 |
nextSibling previousSibling | 具有相同父节点的相邻节点 |
parentNode | 包含此节点的元素 |
选择元素组
全局文档对象包含返回节点或节点数组的方法
方法名 | 描述 |
getElementById(id) | 返回HTML代码中具给定ID属性的DOM元素 |
getElementsByTagName(tag) | 返回拒用给定HTML元素的DOM元素数组,如“div” |
getElementsByName(name) | 返回具有给定名称属性的DOM元素数组(如:组中的所有单选钮) |
querySelector(sel), querySelectorALL(sel) | 返回与给定CSS样式选择器字符串匹配的第一个元素(或分别返回所有元素) |
按名称获取元素
//为所有段落设置黄色背景
var allParagraphs = document.getElementsByTagName("p");
for (var i=0;i<allParagraphs.length;i++) {
allParagraphs[i].style.backgroundColor = "yellow";
}
创建和删除节点
//创建一个新的<h2>节点
var newheading =document.createElement("h2");
newHeading.style.color ="green";
newHeading.innerHTML="This is a heading";
方法名 | 描述 |
appendChild(node) | 此节点的子节点列表尾追加给定接节点 |
insertBefort(new,old) | 此节点的子节点列表的old位置之前插入给定的新节点 |
removeChild(node) | 从此节点的子节点列表中移除给定节点 |
replaceChild(new,old) | 用新节点替换旧节点 |
<div id="paragrapharea">
<button id="addheading">Add a paragraph</button>
</div>
window.onload =function(){
var document.getElementById("addheading").onclick = addHeadingClick;
}
function addHeadingClick() {
var paragraph =document.crateElement("p");
paragraph.innerHTML ="ALL work and no play makes Jack a dull boy";
var area =document.getElementById("paragrapharea");
area.appendChild(paragraph);
}