accp8.0转换教材第7章JavaScript操作DOM对象理解与练习
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了accp8.0转换教材第7章JavaScript操作DOM对象理解与练习相关的知识，希望对你有一定的参考价值。
程序调试，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样式
三.练习部分（原文http://www.cnblogs.com/a782126844/需要资源或源码的可私聊可扣扣）
上传不了文件 只能上传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 div=document.getElementById("ins");//这里我给它的div设置了一个id方便拿到
div.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(); //ri
var 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.制作带关闭按钮的广告
| <script src="js/jquery-1.8.3.min.js"></script> | |
| <script type="text/javascript"> | |
| 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); | |
| }); | |
| }); | |
| </script> |
四.总结部分
1.在HTML DOM中查找节点的标准方法是getElement系列方法，也可以使用parentNode，firstChild，nextSibling等...
2.在Core DOM中访问和设置节点属性值的标准方法是getAttribute()和setAttribute()
3.改变样式的两种方法style属性和className属性
欢迎提问，欢迎指错，欢迎讨论学习信息 有需要的私聊 发布评论即可 都能回复的
原文在博客园http://www.cnblogs.com/a782126844/有需要可以联系扣扣：2265682997
以上是关于accp8.0转换教材第7章JavaScript操作DOM对象理解与练习的主要内容，如果未能解决你的问题，请参考以下文章