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);
}
-
标签：JavaScript、网站建设