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对象的属性

属性名称	类型	描述
body	DOM元素	页面实体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对象的属性

名称	类型	描述	示例
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”

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_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”

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);
}

Foryouos

JavaScript的DOM对象

noscript元素

全局DOM对象

window对象的方法

document对象的属性

navigator对象的属性

history对象的方法和属性

location对象的属性

window.onload和不显眼的JavaScript

理想的Web页面划分

window对象的事件

window.onload 处理程序语法模板

匿名函数

模块模式

关键词this

DOM元素对象—-文本交互

用DOM调整样式

DOM样式属性值

遍历属性和方法

选择元素组

按名称获取元素

创建和删除节点

作者

JavaScipt基础

CSS基础教学

HTML 基础

通过wordpress搭建个人网站

foryouos网站再再次上线咯

发表评论取消回复

JavaScipt基础

noscript元素

全局DOM对象

window对象的方法

document对象的属性

navigator对象的属性

history对象的方法和属性

location对象的属性

window.onload和不显眼的JavaScript

理想的Web页面划分

window对象的事件

window.onload 处理程序语法模板

匿名函数

模块模式

关键词this

DOM元素对象—-文本交互

用DOM调整样式

DOM样式属性值

遍历属性和方法

选择元素组

按名称获取元素

创建和删除节点

作者

相关文章

发表评论 取消回复

JavaScipt基础

发表评论取消回复