JavaScript语言基础---(十四)DOM模型演示---通过document获取页面节点

1.nodeName: 标签为标签名，属性为属性名， 文本内容为”#text”
2.nodeType: 标签为1，属性为2，文本内容为3
3.nodeValue： 标签为null, 属性为属性值， 文本内容为纯文字

<div id="div1">湖南城市学院</div>

标签对象的3个属性

function demo1(){
                var oDivElement = document.getElementById("div1");
                alert("nodeName:"+oDivElement.nodeName);//DIV
                alert("nodeType:"+oDivElement.nodeType);//1
                alert("nodeValue:"+oDivElement.nodeValue);//null
            }

属性对象(oAttribute)的3个属性

function demo2(){
                var oDivElement = document.getElementById("div1");
                var oAttr = oDivElement.getAttributeNode("id");

                alert("nodeName:"+oAttr.nodeName);//id
                alert("nodeType:"+oAttr.nodeType);//2
                alert("nodeValue:"+oAttr.nodeValue);//div1
            }   

文本内容对象的3个属性

function demo3(){
                var oDivElement = document.getElementById("div1");
                var oInnerContent = oDivElement.childNodes[0];

                alert("nodeName:"+oInnerContent.nodeName);//#text
                alert("nodeType:"+oInnerContent.nodeType);//3
                alert("nodeValue:"+oInnerContent.nodeValue);//湖南城市学院
            }

文本内容中innerText和innerHTML的对比

function demo4(){
                var oDivElement = document.getElementById("div2");

                /*读
                var text = oDivElement.innerText;
                alert(text); //纯文本: 湖南城市学院
                var html = oDivElement.innerHTML;
                alert(html);//整个HTML内容: <font color="red">湖南城市学院</font>
                */

                //写
                oDivElement.innerText="<font size=18>Hello马上下课....</font>";//只是原样(纯文本)输出，不会解析
                alert("暂停一下...");
                oDivElement.innerHTML="<font size=18>Hello马上下课....</font>"; //会当作HTML解析显示
            }