您好,欢迎来到华佗小知识。
搜索
您的当前位置:首页a8.0转换教材第7章JavaScript操作DOM对象理解与练习

a8.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+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发表时间:"+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=""></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

 

转载于:https://www.cnblogs.com/a782126844/p/7097930.html

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- huatuo0.cn 版权所有 湘ICP备2023017654号-2

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务