第2章 JavaScript DOM编程.pptVIP

2.4 动态添加和删除节点 document文档对象可以创建、添加、删除DOM支持的任何类型的节点 动态添加和删除节点 使用document.createElement创建节点 document.createElement的功能是创建一个指定标签名的元素节点，标签名可以是任何名字，包括自定义的标签 script language=javascript var node=document.createElement(div); node.innerHTML=这是一个新创建的节点; /script 创建一个div标签对象 动态添加和删除节点 使用appendChild(node)将节点追加到所有子节点的末尾 function insertNode (strText) { var node = document.createElement(DIV); node.innerHTML = strText; document.body.appendChild(node); } 使用insertBefore(newNode,node)将节点newNode插入到节点node之前 function insertNode (strText) { var node = document.createElement(DIV); var myNode = document.getElementById(textNode); node.innerHTML = strText; myNode.insertBefore(node); } 动态添加和删除节点 使用removeChild删除节点 function removeCreateNode() { var node = document.getElementById(textNode); node.parentNode.removeChild(node); } parentNo是node的父节点 动态添加和删除节点 案例分析－帽子戏法 动态添加和删除节点 案例分析－帽子戏法 p align=center img src=topHat.gif id=topHat / br /br / input id=hocusPocus type=button value=Hocus Pocus! onClick=showRabbit(); / /p script language=JavaScript function showRabbit() { var hatImage = document.getElementById(topHat); var newImage = document.createElement(img); newImage.setAttribute(src, rabbit-hat.gif); var imgParent = hatImage.parentNode; imgParent.insertBefore(newImage, hatImage); imgParent.removeChild(hatImage); } /script 示例演示 2.5 innerHTML属性 innerHTML是DOM节点的一个属性，它表示节点的开始标签与结标签之间的内容 div img src=“images/hat.jpg”/ /div innerHTML innerHTML属性 div id=imgContainer img src=images/topHat.gif/ /div input type=button value=创建图片节点 onclick=createImg()/ function createImg() { var container=document.getElementById(imgContainer); container.innerHTML=img src=images/rabbit-hat.gif/; } /script 示例演示 总结-1 浏览器对象模型就是用于描述对象与对象之间层次关系的模型，该对象模型提供了独立于内容之外的、可以与浏览器窗口进行互动的对象结构 Window对象是浏览器对象模型的顶层对象，其他对象都是该对象的子对象 location对象用来管理当前打开窗口的URL信息，相当于浏览器的地址栏 history对象用来管理当前窗口最近访问过的URL，常用的方法有forward、ba