javascript進階程式設計---文本節點，javascript---節點

javascript進階程式設計---文本節點，javascript---節點

1、建立文本節點：

 <script type="text/javascript">        function addNode(){                    var element = document.createElement("div");            element.className = "message";                        var textNode = document.createTextNode("Hello world!");            element.appendChild(textNode);                        document.body.appendChild(element);        }    </script>

1.1 出現的多個文本子節點情況：

    <script type="text/javascript">        function addNode(){                    var element = document.createElement("div");            element.className = "message";                        var textNode = document.createTextNode("Hello world!");            element.appendChild(textNode);            //另外一個節點            var anotherTextNode = document.createTextNode("Yippee!");            element.appendChild(anotherTextNode);            //插入到文檔body中            document.body.appendChild(element);        }    </script>

2、正常化文本節點:normalize()

    <script type="text/javascript">        function addNode(){                    var element = document.createElement("div");            element.className = "message";                        var textNode = document.createTextNode("Hello world!");            element.appendChild(textNode);            //新增的另外一個文本節點            var anotherTextNode = document.createTextNode("Yippee!");            element.appendChild(anotherTextNode);            //添加到文檔的body元素中            document.body.appendChild(element);                        alert(element.childNodes.length);  //2                        element.normalize();//正常化過程            alert(element.childNodes.length);  //1            alert(element.firstChild.nodeValue);  //"Hello World!Yippee!"                    }    </script>

3、分割文本節點：

其效果跟normalize()方法相反：splitText().將一個節點分為兩個，即按照指定的位置分割nodeValue值。

    <script type="text/javascript">        function addNode(){                    var element = document.createElement("div");            element.className = "message";                        var textNode = document.createTextNode("Hello world!");            element.appendChild(textNode);                        document.body.appendChild(element);                       var newNode = element.firstChild.splitText(5);            alert(element.firstChild.nodeValue);  //"Hello"            alert(newNode.nodeValue);             //" world!"            alert(element.childNodes.length);     //2                    }    </script>

分割節點是文本節點提取資料的一種常用DOM解析技術。

javascript 怎擷取節點文本值？

getElementsByTagName("標籤名稱") 代表查詢返回所有該標籤的元素，因此他是個集合
document.getElementsByTagName("標籤") 即查詢文檔中所有的該標籤元素
alert(document.getElementsByTagName("div").length) 返回查詢結果的數量，這裡結果為 1
你想要該元素的文本應該這麼寫 document.getElementsByTagName("div")[0].innerHTML
取第一個div的html文本

============================
其他樣本
<html>
<head><title>test</title></head>
<script type="text/javascript">
//搜尋文檔下第一個div下的span子節點
window.onload = function () {//文檔載入完畢事件
var div1 = document.getElementsByTagName("div")[0];//文檔第一個DIV
var spans = div1.getElementsByTagName("span");//該DIV下的所有SPAN標籤元素
for (var i = 0; i < spans.length; i++) {//迴圈彈出每個SPAN標籤的文本
alert(spans[i].innerHTML);
}
}
</script>
<body>
<div><span>文本1</span><span>第二個文本</span><span>文本三</span></div>
</body>
</html>
 
javascript 怎更改一個文本節點？？

document.getElementById("mi").innerText = “”;
document.all.mi.innerText = “”;
這兩個都可以，或者用innerHTML