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; //对于已经加入的图片，删除其事件处理，以免重复加入一幅图片

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

head rush ajax chapter4 DOM相关推荐

head rush ajax chapter1 Ajax
Head Rush Ajax 本书特点也是好书的特点: 1.多用图表 2.以对话的形式描述 3.用不同的方式重复 4.做活动,做事情时的学习效果比读东西的效果更佳,把习题变成挑战 5.用故事而不是书 ...
ajax与DOM的使用,AJAX和DOM的运行经验
AJAX和DOM的运行经验更新时间:2007年03月07日 00:00:00 作者: 被AJAX中DOM的操作郁闷了好几天,今天总算搞明白了,自学就是苦啊,苦的一把鼻涕一把泪的, 把教训些出来, ...
用ajax+js+dom+php+mysql,方百度goole的分页~~~~~~~~哦！
思路: 分页的实现逻辑 1.在mysql中如何查询区间数据 limit 起始行,要查询的行数 2.什么是分页当我们的数据量比较大时候,一页显示不了就分页显示,可以增加用户的体验 3.实现分页 ...
ajax更改dom,javascript – 用Ajax响应替换DOM节点
我有一个ajax响应,看起来像这样: some other text 我想用resp替换下面的element1: 所以在替换后我会得到: some other text 我尝试了replaceChil ...
Ajax(3)--DOM操作HTML 你忘记了吗?
对应的HTML页面程序的代码如下所示.在该程序中除了与Ajax相关的程序基本框架之外,读者需要特别关注一下使用DOM操作HTML文档中对应元素的方法. 源程序名称:main.htm <html& ...
ajax中dom,在（jQuery）ajax请求中获取当前脚本DOM对象
涉及两个步骤简单的解决方案: 1)找出哪些元素脚本标签是 2)发现,元素的代码中的前一个兄弟: var scripts = document.getElementsByTagName("s ...
ASP.NET AJAX学习记要(2)-下手之DOM
要学习DOM,那什么是DOM?为什么要学习DOM?DOM是文档对象模型.借用网站w3pop.com上的一段话:["W3C文档对象模型(DOM)是一个能够让程序和脚本动态访问和更新文档内容.结 ...
（九）JS-WEB-API（DOM、BOM、事件、Ajax、存储）【每个工程师必须熟练掌握的技能】
JS-WEB-API 提问 DOM BOM 事件 Ajax 存储从JS基础知识到JS-WEB-API JS基础知识 JS-WEB-API DOM(Document Object Model) DOM ...
JavaScript/Ajax/JQuery知识点(BOM/DOM/ScriptEngine/JS引擎)，JSCore
捋顺JavaScript底层知识,重点讲解如原型.作用域.执行上下文.变量对象.this.闭包.按值传递.call.apply.bind.new.继承等难点概念?? JS中的继承?JS的原型模式, ...

head rush ajax chapter4 DOM

head rush ajax chapter4 DOM相关推荐

最新文章

热门文章