首页 > 代码库 > JavaScriptDom操作与高级应用（八）
JavaScriptDom操作与高级应用（八）
一：Dom操作基础与高级应用
Node接口也定义了一些所有节点类型都包含的属性和方法.
二：创建和操作节点
1)创建新节点
createDocumentFragment()
创建文档碎片节点
createElement(tagname)
创建标签名tagname的元素
createTextNode(text)
创建包含文本text的文本节点
appendChild()
添加子元素
实例：
<html> <head> <title>createElementd() Example</title> <SCRIPT LANGUAGE="JavaScript"> <!-- function CreateP() { var Op = document.createElement("p"); var oText = document.createTextNode("Hellow World"); Op.appendChild(oText); document.body.appendChild(Op); }function removeElement() {var oP = document.body.getElementsByTagName("p")[0];//document.body.removeChild(oP);oP.parentNode.removeChild(oP);}function ReplaceElement() { var oNewP = document.createElement("p"); var oText = document.createTextNode("aaaaaaaaaaaaaaaa"); oNewP.appendChild(oText); var oOldP= document.body.getElementsByTagName("p")[0]; oOldP.parentNode.replaceChild(oNewP,oOldP);}function insertElement() {var oNewP = document.createElement("p");var oText = document.createTextNode("aaaaaaaaaaaaaaaa");oNewP.appendChild(oText);var oOldP= document.body.getElementsByTagName("p")[0];document.body.insertBefore(oNewP,oOldP);} //--> </SCRIPT> </head> <body> <p> Hellow</p> <p> how are you?</p> <p> ok</p> <input type="button" value="http://www.mamicode.com/createElement" onclick="CreateP()"/> <input type="button" value="http://www.mamicode.com/removeElement" onclick="removeElement()"/> <input type="button" value="http://www.mamicode.com/ReplaceElement" onclick="ReplaceElement()"/> <input type="button" value="http://www.mamicode.com/insertElement" onclick="insertElement()"/> </body></html>鼠标放上和离开的样式：
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""></HEAD><BODY><input type="button" value="http://www.mamicode.com/click Me" style="background-color:white;color:black"
onmouseover="this.style.backgroundColor=‘black‘;this.style.color=‘white‘;"
onm ouseout="this.style.backgroundColor=‘white‘;this.style.color=‘black‘"/></BODY></HTML>
鼠标放上去的提示：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><meta charset="utf-8" /><SCRIPT LANGUAGE="JavaScript"><!-- function showTip(oEvent) { //alert(document.documentElement.scrollTop); var oDiv = document.getElementById("divTip1"); oDiv.style.visibility ="visible"; oDiv.style.left = document.documentElement.scrollLeft+ oEvent.clientX+5; oDiv.style.top = document.documentElement.scrollTop+oEvent.clientY+5; } function hiddenTip(oEvent) { var oDiv = document.getElementById("divTip1"); oDiv.style.visibility = "hidden"; }//--></SCRIPT></HEAD><BODY> <a href="javascript:void(0)" onm ouseover="showTip(event)" onm ouseout = "hiddenTip(event)">click me</a><div id="divTip1" style="background-color:Yellow;position:absolute;visibility:hidden;padding:5px;"> <span>这是提示<br /> 提示</span></div></BODY></HTML>
JavaScriptDom操作与高级应用（八）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。