使用JavaScriptjQuery实现页面特效第三章-理论.pptVIP

3.2 文档对象模型 thinput type=checkbox id=allCb onclick=check() / 全选/th tdinput type=checkbox name=item//td tdinput type=checkbox name=item //td ...... function check(){ var cb1=document.getElementById(allCb); var chs=document.getElementsByName(item); for(var i=0;ichs.length;i++){ chs[i].checked=cb1.checked; } } document.getElementsByTagName(tagname)：通过标签名访问页面元素。参数tagname为必选项，为字符串类型。返回值是指定标签名的对象的集合，如果无符合条件的对象，则返回空数组。 要求当鼠标移动到菜单上时，修改菜单的背景图像；当鼠标移开时，菜单恢复原来的样式。 3.2 文档对象模型 3.2 文档对象模型 ul id=nav lia href=#首页/a/li lia href=#产品列表/a/li lia href=#新闻/a/li /ul ....... script type=text/javascript var navUl = document.getElementById(nav); var lis=navUl.getElementsByTagName(li); for(var i=0;ilis.length;i++){ lis[i].onmouseover=function (){ this.style.backgroundImage=url(images/bg2.gif); } lis[i].onmouseout=function (){ this.style.backgroundImage=url(images/bg1.gif); } } 使用document.getElementsByTagName(“li”)获取id=nav的无序列表ul中所有的li标签，最后遍历每个li标签，使用“事件名=function (){…}”的方式设置鼠标移进移出的效果 节点信息 如果编程时希望访问某个元素的父元素，但又不知道父元素的ID、name和tag，可以根据层次关系来查找节点，在DOM中，每个节点都具有访问各节点的属性。 3.2 文档对象模型 属性名 描述 parentNode 当前节点的父节点引用 childNodes 当前节点的所有子节点 firstChild 当前节点的第一个子节点 lastChild 当前节点的最后一个子节点 previousSibling 当前节点前一个兄弟节点 nextSibling 当前节点后一个兄弟节点 利用parentNode属性获取父节点，利用childNodes属性获取所有子节点，再设置它们的样式。 3.2 文档对象模型 function getChildren() { var div1 = document.getElementById(test); var ps = div1.childNodes; for (var i = 0; i ps.length; i++) { if (ps[i].nodeType == 1) { //如果子节点是元素节点 ps[i].style.color = blue; } } } function getParent() { var div1 = document.getElementById(test); var parent = div1.parentNode; parent.style.backgroundColor = pink; } body div id=test p第一个段落/p p第二个段落/p /div input type=button value=子节点 onclick=getChildren() / input type=button value=父节点 onclick=getParent() / /body 动态添加和删除节点 使用document对象可以创建、添加和删除DOM树的节点，因此可以使用document对象制作动态添加、删除页