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