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解析显示            }