Rumah >hujung hadapan web >html tutorial >html深入理解4种dom对象_html/css_WEB-ITnose

html深入理解4种dom对象_html/css_WEB-ITnose

WBOY
WBOYasal
2016-06-24 11:36:111133semak imbas

这四个对象是从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 标签定义的事件行为:

鼠标 / 键盘属性:

 

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn