DOM文件

JavaScript的DOM对象

noscript元素

<noscropt>
    <p class="error">警告:此网站需要JavaScript。请启动JavaScript的web浏览器访问此网站。</p>
</noscript>

全局DOM对象

对象名称含义
document当前的web页面
history用户以前访问过得页面列表
location当前web页面的URL
navigator用户正在使用web浏览器
screen浏览器和页面占用的屏幕区域
window浏览器窗口
全局DOM对象

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)
将页面上下滚动到特定点
windows对象方法

document对象的属性

属性名称类型描述
bodyDOM元素页面实体DOM对象
cookies字符串提供给该页面的所有cookies的字符串表示形式
referrer字符串在此之前用户正在查看的文档的URL
title字符串标题栏中显示的网页标签
URL字符串Web页面的完整URL
document对象的属性

navigator对象的属性

属性名称类型描述
appName字符串浏览器名称
appVersion字符串浏览器版本号
cookieEnables布尔型如果浏览器支持cookies则为真
language字符串用户的语言,如“en-us”
platform字符串用户使用的操作系统,如“Win 7”
userAgent字符串表示用户浏览器,操作系统和版本的长“用户代理”
字符串
navigator对象的属性

history对象的方法和属性

方法/属性名称描述
back(),forward()将浏览器重定向到其上一页或下一页
go(index)将浏览器重定向到历史记录中的特定页
length历史记录中的URL数(属性)
history对象
属性名称类型描述
availHeight,
availWidth
整型显示屏的宽度/高度,不包括任务栏
colorDepth整型用户监视器上可用的颜色位深度
height,width整型显示屏的宽度/高度
screen对象的属性

location对象的属性

名称类型描述示例
hashstringanchor(part of URL after #)“#link05”
hoststring主机名和端口号“www.foryouos.com:80”
hostnamestring主机/域的名称“www.foryouo.com”
hrefstring完整的URL
pathnamestring目录/文件名“/foo/bai/”
portstring端口号“8080”
portocolstring协议,后面跟着一个冒号“http:”
searchstring查询字符串(URL中?后的部分)“?a=b&c=d”
location对象的属性

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对象的时间

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_colorbackgroundColor“#ff00dd”
borderborder“1em solid red”
border-top-widthborderTopWidth“3px”
colorcolor“red”
floatcssFloat“left”
font-weightfontWeight“bold”
font-sizefontSize“12pt”
z-indexzIndex“456”
DOM样式属性名
<!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);
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

JavaScipt基础

2020-09-09

©2020 Foryouos All rights reserved.    |   豫ICP备20023651号    |   隐私政策            |   豫公网安备 41022202000044号