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>

3、Attribute对象

在 HTML DOM 中，Attr 对象表示 HTML 属性。attribute属性是属于element对象（即HTML元素的属性）。

4、Event对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

HTML 标签定义的事件行为：

鼠标 / 键盘属性：