Home >Web Front-end >HTML Tutorial >html深入理解4种dom对象_html/css_WEB-ITnose
html深入理解4种dom对象_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:36:111133browse
这四个对象是从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 标签定义的事件行为：
鼠标 / 键盘属性：