html--深入理解4种dom对象

这四个对象是从HTML结构中逐层深入的，分别代表了HTML结构中所有的内容；

1、Document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

Document对象集合有forms[],images[],links[],anchors[],all[],applets.

document对象的方法：

write() 方法值得注意，在文档载入和解析的时候，它允许一个脚本向文档中插入动态生成的内容。

2、Element对象

element对象表示的是HTML元素。

element（也可以说这是HTML元素）常用的属性和方法：

1、appendChild() 方法向节点添加最后一个子节点。

<body>

<ul id="myList"><li>Coffee</li><li>Tea</li></ul>

<p id="demo">请点击按钮向列表中添加项目。</p>

<button onclick="myFunction()">亲自试一试</button>

<script>
function myFunction()
{
var node=document.createElement("LI");
var textnode=document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
</script>

<p><b>注释：</b>首先创建 LI 节点，然后创建文本节点，然后把这个文本节点追加到 LI 节点。最后把 LI 节点添加到列表中。</p>

</body>

2、childNodes 属性返回节点的子节点集合，以 NodeList 对象。

<body><p id="demo">请点击按钮来获得 body 元素子节点的相关信息。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var txt="";
var c=document.body.childNodes;
for (i=0; i<c.length; i++)
  {
  txt=txt + c[i].nodeName + "<br>";
  };
var x=document.getElementById("demo");  
x.innerHTML=txt;
}
</script>

<p><b>注释：</b>元素中的空格被视为文本，而文本被视为节点。</p>

</body>

3、className 属性设置或返回元素的 class 属性。

<html>
<body id="myid" class="mystyle">

<script>
var x=document.getElementsByTagName('body')[0];
document.write("Body CSS 类：" + x.className);
document.write("<br>");
document.write("另一个替代方法：");
document.write(document.getElementById('myid').className);
</script>

</body>
</html>

4、getAttribute() 方法返回指定属性名的属性值。

<html>
<body>

请阅读 <a href="/jsref/dom_obj_attributes.asp" target="_blank">Attr 对象</a>，

<p id="demo">请点击按钮来显示上面这个链接的 target 属性值。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var a=document.getElementsByTagName("a")[0];
document.getElementById("demo").innerHTML=a.getAttribute("target");
}
</script>

</body>
</html>

5、innerHTML 属性设置或返回元素的 inner HTML。

<html>
<head>
<script>
function changeLink()
{
document.getElementById('myAnchor').innerHTML="W3School";
document.getElementById('myAnchor').href="http://www.w3school.com.cn";
document.getElementById('myAnchor').target="_blank";
}
</script>
</head>
<body>

<a id="myAnchor" href="http://www.microsoft.com">微软</a>
<input type="button" onclick="changeLink()" value="更改链接">

</body>
</html>

6、element.removeAttribute()从元素中移除指定属性。/element.removeAttributeNode()移除指定的属性节点，并返回被移除的节点。

element.removeChild()从元素中移除子节点。/element.replaceChild()替换元素中的子节点；

<html>
<body>

<ul id="myList" style="color:red"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>

<p id="demo" style="color:red" >点击按钮来删除列表中的首个项目。</p>

<button onclick="myFunction1()">替换节点</button>
<button onclick="myFunction()">删除节点</button>
<button onclick="myFunction2()">移除P的style属性</button>
<script>
function myFunction()
{
var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
}
function myFunction1()
{
//创建新文本节点
var newnode = document.createTextNode('water');
var list=document.getElementById("myList");

list.replaceChild(newnode,list.childNodes[0]);
}

function myFunction2(){
document.getElementsByTagName("P")[0].removeAttribute("style");
//必须指定第几个标签，如[0]表示第一个p标签；
alert("移除成功！");
}
</script>

</body>
</html>

7、textContent 属性设置或返回指定节点的文本内容，以及它的所有后代。

<html>
<body>

<p id="demo">点击按钮来获得 button 元素的文本内容。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var c=document.getElementsByTagName("BUTTON")[0];
var x=document.getElementById("demo");  
x.innerHTML=c.textContent;
}
</script>

<p><b>注释：</b>Internet Explorer 8 以及更早的版本不支持此属性。</p>

</body>
</html>