Javascript学习历程之DOM模型

getElementById() (e1)

function myPhone() {
var myItem = document.getElementById("myphone");
alert(myItem.tagName + " " + myItem.childNodes[0].nodeValue);
}

getElementsByTagName("ul") (e1)

function myPhone() {
var myItem = document.getElementsByTagName("ul");
alert(myItem.length+myItem[0].childNodes[0].nodeValue);
}

父节点parentNode (e1)

function myPhone() {
var myItem = document.getElementById("myphone");
alert(myItem.parentNode.tagName);
}

 

子节点childNodes (e1)

function myPhone() {
var myItem = document.getElementById("phone");
var str = "";
if (myItem.hasChildNodes()) {
var oCH = myItem.childNodes;
for (var i = 0; i < oCH.length; i++) {
str += oCH[i].nodeName + "\n";
}
}
alert(str);
}

 

兄弟关系nextSibling ,previousSibling (e1)

function myPhone() {
var myItem = document.getElementById("myphone");
var nextListItem = myItem.nextSibling;
var preListItem = myItem.previousSibling;
alert(nextListItem.tagName+" "+preListItem.tagName);
}

 

访问相邻的兄弟节点 (e1)

function nextSib(node) {
var tempLast = node.parentNode.lastChild;
if (node == tempLast) {
return null;
}
var tempObj = node.nextSibling;
while (tempObj.nodeType != 1 && tempObj.nextSibling != null)
tempObj = tempObj.nextSibling;
return (tempObj.nodeType == 1) ? tempObj : null;
}
function prevSib(node) {
var tempfirst = node.parentNode.firstChild;
if (node == tempfirst) {
return null;
}
var tempObj = node.previousSibling;
while (tempObj.nodeType != 1 && tempObj.previousSibling != null)
tempObj = tempObj.previousSibling;
return (tempObj.nodeType == 1) ? tempObj : null;
}
function myPhone() {
var myItem = document.getElementById("myphone");
var nextListItem = nextSib(myItem);
var preListItem = prevSib(myItem);
alert("后一项:" + ((nextListItem != null) ? nextListItem.firstChild.nodeValue : null) + "前一项:" + ((preListItem != null) ? preListItem.firstChild.nodeValue : null));
}

 

设置节点属性setAttribute("src", "Img/Img2.jpg"),getAttribute("title")获取属性的值

function changeImg() {
var myImg = document.getElementsByTagName("img")[0];
myImg.setAttribute("src", "Img/Img2.jpg");
myImg.setAttribute("title", "夜色");
}

 

创建和添加新节点(e3) createElement(),createTextNode(),appendChild()

function createElem() {
var newp = document.createElement("p");
var newtext = document.createTextNode("DOM创建和添加新节点");
newp.appendChild(newtext);
document.body.appendChild(newp);
}

 

删除节点(e4)removeChild()

function deleteElem() {
var deleteElem = document.getElementsByTagName("p")[0];
deleteElem.parentNode.removeChild(deleteElem);
}

 

替换节点(e5)replaceChild(newElem, oldElem);

function replaceElem() {
var oldElem = document.getElementsByTagName("p")[0];
var newElem = document.createElement("div");
var newText = document.createTextNode("替换后的节点是div");
newElem.appendChild(newText);
oldElem.parentNode.replaceChild(newElem, oldElem);
}

 

特定节点前插入节点(e6)insertBefore(newElem, oldElem)

function insertElem() {
var oldElem = document.getElementsByTagName("p")[0];
var newElem = document.createElement("p");
var newText = document.createTextNode("插入后的节点");
newElem.appendChild(newText);
oldElem.parentNode.insertBefore(newElem, oldElem);
}

 

创建一个文档碎片一次性插入,解决插入文本多时的时间问题(e7)createDocumentFragment()

function insertElems() {
var phone = ["Iphone", "Lumia800", "htc", "iPad2"];
var fragment = document.createDocumentFragment();
for (var i = 0; i < phone.length; i++) {
var newElem = document.createElement("p");
var newText = document.createTextNode(phone[i]);
newElem.appendChild(newText);
fragment.appendChild(newElem);
}
document.body.appendChild(fragment);
}

 

特定节点后插入,创建新函数(e8)insertAfter(newElem, targetElem)

function insertAfter(newElem, targetElem) {
var oParent = targetElem.parentNode;
if (oParent.lastChild == targetElem)
oParent.appendChild(newElem);
else
oParent.insertBefore(newElem, targetElem.nextSibling);
}
function insertElem() {
var oldElem = document.getElementById("Lumia800");
var newElem = document.createElement("div");
var newText = document.createTextNode("iPad2");
newElem.appendChild(newText);
insertAfter(newElem, oldElem);
}

 

innerHTML属性获取多个节点(e9)innerHTML

function DOMinnerHTML() {
var mydiv = document.getElementById("innerHtml");
mydiv.innerHTML = "<img src='Img/Img1.jpg' title='美景' alt=''/>";
}

 

通过改变className属性变化css(e10)

function check() {
var myid = document.getElementById("ul-e10");
var newElem = document.createElement("p");
var newText = document.createTextNode("通过改变className属性变化css");
newElem.appendChild(newText);
myid.parentNode.insertBefore(newElem, myid);
myid.className = "b";
}

 

通过改变className属性叠加css属性(e10)myid.className += "b";

function check() {
var myid = document.getElementById("ul-e10");
var newElem = document.createElement("p");
var newText = document.createTextNode("通过改变className属性变化css");
newElem.appendChild(newText);
myid.parentNode.insertBefore(newElem, myid);
myid.className += "b";
}

 

posted @ 2012-02-26 16:05  Ghost Soar  阅读(145)  评论(0编辑  收藏