一.单词部分
①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");//添加livar 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对象实例详解的详细内容。