程序调试,chrome开发人员工具,DOM操作,节点和节点间的关系,节点信息,操作节点,获取元素
一.单词部分
①alert警告②prompt提示③parentNode父节点④childNode子节点⑤firstChild第一个子节点
⑥lastChild最后一个子节点⑦nextSibling下一个同级⑧previousSibling上一个同级
⑨createElement创建节点元素 appendChild附加节点 insertBefore在。。之前添加
cloneNode复制 节点 removeNode 删除节点 replaceNode替换节点
二.预习部分
1.常见的JavaScript程序调试
Chrome调试工具和alert()方法
2.简述DOM的分类和节点间关系
DOM-CORE(核心),HTML-DOM 和CSS-DOM
有子父关系同级关系
3.简述如何按层次关系访问节点
通过节点的属性:
parentNode,childNode,firstChild等......
4.简述style属性和className在改变样式有什么区别
style通过应用样式的文档元素访问style对象,classname属性可设置或返回元素的class样式
三.练习部分(原文需要资源或源码的可私聊可扣扣)
上传不了文件 只能上传js代码了
1.访问当当购物车页面节点
//点击结算的时候给下面添加详情 //结算function accounts(){var titleH1=document.createElement("p");var price0=document.getElementById("price0").innerHTML;var price1=document.getElementById("price1").innerHTML;var sum=document.getElementById("totalPrice").innerHTML; titleH1="您本次购买的商品信息如下:"+"<br>"+"白岩松:白说:"+price0+"<br>岛上书店:"+price1+"<br>商品总计:"+sum;var zon=titleH1;var p=document.getElementById("ins");//这里我给它的p设置了一个id方便拿到p.innerHTML=zon;}total(); 2.操作当当网删除节点 //js文件 function del(){var flag=confirm("您确定要删除商品吗?");if(flag==true){var parent=document.getElementById("cartList"); var one=document.getElementById("price0").parentNode;one.parentNode.removeChild(one);total();alert("删除成功!");}}
3.制作课工场论坛发帖
//页面就不发了 发js实现原理 // JavaScript Document //发帖显示function sub(){var po=document.getElementById("post");po.style.display="block"; }//帖子提交function subTi(){var num=Math.floor(Math.random()*4+1); //输出1~4之间的随机整数var po=document.getElementById("post");po.style.display="none";var img=document.createElement("img");var titleH1=document.createElement("h1");var titMu=document.createElement("span");var qy=document.getElementById("qq");var title=document.getElementById("title").value;var mu=document.getElementById("muk").value;var now = new Date(); var year = now.getFullYear(); //年 var month = now.getMonth() + 1; //月 var day = now.getDate(); //rivar time=year+"-"+month+"-"+day;titleH1.innerHTML=title;titMu.innerHTML="<br><br>"+"板块:"+mu+" 发表时间:"+time;if(num==1){img.setAttribute("src","images/tou01.jpg");}else if(num==2){img.setAttribute("src","images/tou02.jpg");}else if(num==3){img.setAttribute("src","images/tou03.jpg");}else if(num==4){img.setAttribute("src","images/tou04.jpg");}var aa=document.getElementById("ull");//添加li var li = document.createElement("li"); //设置 li 属性 li.setAttribute("id", "newli");li.appendChild(img); li.appendChild(titleH1); li.appendChild(titMu); aa.appendChild(li);//li.insertBefore(qy,li);}
4.制作带关闭按钮的广告
bf72dbaa32d2bb45ca3e6b511796dfeb2cacc6d41bbb37262a98f745aa00fbf0 | |
223099138ae13f1f83dd7e1a6ac88faf | |
function adv_close(){ | |
var fl=document.getElementById("float"); | |
var fl1=document.getElementById("close"); | |
fl.style.display="none"; | |
fl1.style.display="none"; | |
}; | |
//js太麻烦。。。。。。。 | |
//还是jq简单 | |
$(function($){ | |
//随滚动条滚动 | |
$(window).scroll(function(){ | |
var st = $(this).scrollTop()+50; | |
$("#float").css("top",st); | |
$("#close").css("top",st); | |
}); | |
}); | |
2cacc6d41bbb37262a98f745aa00fbf0 |
四.总结部分
1.在HTML DOM中查找节点的标准方法是getElement系列方法,也可以使用parentNode,firstChild,nextSibling等...
2.在Core DOM中访问和设置节点属性值的标准方法是getAttribute()和setAttribute()
3.改变样式的两种方法style属性和className属性
以上是js操作DOM对象实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!