head rush ajax chapter4 DOM

《 Head Rush Ajax》website: http://www.headfirstlabs.com/books/hrajax/
document对象可以让你的JavaScript访问Web浏览器的DOM树。可以把<html>看作树的根。
getElementById()通过id属性找到页面中的元素。var mananger = document.getElementById("Mg").value;
documentElement属性,获取HTML文档的<html>根元素    var htmlElement = document.documentElement;
getElementByTagName()取得某个名字的所有节点,返回一个数组,必须用循环处理这个数组内的每个元素以取得特定元素。
var allDivs = document.getElementByTagName("div");   var firstPara = document.getElementByTagName("p")[0];
createElement() createTextNode()增加元素和文本。
var myImage = document.createElement("img");
var favshows = document.createTextNode("24 and lost");
DOM中有文本节点对象(标签之间的文本)和元素节点(标签),他们都是一个个节点,可以通过一个节点的parentNode,firstChild,lastChild获取相关节点,以及childNodes节点取得一个节点的全部子节点(是一个数组)
DOM树内的一切都是节点,包括标签的属性id、name等,元素和文本时特殊类型的节点,可以用nodeName取得节点名字,用nodeValue取得节点值。
元素节点有名字但是没有值,文本节点没有名字但是有值。
可以使用下面的条件语句判断:(部分浏览器不认识Node这个类,导致该方法不能运行)
if (someNode.nodeType == Node.ELEMENT_NODE){
//something done to ELEMENT_NODE
}else if(someNode.nodeType == Node.TEXT_NODE){
//文本节点
}
<script type="text/javascript" src="top5.js"> </script> //中间的空格千万不能忘记
JavaScript中的onclick和html页面中使用的onClick没有差别,写一个方法来负责事件处理器的设定,会比较灵活,而且可以多次调用这个方法。注意其中的大小写的差别。
<body>有个事件处理器,名为onload(),一旦页面被加载就立刻运行某个JavaScript函数。
在javascript函数中,可以通过使用this关键字来让你知道DOM树中的哪个节点调用此函数。
将一个元素加入另一个元素中。 div.replaceNode(img, img1):用要加入节点img取代现有节点img1
div.insertBefore(img,img3): 在某个子节点之前插入一个节点
div.appendChild(img):在所有的子节点最后附加一个节点。
表单中调用JavaScript函数,注意函数后面的括号和分号。<input type="button" value="Start Over" onClick="startOver();"/>
可以使用JavaScript程序代码查看甚至改变DOM树,你对DOM的改变会自动反应到浏览器所呈现的画面上。你也可以利用JavaScript为DOM树加入CSS样式和JavaScript事件处理器。

top5.js:
function addOnClickHandlers(){
var cdsDiv = document.getElementById("cds");
var cdImages = cdsDiv.getElementsByTagName("img");
for (var i = 0; i<cdImages.length; i++){
cdImages[i].onclick = addToTop5;  //为所有图片加上事件处理   
}   
}


function addToTop5(){
//将一张CD加入TOP 5
var imgElement = this;  //一旦函数执行,this指向用户onclick的对应图片<img>元素
var top5Element = document.getElementById("top5"); //取得要加入图片的地方
var num = 0; //统计添加的图片数量

for(var i = 0; i<top5Element.childNodes.length; i++){//遍历元素的每一个子元素
if(top5Element.childNodes[i].nodeName.toLowerCase() == "img"){
num++;  //统计元素中img元素的数量
}
}
if (num >= 5){//当图片数量超过5时,提醒。
alert("You already have 5 CDs. Click \"Start Over\" to try again.");
return;
}
top5Element.appendChild(imgElement);   //加入图片
imgElement.onclick = null;  //对于已经加入的图片,删除其事件处理,以免重复加入一幅图片

var newSpanElement = document.createElement("span"); //创建一个新的span元素
newSpanElement.className = "rank";  //给元素指派CSS类
var newTextElement = document.createTextNode(num+1);//创建次序文本对象
newSpanElement.appendChild(newTextElement);  //将文本添加到span的最后
top5Element.insertBefore(newSpanElement,imgElement); //在图像的前面插入新建的span元素
}
function startOver(){
//重新排序TOP5
var top5Element = document.getElementById("top5");
var cdsElement = document.getElementById("cds");//获取放图片的cds元素盒子
while (top5Element.hasChildNodes()){
var firstChild = top5Element.firstChild;
if(firstChild.nodeName.toLowerCase() == "img"){//依次将top5中的图片放入cds盒子中
cdsElement.appendChild(firstChild);
}else{
top5Element.removeChild(firstChild);//用来移除其他的子节点
}       
}   
addOnClickHandlers();//重新激活所有图片的事件处理,把null改为addToTop5
}

转载于:https://www.cnblogs.com/aquar/archive/2010/04/15/3451467.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/299328.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【DotNetMLLearn】.NET Core人工智能系列-概述

.NETer大家好&#xff0c;今天为大家送上.NET Core 下如何完成人工智能应用的系列&#xff0c;希望给.NETer进入人工智能领域提供一个指引。.NET Core已经是一个全场景应用的技术栈方案&#xff0c;对于每一个领域都有支持。自从微软在开源发力后&#xff0c;.NET Core的社区能…

fanuc机器人控制柜接线_FANUC涂胶标定参考

FANUC涂胶标定参考1、进入SETUP界面2、选择DISPENCE界面3、选择15 flow rate control,按F2 detail进入4、进入标定界面此画面定义含义如下&#xff1a;(1)为涂胶标定单位,TCPP BEAD WIDTH宽度为基准(2)为 输入理想涂胶宽度,desired flow rate(3)为定义出胶轨迹sample program(一…

硬盘坏道修复白皮书

常识&#xff1a;硬盘坏道分类 - 不同坏道分仔细由于硬盘采用磁介质来存储数据&#xff0c;在经历长时间的使用或者使用不当之后&#xff0c;难免会发生一些问题&#xff0c;也就是我们通常所说的产生“坏道”&#xff0c;当然这种坏道有可能 是软件的错误&#xff0c;也有可能…

Objective-C 学习记录6--dictionary

1.NSDictionary 和NSMutableDictionary NSDictionary dictionaryWithObjectsAndKeys:~,nil 使用键值对创建字典,用nil标志结束 NSDictionary initWithObjectsAndKeys: 使用键值对初始化字典,也用nil来表示结束. dictionary count 计算其字典的长度. dictionary keyEunmerator …

糟糕!复工后,最让人担心的问题又又又来了!

▲ 点击查看你复工多久了&#xff1f;当我们在家宅着的时候&#xff0c;一天到晚都想着什么时候才能出去。然而现在公司一通知复工&#xff0c;其实心里还是有点犯怵。先不说通勤了&#xff0c;上班吃饭就有又成为大家绕不开的问题。现在虽然可以在外面点外卖&#xff0c;但说实…

Myeclipse中Tomcat的两种部署方式

一、在Myeclipse软件中部署 1、 在Myeclipse中&#xff0c;创建好工程后&#xff0c;在Myeclipse菜单栏中选择 Windows -> Preferences -> Myeclipse -> Tomcat5&#xff0c;选择"Enable"&#xff1b;Tomact Home Directory要选择你机器上Tomcat所安装的目录…

为什么 ASP.NET Core WebAPI 继承 ControllerBase 而不是 Controller ?

咨询区 Alex Sansau&#xff1a;我是 ASP.NET Core Web API 的初学者&#xff0c;我在跟着文档创建 Controller 时&#xff0c;VS模板引擎给我生成了如下 Controller 模板代码&#xff0c;我发现有一个奇怪的地方如下&#xff1a;public class TodoController : Controller { }…

配置yml_dctc:生成docker-compose.yml配置的工具

有时候&#xff0c;我们需要想知道docker容器的运行参数、环境变量等配置&#xff0c;以便容器以后被删掉之后&#xff0c;可以重新运行起来。特别是在测试环境&#xff0c;有些容器可能就是一个docker run就运行起来了。或者随便找一个目录丢了一个docker-compose.yml运行起来…

Silverlight 2 应用程序部署到任意HTML页面

Silverlight 2 应用程序部署到任意HTML页面&#xff0c;可以采用ActiveX的方法&#xff0c;在页面中放入object标签&#xff0c;设置相应的属性即可。使用 object 元素&#xff0c;可以用与所有受支持浏览器兼容的方式在 HTML 中嵌入和配置 Silverlight 插件。具体可参看&#…

系统集成相关岗位理解

如果从系统集成生命周期来分的话&#xff0c;系统集成项目其实可以细分为:售前、实施及售后三大块&#xff0c;售前:就是做项目实施方案&#xff0c;为项目配置设备、投标等工作&#xff1b;实施:就是根据项目管理方法把握现场项目的实施工作&#xff1b;售后&#xff1a;而完成…

对于“知识”,我们存在哪些误解?

全世界只有3.14 % 的人关注了爆炸吧知识对于不少用户来说&#xff0c;微信已经成为了获取新资讯的重要途径之一。如何保证自己找到「值得看」的内容&#xff1f;每天更新的文章这么多&#xff0c;哪些才值得你看呢&#xff1f;今天就为大家推荐一些颜值与才华并存的好评公众号。…

常见三维文件格式之STL

STL只能用来表示封闭的面或者体&#xff0c;stl文件有两种:一种是明码格式&#xff0c;另一种是二进制格式。 他的文件格式非常简单明码:solid namefacet normal ni nj nk outer loop vertex v1x v1y v1z vertex v2x v2y v2z vertex v3x v3y v3z endloopendfac…

一个搜索需求搞垮微服务

“编程十几年&#xff0c;我只希望能把技术讲明白而已&#xff0c;当然能帮到各位更是深感荣幸“假如你是一名架构师或者技术领导人&#xff0c;一定要深深的知道&#xff0c;没有完美的技术方案&#xff0c;要不然编程技术早就万佛归一。微服务作为近几年新兴的技术概念&#…

python进阶之学习笔记_干货 | Python进阶系列之学习笔记(四)

目录Python条件判断Python循环语句Python循环控制迭代器与生成器异常一、Python 条件判断如果某些条件满足&#xff0c;才能做某件事情&#xff1b;条件不满足时&#xff0c;则不能做&#xff0c;这就是所谓的判断。不仅生活中有&#xff0c;在软件开发中"判断"功能也…

我的2008

写在前面&#xff1a;虽然2008已经过去了&#xff0c;但是我还是要把我的2008记录下来&#xff0c;之所以要记录下来&#xff0c;是因为我知道生命中的每一年都很珍贵&#xff0c;都要珍惜&#xff0c;记录了2008&#xff0c;我会珍惜2009&#xff0c;然后再记录2009……人生就…

Mybatis批量更新转

Mybatis批量更新 批量操作就不进行赘述了。减少服务器与数据库之间的交互。网上有很多关于批量插入还有批量删除的帖子。但是批量更新却没有详细的解决方案。 实现目标 这里主要讲的是1张table中。根据不同的id值&#xff0c;来update不同的property。 数据表&#xff1a;1张。…

45组超炫数学动图,原来当年我如此牛!

全世界只有3.14 % 的人关注了爆炸吧知识想当年我们在数学的海洋里如饥似渴的遨游&#xff0c;什么公式、字母和图形&#xff0c;接招拆招、扫平了无数数学难题&#xff0c;八面威风&#xff0c;牛的不行不行的&#xff01;&#xff01;&#xff01;下面的45组数学动图&#xff…

这样的书值得你读

本文来自豆瓣网网友评论 1.我正在做一个情报分析系统&#xff0c;是一个决策交易系统的基础。里面的很多东西正是我需要的。我觉得很好 我自己想的话 浪费时间。 2.一位垂直搜索开发人员来信说到&#xff1a;我非常有幸买了你们出的《自己动手写搜索引擎》&#xff0c;谢谢你们…

.NET生态现状:超一半 .NET开发者使用C# 8、.NET Framework使用量减少

文 | 局长出品 | OSC开源社区&#xff08;ID&#xff1a;oschina2013&#xff09;JetBrains 上个月发布了 2021 年开发者生态的调查报告&#xff0c;这份报告详细介绍了开发领域的最新趋势&#xff0c;以及有关工具、技术、编程语言和编程世界的其他信息。本文会重点介绍这份报…

如何得到所有可视化窗口的句柄?

如何得到所有可视化窗口的句柄&#xff1f; Delphi / Windows SDK/APIhttp://www.delphi2007.net/DelphiAPI/html/delphi_20061117103732213.html我想得到已经运行的所有有窗口的应用程序的窗口句柄&#xff0c;不知道有什么好办法&#xff0c;大家帮帮忙。。 用FINDWINDOW。。…