好好学一遍javaScript 笔记(四)——Attribute、HTML元素、文档碎片、table操作
欢迎技术交流。 QQ:138986722
getAttribute、setAttribute获取跟设置对象的属性:
function documentTest(){ var oHtml = document.documentElement; //取得<html/>元素 var oHead = oHtml.firstChild; //获取<head/> var oBody = oHtml.lastChild; //获取<body/> oBody.setAttribute("id","bodyId"); alert(oBody.getAttribute("id")); }创建HTML元素:
//创建 function createNode(){ var oP = document.createElement("p"); //创建p标签 var sText = document.createTextNode("古道西风"); //创建包含文本"古道西风"的文本节点 oP.appendChild(sText); //添加sText到oP节点的末尾 document.body.appendChild(oP); }移除:
//移除 function deleteNode(){ var oP = document.body.getElementsByTagName("p")[0]; /*document.body.removeChild(oP); */ oP.parentNode.removeChild(oP); }替换:
//替换 function replaceP(){ var oNewOp = document.createElement("p"); var sNewText = document.createTextNode("妖孽"); oNewOp.appendChild(sNewText); var oP = document.body.getElementsByTagName("p")[0]; oP.parentNode.replaceChild(oNewOp,oP); }让新消息出现在旧消息之前:
function insertNode(){ var oP = document.createElement("p"); var sText = document.createTextNode("断肠人"); oP.appendChild(sText); var ooP = document.body.getElementsByTagName("p")[0]; /** * 接收两个参数、即要插入的节点、跟插入在哪一个节点之前 */ document.body.insertBefore(oP,ooP); }createDocumentFragment()文档碎片:在javaScript优化中有提到
/** * 文档碎片 * 一旦把节点添加到document.body(或者它的后代节点)中、页面就会更新并反映出这个变化、 * 对于少量的更新、这是很好的、就像在前面的例子中那样。然而、当要向document添加大量数据时、 * 如果逐个添加这些变动、这个过程可能会十分缓慢。为解决这个问题、可以创建一个文档碎片、 * 把所有的新节点附加其上、然后把文档碎片的内容一次性添加都document中。 * 其中javaScript优化一文中、第六点也有提到 */ function createDocument(){ var array = ["东方不败","独孤求败","独孤败天","令狐冲","任人淫","王语嫣","阿朱","阿紫","阿猫","阿狗","靖哥哥"]; var oF = document.createDocumentFragment(); for(var i=0;i<array.length;i++){ var oP = document.createElement("p"); var sText = document.createTextNode(array[i]); oP.appendChild(sText); oF.appendChild(oP); } document.body.appendChild(oF); }操作table的两种方法
function createTable(){ var oTable = document.createElement("table"); oTable.setAttribute("border","1"); oTable.setAttribute("width","100%"); var oTBody = document.createElement("tbody"); oTable.appendChild(oTBody); //属性操作 oTBody.insertRow(0); oTBody.rows[0].insertCell(0); oTBody.rows[0].cells[0].appendChild(document.createTextNode("胡斐(土匪)")); oTBody.rows[0].insertCell(1); oTBody.rows[0].cells[1].appendChild(document.createTextNode("胜男(剩男)")); oTBody.insertRow(1); oTBody.rows[1].insertCell(0); oTBody.rows[1].cells[0].appendChild(document.createTextNode("无忌")); oTBody.rows[1].insertCell(1); oTBody.rows[1].cells[1].appendChild(document.createTextNode("赵敏")); //直接创建table主体 var oTr = document.createElement("tr"); oTBody.appendChild(oTr); var oTd1 = document.createElement("td"); oTd1.appendChild(document.createTextNode("杨过")); oTr.appendChild(oTd1); var oTd2 = document.createElement("td"); oTd2.appendChild(document.createTextNode("小阿姨")); oTr.appendChild(oTd2); document.body.appendChild(oTable); }