JavaScript - DOM

<div id="boxA" class="boxA" style="margin: 20px auto;">
    <h1 id="title">Lorem ipsum.</h1>
    <p class="content">Lorem ipsum dolor ...commodo consequat.</p>
    <div id="author">Lorem ipsum.</div>
    <div id="website">Lorem ipsum dolor.</div>
</div>

<div id="abc"> DIV class=abc</div>
<div id="bef"> DIV class=abc</div>

window.onload = function(){
    var title = document.getElementById("title");
    console.log(title);

    var author = document.getElementById("author");
    console.log(author);

    var website = document.getElementById("website");
    console.log(website);
}

    var elemts = document.getElementsByTagName("div");
	console.log(elemts);

    var elemts = document.getElementsByTagName("div");
    console.log(elemts);

    if(elemts.length > 0) {
        console.log(elemts.length);

        for(var i=0; i<elemts.length; i++) {
            elemts.item(i).style.color = "red";
          }
    }

    <div id="boxA" class="boxA" style="margin: 20px auto;" title="Lorem ipsum dolor.">
    Lorem ipsum dolor.
    </div>

    window.onload = function(){
		var boxA = document.getElementById("boxA");

		var nodeAttr = boxA.attributes;
        console.log(nodeAttr);
		console.log(nodeAttr.getNamedItem("class"));
		console.log(nodeAttr.getNamedItem("class").value);
		console.log(nodeAttr.getNamedItem("class").name);
        console.log(nodeAttr.getNamedItem("class").textContent);
	}

window.onload = function(){
    var boxA = document.getElementById("boxA");
    console.log(boxA);

    var nodeAttr = boxA.attributes;
    var currentAttr = nodeAttr.getNamedItem("style").value;
    nodeAttr.getNamedItem("style").value = "border: solid 3px red;"
	}

<div id="boxA" class="boxA" >
    <h1> H1 tag</h1>
    <p> P tag</p>
    <div> DIV tag</div>
</div>

window.onload = function(){
		var boxA = document.getElementById("boxA");
		var nodes = boxA.childNodes;
		console.log(nodes);
		for(var i = 0; i<nodes.length; i++){
			if(nodes.item(i).nodeName !="#text"){
				nodes.item(i).style.color = "blue";
				console.log(nodes.item(i) + " - " + nodes.item(i).nodeName );
			}
		}
	}

thì chúng ta còn có các nodes text nữa.

Nên để chính xác nhất thì chúng ta sẽ kiểm tra xem nodes con đó có phải là nodes text hay không, sau đó sẽ tiến hành đổi màu chữ. Như trên ảnh thì tôi đã in ra được các nodes con của boxA.

Trong một trường hợp nào đó, bạn chỉ muốn lấy nodes con đầu tiên hoặc cuối cùng, hãy sử dụng firstChild hoặc lastChid.

var firstNode = boxA.firstChild;
    if(firstNode.nodeName == "#text"){
        console.log("boxA.firstChild: " + firstNode.nextSibling.nodeName);
    }else{
    console.log("boxA.firstChild: " + firstNode.nodeName);
    }

        var lastNode = boxA.lastChild;
        if(lastNode.nodeName == "#text"){
            console.log("lastNode: " + lastNode.previousSibling.nodeName);
        }else{
            console.log("lastNode: " + lastNode.nodeName);
        }

Và kết quả, ta thấy nodes đầu là <h1> và cuối là <div>>, hoàn toàn giống với đoạn HTML đã sử dụng.

Từ nodes cha, ta có thể tìm đến nodes con. Vậy từ nodes con có thể truy cập đến nodes cha không ? Có, chúng ta sẽ sử dụng thuộc tính parentNode.

Đầu tiên chỉnh html cái đã.

<div id="boxA" class="boxA" >
    <h1> H1 tag</h1>
    <p> P tag</p>
    <div> DIV tag</div>
    <div id="child">Child Node</div>
</div>

Còn đây là code lấy nodes cha

    var childNodes = document.getElementById("child");
    console.log(childNodes);

    var childNodes_parent = childNodes.parentNode;
    console.log(childNodes_parent);
    console.log(childNodes_parent.attributes.id);

Như kết quả, chúng ta đã lấy ra được nodes cha và tên class cha.

Nodes method DOM có một số phương thức khá hữu dụng cho chúng ta sử dụng.

Để kiểm tra xem một nodes có nodes con hay không, ta có thể dùng phương thức hasChildNodes().

    <input id="copy" type="button" onclick="checkChilds();" value="Kiem tra node con"/>
    <div id="boxA" class="boxA"></div>
	<div id="boxB" class="boxA">Box B</div>
    <div id="boxC" class="boxA">
    	<p>P tag</p>
    </div>

function checkChilds()
{
    var boxA = document.getElementById("boxA");
    console.log(boxA.hasChildNodes());

    var boxB = document.getElementById("boxB");
    console.log(boxB.hasChildNodes());

    var boxC = document.getElementById("boxC");
    console.log(boxC.hasChildNodes());
}

Kết quả của phương thức này sẽ là giá trị kiểu boolean, true với những nodes có nodes con.

Nếu muốn thêm một nodes, ta sẽ dùng appendChild().

    <input id="copy" type="button" onclick="addNewNode();" value="Kiem tra node con"/>
    <div id="boxA" class="boxA">
    	<div>Home</div>
        <div>About</div>
        <div>Product</div>
    </div>

	<div id="boxB" class="boxA"></div>

function addNewNode()
{
    var boxA = document.getElementById("boxA");
    var firstNode = boxA.firstChild;

    if(firstNode.nodeName == "#text"){
        firstNode = firstNode.nextSibling;
    }

    console.log(firstNode);
    var boxB = document.getElementById("boxB");
    firstNode.style.backgroundColor = "blue"
    boxB.appendChild(firstNode);
}

Ở trên chúng ta lấy ra nodes con đầu tiên của boxA, sau đó gán vào boxB. Nhưng có vấn đề đó là nodes ở boxA sẽ bị mất, chúng ta có thể dùng cloneNode để copy nodes của boxA và đưa sang boxB. Như vậy boxA vẫn được giữ nguyên.

function addNewNode()
{
    var boxA = document.getElementById("boxA");
    var firstNode = boxA.firstChild;
    if(firstNode.nodeName == "#text"){
        firstNode = firstNode.nextSibling;
    }

    console.log(firstNode);

    var nodeCopy = firstNode.cloneNode(true);
    console.log(nodeCopy);

    var boxB = document.getElementById("boxB");
    boxB.appendChild(nodeCopy);
}

Khi muốn xóa một node, chúng ta có thể dùng removeChild().

function removeNode()
{
    var boxA = document.getElementById("boxA");
    var firstNode = boxA.firstChild;
    if(firstNode.nodeName == "#text"){
        firstNode = firstNode.nextSibling;
    }
    boxA.removeChild(firstNode);
}

Hoặc replaceChild() để thay thế một nodes nào đó

function reNode()
{
    var boxA = document.getElementById("boxA");
    var firstNode = boxA.firstChild;
    if(firstNode.nodeName == "#text"){
        firstNode = firstNode.nextSibling;
    }
    console.log(firstNode);

    var boxB = document.getElementById("boxB");
    var firstNodeB = boxB.firstChild;
    if(firstNodeB.nodeName == "#text"){
        firstNodeB = firstNodeB.nextSibling;
    }
    console.log(firstNodeB);
    boxB.replaceChild(firstNode,firstNodeB);
    }

Cuối cùng, để thêm một nodes trước nodes nào đó, ta dùng phương thức insertBefore().

function reNode()
{
    var boxB = document.getElementById("boxB");
    var firstNodeB = boxB.firstChild;
    if(firstNodeB.nodeName == "#text"){
        firstNodeB = firstNodeB.nextSibling;
    }
    console.log(firstNodeB);

    var boxA = document.getElementById("boxA");
    var firstNode = boxA.firstChild;
    if(firstNode.nodeName == "#text"){
        firstNode = firstNode.nextSibling;
    }
    console.log(firstNode);

    boxB.insertBefore(firstNode,firstNodeB);
}

Kết

Có thể đọc về nodes sẽ hơi khó hiểu, nhưng nếu chúng ta chú ý, việc tìm hiểu về jQuery sẽ đơn giản hơn. Chúng ta sẽ tiết kiệm được thời gian cho những câu hỏi kiểu như tại sao nó lại thế ^^.