好好学一遍JavaScript 笔记(四)

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

本文出自 “胡汉三 ” 博客，请务必保留此出处http://hzw2312.blog.51cto.com/2590340/752038