js操作DOM对象实例详解

零下一度

发布时间：2017-07-02 09:19:26

2806人浏览过

来源于php中文网

原创

程序调试，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等......

论论App

AI文献搜索、学术讨论平台，涵盖了各类学术期刊、学位、会议论文，助力科研。

下载

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="您本次购买的商品信息如下："+"
"+"白岩松：白说："+price0+"
岛上书店:"+price1+"
商品总计："+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="

"+"板块："+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.制作带关闭按钮的广告



	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);
	});

	});