diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/document_object_model | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/web/api/document_object_model')
9 files changed, 1637 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/document_object_model/events/index.html b/files/zh-cn/web/api/document_object_model/events/index.html new file mode 100644 index 0000000000..b2dc638d82 --- /dev/null +++ b/files/zh-cn/web/api/document_object_model/events/index.html @@ -0,0 +1,80 @@ +--- +title: 事件及DOM +slug: Web/API/Document_Object_Model/Events +tags: + - DOM + - events +translation_of: Web/API/Document_Object_Model/Events +--- +<p>{{DefaultAPISidebar("DOM")}}</p> + +<h2 id="Introduction" name="Introduction">简介</h2> + +<p>这一章节介绍了DOM事件模型（DOM Event Model）。主要描述了<a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">事件（Event）</a>接口本身以及DOM节点中的事件注册接口、<a href="/en-US/docs/Web/API/EventTarget.addEventListener">事件监听接口</a>，以及几个展示了多种事件接口之间相互关联的较长示例。</p> + +<p>这里有一张非常不错的图表清晰地解释了在<a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM3级事件草案（DOM Level 3 Events draft）</a>中通过DOM处理事件流的三个阶段。</p> + +<p>也可以通过示例章节的 <a href="/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">示例5：事件传递</a> 获取更多事件如何在DOM中流转的相关细节。</p> + +<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">注册事件监听器</h2> + +<p>这里有3种方法来为一个DOM元素注册事件回调。</p> + +<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener">{{domxref("EventTarget.addEventListener")}}</h3> + +<pre class="brush: js">// 假设 myButton 是一个按钮 +myButton.addEventListener('click', greet, false); +function greet(event) { + // 打印并查看event对象 + // 打印arguments，以防忽略了其他参数 + console.log('greet: ' + arguments); + alert('Hello world'); +} +</pre> + +<p>你应该在现代Web技术的页面中使用这个方法。</p> + +<p>备注：IE 6-8 不支持这一方法，但提供了类似的API即 {{domxref("EventTarget.attachEvent")}} 用以替代。考虑到跨浏览器兼容性问题请使用有效的JS代码库。</p> + +<p>更多细节可在 {{domxref("EventTarget.addEventListener")}} 参考页面中找到.</p> + +<h3 id="HTML_attribute" name="HTML_attribute"><a href="/zh-CN/docs/Web/Guide/HTML/Event_attributes">HTML 属性</a></h3> + +<pre class="brush: html"><button onclick="alert('Hello world!')"> +</pre> + +<p>属性中的JS代码触发时通过event参数将Event类型对象传递过去的。<a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">其返回值以特殊的方式来处理，已经在HTML规范中被描述</a>。</p> + +<p>应该尽量避免这种书写方式，这将使HTML变大并减少可读性。考虑到内容/结构及行为不能很好的分开，这将造成bug很难被找到。</p> + +<h3 id="DOM_element_properties" name="DOM_element_properties">DOM 元素属性</h3> + +<pre class="brush: js">// 假设 myButton 是一个按钮 +myButton.onclick = function(event){alert('Hello world');}; +</pre> + +<p>带有event参数的函数可以这样被定义。<a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">其返回值以特殊的方式来处理，已经在HTML规范中被描述。</a></p> + +<p>这种方式的问题是每个事件及每个元素只能被设置一个回调。</p> + +<h2 id="访问事件接口">访问事件接口</h2> + +<p>事件回调可以被绑定到包括DOM元素、文档、{{domxref("window")}} 等多种对象上。当一个事件被触发时，一个event对象将被创建并顺序的传递给事件监听者们。</p> + +<p> {{domxref("Event")}} 接口可以在回调函数内被访问到，通过被传递进来做为第一个参数的事件对象。以下这个简单例子展示了如何将事件对象传递给事件回调函数，同时可以在这个函数中使用。</p> + +<pre class="brush: js">function foo(evt) { + // evt参数自动分配事件对象 + alert(evt); +} +table_el.onclick = foo; +</pre> + +<h2 id="下级页面导航">下级页面导航</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/API/Document_Object_Model">DOM相关参考</a></li> + <li><a href="/zh-CN/docs/Web/API/Document_Object_Model/Introduction">DOM介绍</a></li> + <li><a href="/zh-CN/docs/Web/API/Document_Object_Model/Events">事件及DOM</a></li> + <li><a href="/zh-CN/docs/Web/API/Document_Object_Model/Examples">样例</a></li> +</ul> diff --git a/files/zh-cn/web/api/document_object_model/examples/index.html b/files/zh-cn/web/api/document_object_model/examples/index.html new file mode 100644 index 0000000000..0b3e4b75e8 --- /dev/null +++ b/files/zh-cn/web/api/document_object_model/examples/index.html @@ -0,0 +1,375 @@ +--- +title: Examples +slug: Web/API/Document_Object_Model/Examples +tags: + - DOM + - DOM参考 +translation_of: Web/API/Document_Object_Model/Examples +--- +<p>本章介绍提供了一些长例子来介绍如何使用 DOM 进行 Web 以及 XML 开发。在可能的情况下，例子只使用普通API ，技巧以及JavaScript模式来操作文档对象。</p> + +<h2 id="Example_1:_height_and_width" name="Example_1:_height_and_width">示例 1: 高度和宽度</h2> + +<p>下面的例子展示了在不同尺寸的图片时使用其 height 和 width 属性的情况：</p> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>width/height example</title> +<script type="text/javascript"> +function init() +{ + var arrImages = new Array(3); + + arrImages[0] = document.getElementById("image1"); + arrImages[1] = document.getElementById("image2"); + arrImages[2] = document.getElementById("image3"); + + var objOutput = document.getElementById("output"); + var strHtml = "<ul>"; + + for (var i = 0; i < arrImages.length; i++) { + strHtml += "<li>image" + (i+1) + + ": height=" + arrImages[i].height + + ", width=" + arrImages[i].width + + ", style.height=" + arrImages[i].style.height + + ", style.width=" + arrImages[i].style.width + + "<\/li>"; + } + + strHtml += "<\/ul>"; + + objOutput.innerHTML = strHtml; +} +</script> +</head> +<body onload="init();"> + +<p>Image 1: no height, width, or style + <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"> +</p> + +<p>Image 2: height="50", width="500", but no style + <img id="image2" src="http://www.mozilla.org/images/mozilla-banner.gif" + height="50" width="500"> +</p> + +<p>Image 3: no height, width, but style="height: 50px; width: 500px;" + <img id="image3" src="http://www.mozilla.org/images/mozilla-banner.gif" + style="height: 50px; width: 500px;"> +</p> + +<div id="output"> </div> +</body> +</html> +</pre> + +<h2 id="Example_2:_Image_Attributes" name="Example_2:_Image_Attributes">示例 2: 图片属性</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Modifying an image border</title> + +<script type="text/javascript"> +function setBorderWidth(width) { + document.getElementById("img1").style.borderWidth = width + "px"; +} +</script> +</head> + +<body> +<p> + <img id="img1" + src="image1.gif" + style="border: 5px solid green;" + width="100" height="100" alt="border test"> +</p> + +<form name="FormName"> + <input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" /> + <input type="button" value="Make border 5px-wide" onclick="setBorderWidth(5);" /> +</form> + +</body> +</html> +</pre> + +<h2 id="Example_3:_Manipulating_Styles" name="Example_3:_Manipulating_Styles">示例 3: 操作样式</h2> + +<p>在下面这个简单的例子中，使用的element(DOM元素)的style对象即对象的 CSS 样式属性来获取一个HTML段落元素的一些基本样式属性，DOM 可以检索和设置CSS 样式。在本例中，你可以直接控制单个样式属性。在下一个的例子里（见例4），你可以使用stylesheets对象(样式表)及其cssRules对象改变整个文档的样式。</p> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Changing color and font-size example</title> + +<script type="text/javascript"> +function changeText() { + var p = document.getElementById("pid"); + + p.style.color = "blue" + p.style.fontSize = "18pt" +} +</script> +</head> +<body> + +<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> + +<form> + <p><input value="rec" type="button" onclick="changeText();"></p> +</form> + +</body> +</html> +</pre> + +<h2 id="Example_4:_Using_Stylesheets" name="Example_4:_Using_Stylesheets">示例 4: 使用样式表</h2> + +<p>styleSheets是document对象的一个属性，返回的是载入文档的样式列表。你可以通过styleSheets、style和CSSRule对象来获取样式表和每条样式规则，下面的例子把所有的样式规则中的选择器文本（字符串）打印到控制台中。</p> + +<pre>ss = document.styleSheets; + +for(i=0; i<ss.length; i++) { + for(j=0; j<ss[i].cssRules.length; j++) { + dump( ss[i].cssRules[j].selectorText + "\n" ); + } +} +</pre> + +<p>下面的是一个只定义了三条样式规则的单个样式表的文档：</p> + +<pre class="eval">BODY { background-color: darkblue; } +P { font-face: Arial; font-size: 10pt; margin-left: .125in; } +#lumpy { display: none; } +</pre> + +<p>该脚本的输出是这样的：</p> + +<pre class="eval">BODY +P +#LUMPY +</pre> + +<h2 id="Example_5:_Event_Propagation" name="Example_5:_Event_Propagation">示例 5: 冒泡事件</h2> + +<p>本例以一种简单的方法阐述了事件是如何触发以及在 DOM 中是如何处理的。当这个 HTML 文档 BODY 载入的时候，在 TABLE 的首行注册了一个事件监听器。事件监听器通过执行函数 stopEvent 处理事件，从而改变在该表的底部单元的值。</p> + +<p>然而，stopEvent 同时也会调用一个事件对象的方法，<a href="/zh-cn/DOM/event.stopPropagation" title="zh-cn/DOM/event.stopPropagation">event.stopPropagation</a>，其阻止了当前事件在 DOM 的进一步冒泡行为。请注意，表本身有一个 {{domxref("element.onclick","onclick")}} 事件处理程序，当表被点击时其会显示一条消息。但 stopEvent 方法已经阻止了冒泡，所以在表中的数据更新后，该事件事件阶段有效地结束（effectively ended），并且显示一个警告框——证实了有效结束。</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> +<title>Event Propagation</title> + +<style type="text/css"> + #t-daddy { border: 1px solid red } + #c1 { background-color: pink; } +</style> + +<script type="text/javascript"> + +function stopEvent(ev) { + c2 = document.getElementById("c2"); + c2.innerHTML = "hello"; + + // this ought to keep t-daddy from getting the click. + ev.stopPropagation(); + alert("event propagation halted."); +} + +function load() { + elem = document.getElementById("tbl1"); + elem.addEventListener("click", stopEvent, false); +} +</script> +</head> + +<body onload="load();"> + +<table id="t-daddy" onclick="alert('hi');"> + <tr id="tbl1"> + <td id="c1">one</td> + </tr> + <tr> + <td id="c2">two</td> + </tr> +</table> + +</body> +</html> +</pre> + +<h2 id="Example_6:_getComputedStyle" name="Example_6:_getComputedStyle">示例 6: getComputedStyle</h2> + +<p>这个例子演示了如何用{{domxref("window.getComputedStyle")}}方法来获取一个元素的样式而不是使用 style 属性或 JavaScript 的（例如，elt.style.backgroundColor="RGB(173，216，230)"）。列举在 <a href="/zh-CN/docs/Web/CSS/Reference">DOM CSS Properties List</a> 后面的类型的样式可以用更直接{{domxref("element.style", "elt.style")}} 属性获取。</p> + +<p><code>getComputedStyle()</code> 返回了一个 <code>ComputedCSSStyleDeclaration</code> 对象，其独立的样式属性可以用该对象的 getPropertyValue() 方法引用，如同下面的例子一样：</p> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> +<head> + +<title>getComputedStyle example</title> + +<script> +function cStyles() { + var RefDiv = document.getElementById("d1"); + var txtHeight = document.getElementById("t1"); + var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height"); + + txtHeight.value = h_style; + + var txtWidth = document.getElementById("t2"); + var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width"); + + txtWidth.value = w_style; + + var txtBackgroundColor = document.getElementById("t3"); + var b_style = document.defaultView.getComputedStyle(RefDiv,null).getPropertyValue("background-color"); + + txtBackgroundColor.value = b_style; +} +</script> + +<style> +#d1 { + margin-left: 10px; + background-color: rgb(173, 216, 230); + height: 20px; + max-width: 20px; } +</style> + +</head> + +<body> + +<div id="d1">&nbsp;</div> + +<form action=""> + <p> + <button type="button" onclick="cStyles();">getComputedStyle</button> + height<input id="t1" type="text" value="1"> + max-width<input id="t2" type="text" value="2"> + bg-color<input id="t3" type="text" value="3"></p> +</form> + +</body> +</html> +</pre> + +<h2 id="Example_7:_Displaying_Event_Object_Properties" name="Example_7:_Displaying_Event_Object_Properties">示例 7: 显示事件对象的属性</h2> + +<p>这个例子使用 DOM 方法来显示{{domxref("window.onload")}} {{domxref("event")}}对象的属性及其在 table 中的值。这个方法也展示一个有用的技术即使用了{{jsxref("Statements/for...in", "for...in")}} 循环来遍历一个对象的属性，以得到他们的值。</p> + +<p>不同浏览器之间事件对象的属性有很大不同，<a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">W3C DOM2事件规范</a>规定了事件的标准属性，然而，许多浏览器都大大扩展了这些。</p> + +<p>将下面的代码放到一个空白的文本文件，并将其加载到各种浏览器，你一定会对各种浏览器之间的不一致（事件属性的名称及其数量）感到惊讶。你可能还喜欢在这个页面加入一些元素，并调用不同的事件处理函数。</p> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf8"/> +<title>Show Event properties</title> + +<style> +table {border-collapse: collapse;} +thead {font-weight: bold;} +td {padding: 2px 10px 2px 10px;} + +.odd {background-color: #efdfef;} +.even {background-color: #ffffff;} +</style> + +<script> + +function showEventProperties(e) { + function addCell(row, text) { + var cell = row.insertCell(-1); + cell.appendChild(document.createTextNode(text)); + } + + var e = e || window.event; + document.getElementById('eventType').innerHTML = e.type; + + var table = document.createElement('table'); + var thead = table.createTHead(); + var row = thead.insertRow(-1); + var lableList = ['#', 'Property', 'Value']; + var len = lableList.length; + + for (var i=0; i<len; i++) { + addCell(row, lableList[i]); + } + + var tbody = document.createElement('tbody'); + table.appendChild(tbody); + + for (var p in e) { + row = tbody.insertRow(-1); + row.className = (row.rowIndex % 2)? 'odd':'even'; + addCell(row, row.rowIndex); + addCell(row, p); + addCell(row, e[p]); + } + + document.body.appendChild(table); +} +window.onload = function(event){ + showEventProperties(event); +} +</script> +</head> + +<body> +<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1> +</body> + +</html> +</pre> + +<h2 id="Example_8:_Using_the_DOM_Table_Interface" name="Example_8:_Using_the_DOM_Table_Interface">示例 8: 使用 DOM Table 接口(Interface)</h2> + +<p>DOM HTMLTableElement 接口提供了一些方便的方法用于创建和操作表。两种常用的方法是{{domxref("HTMLTableElement.insertRow")}}和{{domxref("tableRow.insertCell")}}。</p> + +<p>增加一行和一些单元到现有的表：</p> + +<pre><table id="table0"> + <tr> + <td>Row 0 Cell 0</td> + <td>Row 0 Cell 1</td> + </tr> +</table> + +<script> + +var table = document.getElementById('table0'); +var row = table.insertRow(-1); +var cell, + text; + +for (var i=0; i<2; i++) { + cell = row.insertCell(-1); + text = 'Row ' + row.rowIndex + ' Cell ' + i; + cell.appendChild(document.createTextNode(text)); +} +</script> +</pre> + +<h3 id="Notes" name="Notes">注意</h3> + +<ul> + <li>表的{{domxref("element.innerHTML","innerHTML")}}属性不应该被用来修改表，虽然你可以用它来写一个完整的表格或单元格的内容。</li> + <li>如果用 DOM 核心方法{{domxref("document.createElement")}}和{{domxref("Node.appendChild")}}创建表的行和单元，IE 会要求它们附加到一个 tbody 元素，而其它浏览器允许它们附加到一个 table 元素（行会被添加到最后的 tbody 元素）。</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement#Methods">表接口</a>还有一些可用于创建和修改的表的便利方法。</li> +</ul> + +<h2 id="Subnav">Subnav</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> +</ul> diff --git a/files/zh-cn/web/api/document_object_model/how_to_create_a_dom_tree/index.html b/files/zh-cn/web/api/document_object_model/how_to_create_a_dom_tree/index.html new file mode 100644 index 0000000000..91576a8a62 --- /dev/null +++ b/files/zh-cn/web/api/document_object_model/how_to_create_a_dom_tree/index.html @@ -0,0 +1,145 @@ +--- +title: 如何创建一个DOM树 +slug: Web/API/Document_Object_Model/How_to_create_a_DOM_tree +translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree +--- +<p>{{draft}}</p> + +<p>这个页面讲的是如何利用 JavaScript 中的 <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">DOM Core</a> API 来创建和修改 DOM 对象。它适用于特权（扩展）和非特权（网页）代码中的所有基于Gecko的应用程序（如Firefox）。</p> + +<h3 id="Dynamically_creating_a_DOM_tree" name="Dynamically_creating_a_DOM_tree">Dynamically creating a DOM tree</h3> + +<p>Consider the following XML document:</p> + +<pre class="brush: xml"><?xml version="1.0"?> +<people> + <person first-name="eric" middle-initial="H" last-name="jung"> + <address street="321 south st" city="denver" state="co" country="usa"/> + <address street="123 main st" city="arlington" state="ma" country="usa"/> + </person> + + <person first-name="jed" last-name="brown"> + <address street="321 north st" city="atlanta" state="ga" country="usa"/> + <address street="123 west st" city="seattle" state="wa" country="usa"/> + <address street="321 south avenue" city="denver" state="co" country="usa"/> + </person> +</people> +</pre> + +<p>The W3C DOM API, supported by Mozilla, can be used to create an in-memory representation of this document like so:</p> + +<pre class="brush: js">var doc = document.implementation.createDocument("", "", null); +var peopleElem = doc.createElement("people"); + +var personElem1 = doc.createElement("person"); +personElem1.setAttribute("first-name", "eric"); +personElem1.setAttribute("middle-initial", "h"); +personElem1.setAttribute("last-name", "jung"); + +var addressElem1 = doc.createElement("address"); +addressElem1.setAttribute("street", "321 south st"); +addressElem1.setAttribute("city", "denver"); +addressElem1.setAttribute("state", "co"); +addressElem1.setAttribute("country", "usa"); +personElem1.appendChild(addressElem1); + +var addressElem2 = doc.createElement("address"); +addressElem2.setAttribute("street", "123 main st"); +addressElem2.setAttribute("city", "arlington"); +addressElem2.setAttribute("state", "ma"); +addressElem2.setAttribute("country", "usa"); +personElem1.appendChild(addressElem2); + +var personElem2 = doc.createElement("person"); +personElem2.setAttribute("first-name", "jed"); +personElem2.setAttribute("last-name", "brown"); + +var addressElem3 = doc.createElement("address"); +addressElem3.setAttribute("street", "321 north st"); +addressElem3.setAttribute("city", "atlanta"); +addressElem3.setAttribute("state", "ga"); +addressElem3.setAttribute("country", "usa"); +personElem2.appendChild(addressElem3); + +var addressElem4 = doc.createElement("address"); +addressElem4.setAttribute("street", "123 west st"); +addressElem4.setAttribute("city", "seattle"); +addressElem4.setAttribute("state", "wa"); +addressElem4.setAttribute("country", "usa"); +personElem2.appendChild(addressElem4); + +var addressElem5 = doc.createElement("address"); +addressElem5.setAttribute("street", "321 south avenue"); +addressElem5.setAttribute("city", "denver"); +addressElem5.setAttribute("state", "co"); +addressElem5.setAttribute("country", "usa"); +personElem2.appendChild(addressElem5); + +peopleElem.appendChild(personElem1); +peopleElem.appendChild(personElem2); +doc.appendChild(peopleElem); +</pre> + +<p>See also the <a href="/en/XUL_Tutorial/Document_Object_Model" title="en/XUL_Tutorial/Document_Object_Model"> DOM chapter of the XUL Tutorial</a>.</p> + +<p>You can automate the creation of a DOM tree using a <a href="/en/JXON#JXON_reverse_algorithms" title="en/JXON#JXON_reverse_algorithms">JXON reverse algorithm</a> in association with the following JSON representation:</p> + +<pre class="brush: js">{ + "people": { + "person": [{ + "address": [{ + "@street": "321 south st", + "@city": "denver", + "@state": "co", + "@country": "usa" + }, { + "@street": "123 main st", + "@city": "arlington", + "@state": "ma", + "@country": "usa" + }], + "@first-name": "eric", + "@middle-initial": "H", + "@last-name": "jung" + }, { + "address": [{ + "@street": "321 north st", + "@city": "atlanta", + "@state": "ga", + "@country": "usa" + }, { + "@street": "123 west st", + "@city": "seattle", + "@state": "wa", + "@country": "usa" + }, { + "@street": "321 south avenue", + "@city": "denver", + "@state": "co", + "@country": "usa" + }], + "@first-name": "jed", + "@last-name": "brown" + }] + } +} +</pre> + +<h3 id="So_what.3F" name="So_what.3F">So what?</h3> + +<p>DOM trees can be <a href="/en/Using_XPath" title="en/Using_XPath"> queried using XPath expressions</a>, converted to strings or written to a local or remote files using <a href="/en/Parsing_and_serializing_XML" title="en/Parsing_and_serializing_XML"> XMLSerializer</a> (without having to first convert to a string), <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">POSTed to a web server</a> (via <code>XMLHttpRequest</code>), transformed using <a href="/en/XSLT" title="en/XSLT">XSLT</a>, <a href="/en/XLink" title="en/XLink">XLink</a>, converted to a JavaScript object through a <a href="/en/JXON" title="en/JXON">JXON algorithm</a>, etc.</p> + +<p>You can use DOM trees to model data which isn't well-suited for RDF (or perhaps you just don't like RDF). Another application is that, since XUL is XML, the UI of your application can be dynamically manipulated, downloaded, uploaded, saved, loaded, converted, or transformed quite easily.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="internal" href="/en/XML" title="en/XML">XML</a></li> + <li><a class="internal" href="/en/JXON" title="en/JXON">JXON</a></li> + <li><a class="internal" href="/en/XPath" title="en/XPath">XPath</a></li> + <li><a class="internal" href="/en/E4X" title="en/E4X">E4X (ECMAScript for XML)</a></li> + <li><a class="internal" href="/en/Parsing_and_serializing_XML" title="en/Parsing_and_serializing_XML">Parsing and serializing XML</a></li> + <li><a class="internal" href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></li> +</ul> + +<p>{{ languages( { "fr": "fr/Comment_cr\u00e9er_un_arbre_DOM", "ja": "ja/How_to_create_a_DOM_tree", "zh-cn": "zh-cn/How_to_create_a_DOM_tree" } ) }}</p> diff --git a/files/zh-cn/web/api/document_object_model/index.html b/files/zh-cn/web/api/document_object_model/index.html new file mode 100644 index 0000000000..656ca763f8 --- /dev/null +++ b/files/zh-cn/web/api/document_object_model/index.html @@ -0,0 +1,411 @@ +--- +title: 文档对象模型 (DOM) +slug: Web/API/Document_Object_Model +tags: + - API + - DOM + - DOM 参考文档 + - 中级 +translation_of: Web/API/Document_Object_Model +--- +<p>{{DefaultAPISidebar("DOM")}}</p> + +<p><strong>文档对象模型 (<em>DOM)</em></strong> 将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)。DOM的方法(methods)让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。</p> + +<p>这里还有一篇关于DOM的 <a href="/zh-CN/docs/Web/API/Document_Object_Model/Introduction">介绍</a> 。</p> + +<h2 id="DOM_接口" style="margin-bottom: 20px; line-height: 30px;">DOM 接口</h2> + +<div class="index"> +<ul> + <li>{{domxref("Attr")}}</li> + <li>{{domxref("CharacterData")}}</li> + <li>{{domxref("ChildNode")}} {{experimental_inline}}</li> + <li>{{domxref("Comment")}}</li> + <li>{{domxref("CustomEvent")}}</li> + <li>{{domxref("Document")}}</li> + <li>{{domxref("DocumentFragment")}}</li> + <li>{{domxref("DocumentType")}}</li> + <li>{{domxref("DOMError")}}</li> + <li>{{domxref("DOMException")}}</li> + <li>{{domxref("DOMImplementation")}}</li> + <li>{{domxref("DOMString")}}</li> + <li>{{domxref("DOMTimeStamp")}}</li> + <li>{{domxref("DOMSettableTokenList")}}</li> + <li>{{domxref("DOMStringList")}}</li> + <li>{{domxref("DOMTokenList")}}</li> + <li>{{domxref("Element")}}</li> + <li>{{domxref("Event")}}</li> + <li>{{domxref("EventTarget")}}</li> + <li>{{domxref("HTMLCollection")}}</li> + <li>{{domxref("MutationObserver")}}</li> + <li>{{domxref("MutationRecord")}}</li> + <li>{{domxref("Node")}}</li> + <li>{{domxref("NodeFilter")}}</li> + <li>{{domxref("NodeIterator")}}</li> + <li>{{domxref("NodeList")}}</li> + <li>{{domxref("ParentNode")}} {{experimental_inline}}</li> + <li>{{domxref("ProcessingInstruction")}}</li> + <li>{{domxref("Promise")}} {{experimental_inline}}</li> + <li>{{domxref("PromiseResolver")}} {{experimental_inline}}</li> + <li>{{domxref("Range")}}</li> + <li>{{domxref("Text")}}</li> + <li>{{domxref("TreeWalker")}}</li> + <li>{{domxref("URL")}}</li> + <li>{{domxref("Window")}}</li> + <li>{{domxref("Worker")}}</li> + <li>{{domxref("XMLDocument")}} {{experimental_inline}}</li> +</ul> +</div> + +<h2 id="过时的_DOM_接口" style="margin-bottom: 20px; line-height: 30px;">过时的 DOM 接口</h2> + +<p>DOM模型已经被高度简化了。为此，以下出现在DOM level 3或更早的规范里的接口已经被移除了。 现在不是非常确定是否有一些会被重新引进，但是当前应该把它们看作废弃的，应当避免使用:</p> + +<div class="index"> +<ul> + <li>{{domxref("CDATASection")}}</li> + <li>{{domxref("DOMConfiguration")}}</li> + <li>{{domxref("DOMErrorHandler")}}</li> + <li>{{domxref("DOMImplementationList")}}</li> + <li>{{domxref("DOMImplementationRegistry")}}</li> + <li>{{domxref("DOMImplementationSource")}}</li> + <li>{{domxref("DOMLocator")}}</li> + <li>{{domxref("DOMObject")}}</li> + <li>{{domxref("DOMUserData")}}</li> + <li>{{domxref("Entity")}}</li> + <li>{{domxref("EntityReference")}}</li> + <li>{{domxref("NamedNodeMap")}}</li> + <li>{{domxref("NameList")}}</li> + <li>{{domxref("Notation")}}</li> + <li>{{domxref("TypeInfo")}}</li> + <li>{{domxref("UserDataHandler")}}</li> + <li> </li> +</ul> +</div> + +<h2 id="HTML_接口" style="margin-bottom: 20px; line-height: 30px;">HTML 接口</h2> + +<p>{{domxref("HTMLDocument")}} 接口描述了包含 HTML 的文档。注意：HTML 规范也继承了{{domxref("Document")}} 接口。</p> + +<p>一个 <code>HTMLDocument</code> 对象还可以访问浏览器的各种功能：例如使用 {{domxref("Window")}} 接口来绘制的标签或窗口，与之关联的样式 {{domxref("window.style", "Style")}}（通常是CSS），浏览器相对于上下文的历史记录 {{domxref("window.history", "History")}}，以及文档内的选区 {{domxref("Selection")}} 等。</p> + +<h3 id="HTML_元素接口" style="line-height: 24px; letter-spacing: normal;">HTML 元素接口</h3> + +<div class="index"> +<ul> + <li>{{domxref("HTMLAnchorElement")}}</li> + <li>{{domxref("HTMLAppletElement")}}</li> + <li>{{domxref("HTMLAreaElement")}}</li> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLBaseElement")}}</li> + <li>{{domxref("HTMLBodyElement")}}</li> + <li>{{domxref("HTMLBRElement")}}</li> + <li>{{domxref("HTMLButtonElement")}}</li> + <li>{{domxref("HTMLCanvasElement")}}</li> + <li>{{domxref("HTMLDataElement")}}</li> + <li>{{domxref("HTMLDataListElement")}}</li> + <li>{{domxref("HTMLDirectoryElement")}}</li> + <li>{{domxref("HTMLDivElement")}}</li> + <li>{{domxref("HTMLDListElement")}}</li> + <li>{{domxref("HTMLElement")}}</li> + <li>{{domxref("HTMLEmbedElement")}}</li> + <li>{{domxref("HTMLFieldSetElement")}}</li> + <li>{{domxref("HTMLFontElement")}}</li> + <li>{{domxref("HTMLFormElement")}}</li> + <li>{{domxref("HTMLFrameElement")}}</li> + <li>{{domxref("HTMLFrameSetElement")}}</li> + <li>{{domxref("HTMLHeadElement")}}</li> + <li>{{domxref("HTMLHeadingElement")}}</li> + <li>{{domxref("HTMLHtmlElement")}}</li> + <li>{{domxref("HTMLHRElement")}}</li> + <li>{{domxref("HTMLIFrameElement")}}</li> + <li>{{domxref("HTMLImageElement")}}</li> + <li>{{domxref("HTMLInputElement")}}</li> + <li>{{domxref("HTMLKeygenElement")}}</li> + <li>{{domxref("HTMLLabelElement")}}</li> + <li>{{domxref("HTMLLegendElement")}}</li> + <li>{{domxref("HTMLLIElement")}}</li> + <li>{{domxref("HTMLLinkElement")}}</li> + <li>{{domxref("HTMLMapElement")}}</li> + <li>{{domxref("HTMLMediaElement")}}</li> + <li>{{domxref("HTMLMenuElement")}}</li> + <li>{{domxref("HTMLMetaElement")}}</li> + <li>{{domxref("HTMLMeterElement")}}</li> + <li>{{domxref("HTMLModElement")}}</li> + <li>{{domxref("HTMLObjectElement")}}</li> + <li>{{domxref("HTMLOListElement")}}</li> + <li>{{domxref("HTMLOptGroupElement")}}</li> + <li>{{domxref("HTMLOptionElement")}}</li> + <li>{{domxref("HTMLOutputElement")}}</li> + <li>{{domxref("HTMLParagraphElement")}}</li> + <li>{{domxref("HTMLParamElement")}}</li> + <li>{{domxref("HTMLPreElement")}}</li> + <li>{{domxref("HTMLProgressElement")}}</li> + <li>{{domxref("HTMLQuoteElement")}}</li> + <li>{{domxref("HTMLScriptElement")}}</li> + <li>{{domxref("HTMLSelectElement")}}</li> + <li>{{domxref("HTMLSourceElement")}}</li> + <li>{{domxref("HTMLSpanElement")}}</li> + <li>{{domxref("HTMLStyleElement")}}</li> + <li>{{domxref("HTMLTableElement")}}</li> + <li>{{domxref("HTMLTableCaptionElement")}}</li> + <li>{{domxref("HTMLTableCellElement")}}</li> + <li>{{domxref("HTMLTableDataCellElement")}}</li> + <li>{{domxref("HTMLTableHeaderCellElement")}}</li> + <li>{{domxref("HTMLTableColElement")}}</li> + <li>{{domxref("HTMLTableRowElement")}}</li> + <li>{{domxref("HTMLTableSectionElement")}}</li> + <li>{{domxref("HTMLTextAreaElement")}}</li> + <li>{{domxref("HTMLTimeElement")}}</li> + <li>{{domxref("HTMLTitleElement")}}</li> + <li>{{domxref("HTMLTrackElement")}}</li> + <li>{{domxref("HTMLUListElement")}}</li> + <li>{{domxref("HTMLUnknownElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> +</ul> +</div> + +<h3 id="其他接口" style="line-height: 24px; letter-spacing: normal;">其他接口</h3> + +<div class="index"> +<ul> + <li>{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasPattern")}}</li> + <li>{{domxref("TextMetrics")}}</li> + <li>{{domxref("ImageData")}}</li> + <li>{{domxref("CanvasPixelArray")}}</li> + <li>{{domxref("NotifyAudioAvailableEvent")}}</li> + <li>{{domxref("HTMLAllCollection")}}</li> + <li>{{domxref("HTMLFormControlsCollection")}}</li> + <li>{{domxref("HTMLOptionsCollection")}}</li> + <li>{{domxref("HTMLPropertiesCollection")}}</li> + <li>{{domxref("DOMStringMap")}}</li> + <li>{{domxref("RadioNodeList")}}</li> + <li>{{domxref("MediaError")}}</li> +</ul> +</div> + +<h3 id="过时的_HTML_接口" style="line-height: 24px; letter-spacing: normal;">过时的 HTML 接口</h3> + +<div class="index"> +<ul> + <li>{{domxref("HTMLBaseFontElement")}}</li> + <li>{{domxref("HTMLIsIndexElement")}}</li> +</ul> +</div> + +<h2 id="SVG_接口" style="margin-bottom: 20px; line-height: 30px;">SVG 接口</h2> + +<h3 id="SVG_元素接口" style="line-height: 24px; letter-spacing: normal;">SVG 元素接口</h3> + +<div class="index"> +<ul> + <li>{{domxref("SVGAElement")}}</li> + <li>{{domxref("SVGAltGlyphElement")}}</li> + <li>{{domxref("SVGAltGlyphDefElement")}}</li> + <li>{{domxref("SVGAltGlyphItemElement")}}</li> + <li>{{domxref("SVGAnimationElement")}}</li> + <li>{{domxref("SVGAnimateElement")}}</li> + <li>{{domxref("SVGAnimateColorElement")}}</li> + <li>{{domxref("SVGAnimateMotionElement")}}</li> + <li>{{domxref("SVGAnimateTransformElement")}}</li> + <li>{{domxref("SVGCircleElement")}}</li> + <li>{{domxref("SVGClipPathElement")}}</li> + <li>{{domxref("SVGColorProfileElement")}}</li> + <li>{{domxref("SVGComponentTransferFunctionElement")}}</li> + <li>{{domxref("SVGCursorElement")}}</li> + <li>{{domxref("SVGDefsElement")}}</li> + <li>{{domxref("SVGDescElement")}}</li> + <li>{{domxref("SVGElement")}}</li> + <li>{{domxref("SVGEllipseElement")}}</li> + <li>{{domxref("SVGFEBlendElement")}}</li> + <li>{{domxref("SVGFEColorMatrixElement")}}</li> + <li>{{domxref("SVGFEComponentTransferElement")}}</li> + <li>{{domxref("SVGFECompositeElement")}}</li> + <li>{{domxref("SVGFEConvolveMatrixElement")}}</li> + <li>{{domxref("SVGFEDiffuseLightingElement")}}</li> + <li>{{domxref("SVGFEDisplacementMapElement")}}</li> + <li>{{domxref("SVGFEDistantLightElement")}}</li> + <li>{{domxref("SVGFEFloodElement")}}</li> + <li>{{domxref("SVGFEGaussianBlurElement")}}</li> + <li>{{domxref("SVGFEImageElement")}}</li> + <li>{{domxref("SVGFEMergeElement")}}</li> + <li>{{domxref("SVGFEMergeNodeElement")}}</li> + <li>{{domxref("SVGFEMorphologyElement")}}</li> + <li>{{domxref("SVGFEOffsetElement")}}</li> + <li>{{domxref("SVGFEPointLightElement")}}</li> + <li>{{domxref("SVGFESpecularLightingElement")}}</li> + <li>{{domxref("SVGFESpotLightElement")}}</li> + <li>{{domxref("SVGFETileElement")}}</li> + <li>{{domxref("SVGFETurbulenceElement")}}</li> + <li>{{domxref("SVGFEFuncRElement")}}</li> + <li>{{domxref("SVGFEFuncGElement")}}</li> + <li>{{domxref("SVGFEFuncBElement")}}</li> + <li>{{domxref("SVGFEFuncAElement")}}</li> + <li>{{domxref("SVGFilterElement")}}</li> + <li>{{domxref("SVGFilterPrimitiveStandardAttributes")}}</li> + <li>{{domxref("SVGFontElement")}}</li> + <li>{{domxref("SVGFontFaceElement")}}</li> + <li>{{domxref("SVGFontFaceFormatElement")}}</li> + <li>{{domxref("SVGFontFaceNameElement")}}</li> + <li>{{domxref("SVGFontFaceSrcElement")}}</li> + <li>{{domxref("SVGFontFaceUriElement")}}</li> + <li>{{domxref("SVGForeignObjectElement")}}</li> + <li>{{domxref("SVGGElement")}}</li> + <li>{{domxref("SVGGlyphElement")}}</li> + <li>{{domxref("SVGGlyphRefElement")}}</li> + <li>{{domxref("SVGGradientElement")}}</li> + <li>{{domxref("SVGHKernElement")}}</li> + <li>{{domxref("SVGImageElement")}}</li> + <li>{{domxref("SVGLinearGradientElement")}}</li> + <li>{{domxref("SVGLineElement")}}</li> + <li>{{domxref("SVGMarkerElement")}}</li> + <li>{{domxref("SVGMaskElement")}}</li> + <li>{{domxref("SVGMetadataElement")}}</li> + <li>{{domxref("SVGMissingGlyphElement")}}</li> + <li>{{domxref("SVGMPathElement")}}</li> + <li>{{domxref("SVGPathElement")}}</li> + <li>{{domxref("SVGPatternElement")}}</li> + <li>{{domxref("SVGPolylineElement")}}</li> + <li>{{domxref("SVGPolygonElement")}}</li> + <li>{{domxref("SVGRadialGradientElement")}}</li> + <li>{{domxref("SVGRectElement")}}</li> + <li>{{domxref("SVGScriptElement")}}</li> + <li>{{domxref("SVGSetElement")}}</li> + <li>{{domxref("SVGStopElement")}}</li> + <li>{{domxref("SVGStyleElement")}}</li> + <li>{{domxref("SVGSVGElement")}}</li> + <li>{{domxref("SVGSwitchElement")}}</li> + <li>{{domxref("SVGSymbolElement")}}</li> + <li>{{domxref("SVGTextElement")}}</li> + <li>{{domxref("SVGTextPathElement")}}</li> + <li>{{domxref("SVGTitleElement")}}</li> + <li>{{domxref("SVGTRefElement")}}</li> + <li>{{domxref("SVGTSpanElement")}}</li> + <li>{{domxref("SVGUseElement")}}</li> + <li>{{domxref("SVGViewElement")}}</li> + <li>{{domxref("SVGVKernElement")}}</li> +</ul> +</div> + +<h3 id="SVG_数据类型接口" style="line-height: 24px; letter-spacing: normal;">SVG 数据类型接口</h3> + +<p>Here are the DOM API for data types used in the definitions of SVG properties and attributes.</p> + +<div class="note"> +<p><strong>注意:</strong> Starting in {{Gecko("5.0")}},the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed like arrays; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{domxref("SVGPointList")}}.</p> +</div> + +<h4 id="Static_type" style="line-height: 18px; letter-spacing: normal;">Static type</h4> + +<div class="index"> +<ul> + <li>{{domxref("SVGAngle")}}</li> + <li>{{domxref("SVGColor")}}</li> + <li>{{domxref("SVGICCColor")}}</li> + <li>{{domxref("SVGElementInstance")}}</li> + <li>{{domxref("SVGElementInstanceList")}}</li> + <li>{{domxref("SVGLength")}}</li> + <li>{{domxref("SVGLengthList")}}</li> + <li>{{domxref("SVGMatrix")}}</li> + <li>{{domxref("SVGNumber")}}</li> + <li>{{domxref("SVGNumberList")}}</li> + <li>{{domxref("SVGPaint")}}</li> + <li>{{domxref("SVGPoint")}}</li> + <li>{{domxref("SVGPointList")}}</li> + <li>{{domxref("SVGPreserveAspectRatio")}}</li> + <li>{{domxref("SVGRect")}}</li> + <li>{{domxref("SVGStringList")}}</li> + <li>{{domxref("SVGTransform")}}</li> + <li>{{domxref("SVGTransformList")}}</li> +</ul> +</div> + +<h4 id="Animated_type" style="line-height: 18px; letter-spacing: normal;">Animated type</h4> + +<div class="index"> +<ul> + <li>{{domxref("SVGAnimatedAngle")}}</li> + <li>{{domxref("SVGAnimatedBoolean")}}</li> + <li>{{domxref("SVGAnimatedEnumeration")}}</li> + <li>{{domxref("SVGAnimatedInteger")}}</li> + <li>{{domxref("SVGAnimatedLength")}}</li> + <li>{{domxref("SVGAnimatedLengthList")}}</li> + <li>{{domxref("SVGAnimatedNumber")}}</li> + <li>{{domxref("SVGAnimatedNumberList")}}</li> + <li>{{domxref("SVGAnimatedPreserveAspectRatio")}}</li> + <li>{{domxref("SVGAnimatedRect")}}</li> + <li>{{domxref("SVGAnimatedString")}}</li> + <li>{{domxref("SVGAnimatedTransformList")}}</li> +</ul> +</div> + +<h3 id="SVG_路径段接口" style="line-height: 24px; letter-spacing: normal;">SVG 路径段接口</h3> + +<div class="index"> +<ul> + <li>{{domxref("SVGPathSegList")}}</li> + <li>{{domxref("SVGPathSeg")}}</li> + <li>{{domxref("SVGPathSegArcAbs")}}</li> + <li>{{domxref("SVGPathSegArcRel")}}</li> + <li>{{domxref("SVGPathSegClosePath")}}</li> + <li>{{domxref("SVGPathSegCurvetoCubicAbs")}}</li> + <li>{{domxref("SVGPathSegCurvetoCubicRel")}}</li> + <li>{{domxref("SVGPathSegCurvetoCubicSmoothAbs")}}</li> + <li>{{domxref("SVGPathSegCurvetoCubicSmoothRel")}}</li> + <li>{{domxref("SVGPathSegCurvetoQuadraticAbs")}}</li> + <li>{{domxref("SVGPathSegCurvetoQuadraticRel")}}</li> + <li>{{domxref("SVGPathSegCurvetoQuadraticSmoothAbs")}}</li> + <li>{{domxref("SVGPathSegCurvetoQuadraticSmoothRel")}}</li> + <li>{{domxref("SVGPathSegLinetoAbs")}}</li> + <li>{{domxref("SVGPathSegLinetoHorizontalAbs")}}</li> + <li>{{domxref("SVGPathSegLinetoHorizontalRel")}}</li> + <li>{{domxref("SVGPathSegLinetoRel")}}</li> + <li>{{domxref("SVGPathSegLinetoVerticalAbs")}}</li> + <li>{{domxref("SVGPathSegLinetoVerticalRel")}}</li> + <li>{{domxref("SVGPathSegMovetoAbs")}}</li> + <li>{{domxref("SVGPathSegMovetoRel")}}</li> +</ul> +</div> + +<h3 id="SMIL_相关接口" style="line-height: 24px; letter-spacing: normal;">SMIL 相关接口</h3> + +<div class="index"> +<ul> + <li>{{domxref("ElementTimeControl")}}</li> + <li>{{domxref("TimeEvent")}}</li> +</ul> +</div> + +<h3 id="其他的_SVG_接口" style="line-height: 24px; letter-spacing: normal;">其他的 SVG 接口</h3> + +<div class="index"> +<ul> + <li>{{domxref("SVGAnimatedPathData")}}</li> + <li>{{domxref("SVGAnimatedPoints")}}</li> + <li>{{domxref("SVGColorProfileRule")}}</li> + <li>{{domxref("SVGCSSRule")}}</li> + <li>{{domxref("SVGExternalResourcesRequired")}}</li> + <li>{{domxref("SVGFitToViewBox")}}</li> + <li>{{domxref("SVGLangSpace")}}</li> + <li>{{domxref("SVGLocatable")}}</li> + <li>{{domxref("SVGRenderingIntent")}}</li> + <li>{{domxref("SVGStylable")}}</li> + <li>{{domxref("SVGTests")}}</li> + <li>{{domxref("SVGTextContentElement")}}</li> + <li>{{domxref("SVGTextPositioningElement")}}</li> + <li>{{domxref("SVGTransformable")}}</li> + <li>{{domxref("SVGUnitTypes")}}</li> + <li>{{domxref("SVGURIReference")}}</li> + <li>{{domxref("SVGViewSpec")}}</li> + <li>{{domxref("SVGZoomAndPan")}}</li> +</ul> +</div> + +<h2 id="See_also" name="See_also">相关参考</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference/Examples">DOM 示例</a></li> +</ul> diff --git a/files/zh-cn/web/api/document_object_model/introduction/index.html b/files/zh-cn/web/api/document_object_model/introduction/index.html new file mode 100644 index 0000000000..3fba378b63 --- /dev/null +++ b/files/zh-cn/web/api/document_object_model/introduction/index.html @@ -0,0 +1,239 @@ +--- +title: DOM概述 +slug: Web/API/Document_Object_Model/Introduction +tags: + - DOM + - 参考手册 + - 手册 + - 指南 +translation_of: Web/API/Document_Object_Model/Introduction +--- +<div>{{APIRef}}</div> + +<div> </div> + +<div><span style="line-height: 1.5;">本节提供了一个简单的概念性的DOM介绍：DOM是什么, 它是如何组织 </span><a href="/en-US/docs/HTML" style="line-height: 1.5;" title="HTML">HTML</a><span style="line-height: 1.5;"> 及 </span><a href="/en-US/docs/XML" style="line-height: 1.5;" title="XML">XML</a><span style="line-height: 1.5;"> 文档，你要如何访问它，这个API提供了哪些参考信息和实例。 </span></div> + +<div> </div> + +<h2 id="什么是_DOM">什么是 DOM?</h2> + +<p>文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。</p> + +<p>一个web页面是一个文档。这个文档可以在浏览器窗口或作为HTML源码显示出来。但上述两个情况中都是同一份文档。文档对象模型（DOM）提供了对同一份文档的另一种表现，存储和操作的方式。 DOM是web页面的完全的面向对象表述，它能够使用如 JavaScript等脚本语言进行修改。</p> + +<p> <a class="external" href="http://www.w3.org/DOM/">W3C DOM</a> 和<a href="https://dom.spec.whatwg.org/">WHATWG DOM</a>标准在绝大多数现代浏览器中都有对DOM的基本实现。许多浏览器提供了对W3C标准的扩展，所以在使用时必须注意，文档可能会在多种浏览器上使用不同的DOM来访问。</p> + +<p>例如，W3C DOM 中指定下面代码中的<code>getElementsByTagName</code>方法必须要返回<font face="'Open Sans', sans-serif">所有</font><code><P></code> 元素的列表：</p> + +<pre class="brush: js">paragraphs = document.getElementsByTagName("P"); +// paragraphs[0] is the first <p> element +// paragraphs[1] is the second <p> element, etc. +alert(paragraphs[0].nodeName); +</pre> + +<p>所有操作和创建web页面的属性，方法和事件都会被组织成对象的形式（例如， <code>document </code>对象表示文档本身， <code>table</code> 对象实现了特定的 <code>HTMLTableElement</code> DOM 接口来访问HTML 表格等）。本文会介绍基于 Gecko浏览器的 DOM 面向对象引用。</p> + +<h2 id="DOM_and_JavaScript" name="DOM_and_JavaScript">DOM 和 JavaScript</h2> + +<p>上面简短的示例和这个参考文档中几乎所有的示例一样，都使用了<a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>。也就是说，它虽然是用JavaScript编写的， 却可以通过 DOM 来访问文档和其中的元素。DOM 并不是一个编程语言，但如果没有DOM， JavaScript 语言也不会有任何网页，XML页面以及涉及到的元素的概念或模型。在文档中的每个元素— 包括整个文档，文档头部， 文档中的表格，表头，表格中的文本 — 都是文档所属于的文档对象模型（DOM）的一部分，因此它们可以使用DOM和一个脚本语言如 JavaScript，来访问和处理。</p> + +<p>开始的时候，JavaScript和DOM是交织在一起的，但它们最终演变成了两个独立的实体。JavaScript可以访问和操作存储在DOM中的内容，因此我们可以写成这个近似的等式：</p> + +<p>API (web 或 XML 页面) = DOM + JS (脚本语言)</p> + +<p>DOM 被设计成与特定编程语言相独立，使文档的结构化表述可以通过单一，一致的API获得。尽管我们在本参考文档中会专注于使用JavaScript， 但DOM 也可以使用其他的语言来实现， 以Python为例，代码如下：</p> + +<pre class="brush: python"># Python DOM example +import xml.dom.minidom as m +doc = m.parse("C:\\Projects\\Py\\chap1.xml"); +doc.nodeName # DOM property of document object; +p_list = doc.getElementsByTagName("para"); +</pre> + +<p>要获取更多在网页上使用JavaScript的信息，可以参考 <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> + +<h2 id="How_Do_I_Access_the_DOM.3F" name="How_Do_I_Access_the_DOM.3F">如何访问 DOM?</h2> + +<p>在使用DOM时，您不需要做任何其他特殊的操作。不同的浏览器都有对DOM不同的实现， 这些实现对当前的DOM标准而言，都会呈现出不同程度的一致性，每个web浏览器都会使用一些文档对象模型，从而使页面可以被脚本语言访问。</p> + +<p>当您在创建一个脚本时-无论是使用内嵌 <code><script></code>元素或者使用在web页面脚本加载的方法— 您都可以使用 <code style="font-style: normal;"><a href="/en-US/docs/DOM/document" style="text-decoration: underline;" title="DOM/document">document</a></code>或 <code style="font-style: normal;"><a href="/en-US/docs/DOM/window" style="text-decoration: underline;" title="DOM/window">window</a></code> 元素的API来操作文档本身或获取文档的子类（web页面中的各种元素）。</p> + +<p>您的DOM编程代码可能会像下面例子一样非常简单，如使用 <code style="font-style: normal;"><a href="/en-US/docs/DOM/window" title="DOM/window">window</a></code>对象的<code style="font-style: normal;"><a href="/en-US/docs/DOM/window.alert" title="DOM/window.alert">alert()</a></code>函数显示一个警告信息，或者使用比较复杂的方法来创建一个新的内容，如下面内容较长的实例所示。</p> + +<pre><body onload="window.alert('welcome to my home page!');"> +</pre> + +<p>除了定义 JavaScript的 <script> 元素外， 当文档被装载（以及当整个DOM可以被有效使用时），JavaScript可以设定一个函数来运行。下面的函数会创建一个新的 H1元素，为元素添加文本，并将H1添加在文档树中。 </p> + +<pre class="brush: html"><html> + <head> + <script> + // run this function when the document is loaded + window.onload = function() { + // create a couple of elements + // in an otherwise empty HTML page + heading = document.createElement("h1"); + heading_text = document.createTextNode("Big Head!"); + heading.appendChild(heading_text); + document.body.appendChild(heading); + } + </script> + </head> + <body> + </body> +</html> +</pre> + +<h2 id="Important_Data_Types" name="Important_Data_Types">重要的数据类型</h2> + +<p>本参考文档会试图以尽可能简单的方式描述各种对象和类型。但在API中传入的不同的数据类型需要我们去注意。为简单起见，在API参考文档中的语法实例通常会使用<span style="font-family: courier new,andale mono,monospace;">element(s) </span>指代节点，使用nodeList（s）或<code> element(s)</code>来指代节点数组，使用<code> attribute(s)</code>来指代属性节点。</p> + +<p>下面的表格简单则描述了这些数据类型。</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>document</code></td> + <td>当一个成员返回 <code>document</code> 对象 （例如，元素的 <code><strong>ownerDocument</strong></code> 属性返回它所属于 <code>document</code> ) ，这个对象就是root <code>document</code> 对象本身。 <a href="/en-US/docs/DOM/document" title="DOM/document">DOM <code>document</code> Reference</a> 一章对 <code>document</code> 对象进行了描述。</td> + </tr> + <tr> + <td><code>element</code></td> + <td><code>element</code> 是指由 DOM API 中成员返回的类型为 <code>element</code> 的一个元素或节点。 例如， <a href="/zh-CN/docs/Web/API/Document/createElement">document.createElement()</a> 方法会返回一个 <code>node</code> 的对象引用，也就是说这个方法返回了在DOM中创建的 <code>element</code>。 <code>element</code> 对象实现了 DOM <code>Element</code> 接口以及更基本的 <code>Node</code> 接口，参考文档将两者都包含在内。</td> + </tr> + <tr> + <td><code>nodeList</code></td> + <td> <code>nodeList</code> 是一个元素的数组，如从 <a href="/zh-CN/docs/Web/API/Document/getElementsByTagName">document.getElementsByTagName()</a> 方法返回的就是这种类型。 <code>nodeList</code> 中的条目由通过下标有两种方式进行访问： + <ul> + <li>list.item(1)</li> + <li>list[1]</li> + </ul> + 两种方式是等价的，第一种方式中 <strong><code>item()</code></strong> 是 <code>nodeList</code> 对象中的单独方法。 后面的方式则使用了经典的数组语法来获取列表中的第二个条目。</td> + </tr> + <tr> + <td><code>attribute</code></td> + <td>当 <code>attribute</code> 通过成员函数 (例如，通过 <strong><code>createAttribute()</code></strong>方法) 返回时，它是一个为属性暴露出专门接口的对象引用。DOM中的属性也是节点，就像元素一样，只不过您可能会很少使用它。</td> + </tr> + <tr> + <td><code>namedNodeMap</code></td> + <td> <code>namedNodeMap</code> 和数组类似，但是条目是由name或index访问的，虽然后一种方式仅仅是为了枚举方便，因为在 list 中本来就没有特定的顺序。 出于这个目的， <code>namedNodeMap</code> 有一个 item() 方法，你也可以从 <code>namedNodeMap</code> 添加或移除条目。</td> + </tr> + </tbody> +</table> + +<h2 id="DOM_interfaces" name="DOM_interfaces">DOM 接口</h2> + +<p>本指南对你可以用来操作DOM层级的对象以及事物进行了介绍。例如， <code>HTML form</code> 元素从 <code>HTMLFormElement</code><span style="font-family: courier new,andale mono,monospace;"> </span>接口中获取它的 <strong><code>name</code></strong> 属性，从 <span style="font-family: courier new,andale mono,monospace;"><code>HTMLElement</code> 接口中获取 </span><strong><code>className</code></strong> 属性。在上面情况中，您要获取的属性都只在form对象中。</p> + +<p>但是由DOM实现的对象和接口间的关系是容易被混淆的，因此本节会尝试去对DOM 标准中的一些常用的接口进行说明以及它们是怎样生效的。</p> + +<h3 id="Interfaces_and_Objects" name="Interfaces_and_Objects">接口及对象</h3> + +<p>许多对象都实现了多个接口。例如，table对象实现了 <a href="/en-US/docs/DOM/HTMLTableElement" title="DOM/table">HTML Table Element Interface</a>, 其中包括 <code>createCaption</code> 和 <code>insertRow</code> 方法。但由于table对象也是一个HTML元素， <code>table</code> 也实现了 <code>Element</code> 接口（在 <a href="/en-US/docs/DOM/element" title="DOM/element">DOM <code>element</code> Reference</a> 一章有对应描述）。最后，由于HTML元素对DOM来说也是组成web页面或XML页面节点树中的一个节点， table元素也实现更基本的 <code>Node</code> 接口， <code>Element</code> 对象也继承这个接口。</p> + +<p>正如下面的例子，当你得到一个 <code>table</code> 对象的引用时，你经常会轮流使用对象实现的三个不同接口的方法，但并不知其所以然。 </p> + +<pre class="brush: js">var table = document.getElementById("table"); +var tableAttrs = table.attributes; // Node/Element interface +for (var i = 0; i < tableAttrs.length; i++) { + // HTMLTableElement interface: border attribute + if(tableAttrs[i].nodeName.toLowerCase() == "border") + table.border = "1"; +} +// HTMLTableElement interface: summary attribute +table.summary = "note: increased border"; +</pre> + +<h3 id="Core_Interfaces_in_the_DOM" name="Core_Interfaces_in_the_DOM">DOM中核心接口</h3> + +<p>本节列出了在DOM中最常用的一些接口。此处并不会描述这些API在做什么，但是会让你了解当你使用DOM时常用的各种方法和属性。 这些常用的API在本文档最后的 <a href="/en-US/docs/Gecko_DOM_Reference/Examples" style="text-decoration: underline;" title="Gecko_DOM_Reference/Examples">DOM Examples</a> 章节中(包含更长的实例)中有使用。</p> + +<p>您在DOM编程时，通常使用的最多的就是 <code>Document</code> 和 <code>window</code> 对象。简单的说， <code>window</code> 对象表示浏览器中的内容，而 <code>document</code> 对象是文档本身的根节点。<code>Element</code> 继承了通用的 <code>Node</code> 接口, 将这两个接口结合后就提供了许多方法和属性可以供单个元素使用。在处理这些元素所对应的不同类型的数据时，这些元素可能会有专用的接口，如上节中的 <code>table</code> 对象的例子。</p> + +<p>下面是在web和XML页面脚本中使用DOM时，一些常用的API简要列表。</p> + +<ul> + <li><code><a href="/en-US/docs/DOM/document.getElementById" title="DOM/document.getElementById">document.getElementById</a>(id)</code></li> + <li><code>document.<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName" title="DOM/element.getElementsByTagName">getElementsByTagName</a>(name)</code></li> + <li><code><a href="/en-US/docs/DOM/document.createElement" title="DOM/document.createElement">document.createElement</a>(name)</code></li> + <li><code>parentNode.<a href="/en-US/docs/DOM/Node.appendChild" title="DOM/Node.appendChild">appendChild</a>(node)</code></li> + <li><code>element.<a href="/en-US/docs/DOM/element.innerHTML" title="DOM/element.innerHTML">innerHTML</a></code></li> + <li><code>element.<a href="/en-US/docs/DOM/element.style" title="DOM/element.style">style</a>.left</code></li> + <li><code>element.<a href="/en-US/docs/DOM/element.setAttribute" title="DOM/element.setAttribute">setAttribute</a>()</code></li> + <li><code>element.<a href="/en-US/docs/DOM/element.getAttribute" title="DOM/element.getAttribute">getAttribute</a>()</code></li> + <li><code>element.<a href="/en-US/docs/DOM/element.addEventListener" title="DOM/element.addEventListener">addEventListener</a>()</code></li> + <li><code><a href="/en-US/docs/DOM/window.content" title="DOM/window.content">window.content</a></code></li> + <li><code><a href="/en-US/docs/DOM/window.onload" title="DOM/window.onload">window.onload</a></code></li> + <li><code><a href="/en-US/docs/DOM/window.dump" title="DOM/window.dump">window.dump</a>()</code></li> + <li><code><a href="/en-US/docs/DOM/window.scrollTo" title="DOM/window.scrollTo">window.scrollTo</a>()</code></li> +</ul> + +<h2 id="Testing_the_DOM_API" name="Testing_the_DOM_API">测试DOM API</h2> + +<p>本文档提供了每一个接口的样本示例，您可以在自身进行web开发时使用。在有些情况下， 样例是一个完整的HTML页面，通过使用 <code><script></code> 元素标签进行DOM访问, 包含必须的接口 (如 buttons)来触发表单中的脚本， 以及DOM所操作的HTML元素。 此时，您可以将实例进行剪切和复制到一个新的HTML文档中，保存完成后，在浏览器中运行该实例。</p> + +<p>然而在一些情况下，例子会更简洁。想要运行那些仅仅用来展示HTML元素接口之间基本关系的示例，你可能会想创建一个测试页面，在里面你可以通过脚本使用这些接口。下面这个非常简单的网页在header中提供了一个<code><script></code>元素，这里面你可以使用测试接口的函数，一些你可以获取、设置或者操纵的HTML元素及其属性，以及必须的web user接口来从浏览器调用这些接口。</p> + +<p>你可以使用这个测试页面代码，也可以自己创建一个类似的页面来测试感兴趣的DOM接口，观察他们是如何在浏览器平台上面工作的。你可以根据需要更新<code>test()</code>函数里的内容，创建更多的button或者任何其他元素。</p> + +<pre class="brush: html"><html> + <head> + <title>DOM Tests</title> + <script type="application/javascript"> + function setBodyAttr(attr,value){ + if (document.body) eval('document.body.'+attr+'="'+value+'"'); + else notSupported(); + } + </script> + </head> + <body> + <div style="margin: .5in; height: 400;"> + <p><b><tt>text</tt>color</b></p> + <form> + <select onChange="setBodyAttr('text', + this.options[this.selectedIndex].value);"> + <option value="black">black + <option value="darkblue">darkblue + </select> + <p><b><tt>bgColor</tt></b></p> + <select onChange="setBodyAttr('bgColor', + this.options[this.selectedIndex].value);"> + <option value="white">white + <option value="lightgrey">gray + </select> + <p><b><tt>link</tt></b></p> + <select onChange="setBodyAttr('link', + this.options[this.selectedIndex].value);"> + <option value="blue">blue + <option value="green">green + </select> <small> + <a href="http://www.brownhen.com/dom_api_top.html" id="sample"> + (sample link)</a></small><br> + </form> + <form> + <input type="button" value="version" onclick="ver()" /> + </form> + </div> + </body> +</html> + +</pre> + +<p>为了在单个页面内测试大量接口，比如会影响网页颜色的一系列属性，你可以创建一个类似的测试页面，里面有一个全面控制台，包含了button、textfield和其他HTML元素。下面的截图可以给你一些启发如何来组合使用这些接口。</p> + +<figure> +<figcaption>图 0.1 简单的DOM测试页面</figcaption> +<img alt="Image:DOM_Ref_Introduction_to_the_DOM.gif" class="internal" src="/@api/deki/files/173/=DOM_Ref_Introduction_to_the_DOM.gif"></figure> + +<p>在这个例子中，下拉菜单可以动态更新DOM可以改变的网页部件，比如背景颜色（<code>bgColor</code>），链接的颜色（<code>aLink</code>），文字的颜色（text）。当然，设计你的测试页面，测试这些你看到的接口，对你学习使用DOM更有重要意义。</p> + +<p> </p> + +<h2 id="Subnav">Subnav</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> +</ul> diff --git a/files/zh-cn/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/zh-cn/web/api/document_object_model/locating_dom_elements_using_selectors/index.html new file mode 100644 index 0000000000..26246f9809 --- /dev/null +++ b/files/zh-cn/web/api/document_object_model/locating_dom_elements_using_selectors/index.html @@ -0,0 +1,54 @@ +--- +title: 使用选择器定位DOM元素 +slug: Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors +tags: + - querySelector + - querySelectorAll + - 使用选择器定位DOM元素 +translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors +--- +<div>{{ gecko_minversion_header("1.9.1") }}</div> + +<p>Selectors API提供了通过与一组选择器匹配来快速轻松地从DOM检索 <a href="https://developer.mozilla.org/en-US/docs/DOM/element" title="en-US/docs/DOM/Element"><code>Element</code></a>节点的方法。这比以前的技术要快得多，其中有必要使用JavaScript代码中的循环来定位您需要查找的特定项目。</p> + +<h2 id="NodeSelector_接口">NodeSelector 接口</h2> + +<p>此规范向实现 <a href="https://developer.mozilla.org/en-US/docs/DOM/document" title="en-US/docs/DOM/Document"><code>Document</code></a>, <a href="https://developer.mozilla.org/en-US/docs/DOM/DocumentFragment" title="en-US/docs/DOM/DocumentFragment"><code>DocumentFragment</code></a>, 或 <code><a href="https://developer.mozilla.org/en-US/docs/DOM/element" title="en-US/docs/DOM/Element">Element</a> </code>接口的任何对象添加了两种新方法：</p> + +<dl> + <dt><code>querySelector</code></dt> + <dd>返回节点子树内与之相匹配的第一个 <a href="https://developer.mozilla.org/en-US/docs/DOM/element" title="en-US/docs/DOM/Element"><code>Element</code></a> 节点。如果没有匹配的节点，则返回null。</dd> + <dt><code>querySelectorAll</code></dt> + <dd>返回一个<a href="https://developer.mozilla.org/en-US/docs/DOM/NodeList" title="en-US/docs/DOM/NodeList"><code>NodeList</code></a> 包含节点子树内所有与之相匹配的Element节点，如果没有相匹配的，则返回一个空节点列表。</dd> +</dl> + +<div class="note"><strong>注意：由</strong> <code><a href="https://developer.mozilla.org/en-US/docs/DOM/Element.querySelectorAll" title="en-US/docs/DOM/Element.querySelectorAll">querySelectorAll()</a>返回的节点列表<strong>不是动态实时</strong>的。这和其他DOM查询方法返回动态实时节点列表不一样。</code></div> + +<p><code>这里有更多的例子和细节：<a class="internal" href="/en-US/docs/DOM/Element.querySelector" title="en-US/docs/DOM/Element.querySelector">querySelector()</a></code> and <a class="internal" href="/en-US/docs/DOM/Element.querySelectorAll" title="en-US/docs/DOM/Element.querySelectorAll"><code>querySelectorAll()</code></a> ，<a class="internal" href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Code snippets for querySelector</a>.</p> + +<h2 id="Selectors">Selectors</h2> + +<p>选择器方法接受一个或多个逗号分隔的选择器来确定应该返回哪些元素。</p> + +<p>例如，要选择文档中所有CSS的类(class)是warning或者note的段落(p)元素,可以这样写：</p> + +<pre><code>var special = document.querySelectorAll( "p.warning, p.note" );</code></pre> + +<p>也可以通过ID来查询，例如：</p> + +<pre><code>var el = document.querySelector( "#main, #basic, #exclamation" );</code></pre> + +<p>执行上面的代码后，el就包含了文档中元素的ID是main，basic或exclamation的所有元素中的第一个元素。</p> + +<p><code>querySelector()</code> and <code>querySelectorAll()</code> 里可以使用任何CSS选择器。</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li> + <li><a href="/en-US/docs/DOM/Element.querySelector" title="en-US/docs/DOM/Element.querySelector"><code>element.querySelector</code></a></li> + <li><a href="/en-US/docs/DOM/Element.querySelectorAll" title="en-US/docs/DOM/element.querySelectorAll"><code>element.querySelectorAll</code></a></li> + <li><a href="/en-US/docs/DOM/Document.querySelector" title="en-US/docs/DOM/document.querySelector"><code>document.querySelector</code></a></li> + <li><a href="/en-US/docs/DOM/Document.querySelectorAll" title="en-US/docs/DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li> +</ul> diff --git a/files/zh-cn/web/api/document_object_model/preface/index.html b/files/zh-cn/web/api/document_object_model/preface/index.html new file mode 100644 index 0000000000..594150fd39 --- /dev/null +++ b/files/zh-cn/web/api/document_object_model/preface/index.html @@ -0,0 +1,51 @@ +--- +title: 前言 +slug: Web/API/Document_Object_Model/Preface +translation_of: Web/API/Document_Object_Model +--- +<p>{{ ApiRef() }}</p> +<h3 id="About_This_Reference" name="About_This_Reference">关于此参考文档</h3> +<p>本节将描述与此向导本身相关的一些内容，内容包括它是做什么的，里面的信息是如何呈现的，以及怎样在你DOM开发中如何使用这份参考文档中的示例。</p> +<p>注意，这份文档尚在开发中，并没有完整包含Gecko中所有已经移植的DOM方法及其属性，但是，文档中的每一个小节（例如，DOM文件参考）中所描述的对象是完整的。今后当某个API库的成员的信息可用时，它将会被整合到此文档中。</p> +<h3 id="哪些人应该阅读这份指南">哪些人应该阅读这份指南</h3> +<p>这份Gecko DOM参考文档的读者应该是一位web开发人员或者是一位对网页制作有一定了解的熟练web用户。这份文档对读者对DOM、XML、web服务或者web标准，甚至JavaScript——DOM呈现给读者的语言——的熟练度都没有要求。但是，本文档假定读者至少对HTML、标签、网页的基本结构、浏览器以及样式表是熟悉的。</p> +<p>在这里，介绍性的资料在展示的同时伴随有许多示例，并且高等级的解释对没有经验的和经验丰富的web开发者都同样有用，并且也并不仅仅针对入门开发者。然而，这是一份正在不断改进中的API参考手册。</p> +<h3 id="什么是Gecko？">什么是Gecko？</h3> +<p>Mozilla，Firefox, Netscape 6以上版本，以及一些基于Mozilla的其他浏览器都有一个相同的对DOM的实现。这是因为它们使用的是相同的技术。</p> +<p>Gecko，即在上述各种浏览器中处理HTML的解析，页面的排版，文档对象模型，以及整个应用界面的渲染的软件组件，是一个快速的、兼容多种标准的渲染引擎。它移植了W3C的DOM标准以及出现在网页页面和应用界面（或者称为chrome）中的类DOM（但尚未标准化）的浏览器对象模型（即所谓window等的）。</p> +<p>尽管应用界面和页面内容在不同的浏览器里的呈现方式不一样，但是DOM期望它们统一地作为一种节点的分层结构。</p> +<h3 id="API语法">API语法</h3> +<p>API参考里的每个描述都包括语法、输入输出参数（包括返回类型），一个例子，额外的一些提示，以及指向对应参考文档的链接。</p> +<p>只读的属性只能被读取。因为它们无法被设置，所以通常以一个单独的一行语法表示。例如screen对象的只读属性availHeight使用的语法如下：</p> +<pre>iAvail = window.screen.availHeight +</pre> +<p>这意味着你只能把该只读属性放在等式的右边。</p> +<p>可读/写的属性，既能被读取也能被写入：</p> +<pre>msg = window.status +window.status = msg +</pre> +<p>一般来说，描述对象的成员时，对象的格式声明通常都带有一个简单的类型描述符，例如，对所有的元素使用element，对所有的顶层文档对象使用document，对所有的表对象使用table等（详见<a href="/zh-CN/Gecko_DOM_Reference/Introduction#Important_Data_Types" title="zh-CN/Gecko_DOM_Reference/Introduction#Important_Data_Types">重要的数据类型</a>）。</p> +<h3 id="Using_the_Examples" name="Using_the_Examples">如何使用示例</h3> +<p>本参考文档中的许多示例都是完整的文档，你可以把他们复制粘贴到一个新的文件，然后在浏览器中打开它。</p> +<p>其他的例子是一些代码片段。你可以把它们加入到JavaScript的回调函数中来执行。</p> +<p>例如，这个关于<a href="/zh-CN/DOM/window.document" title="zh-CN/DOM/window.document">window.document</a>属性的例子能通过一个函数来测试。这里，它通过一个按钮的<code>onclick </code>属性来调用。</p> +<pre class="brush: html"><html> +<head> +<title>Test Page</title> +<script type="text/javascript"> +function testWinDoc() { + + var doc= window.document; + + alert(doc.title); + +} +</script> +</head> + +<body> + <button onclick="testWinDoc();">test document property</button> +</body> +</html> +</pre> +<p>其他一些尚未完整打包的对象成员也采用与此类似的函数和页面。参见<a href="/zh-CN/Gecko_DOM_Reference/Introduction#Testing_the_DOM_API" title="zh-CN/Gecko_DOM_Reference/Introduction#Testing_the_DOM_API">测试DOM API</a>，可以一次对各种API的做一次“无害测试”。</p> diff --git a/files/zh-cn/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html b/files/zh-cn/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html new file mode 100644 index 0000000000..f808bceaef --- /dev/null +++ b/files/zh-cn/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html @@ -0,0 +1,88 @@ +--- +title: 使用 W3C DOM Level 1 核心 +slug: Web/API/Document_Object_Model/Using_the_W3C_DOM_Level_1_Core +translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core +--- +<p>W3C 的 Dom Level 1 核心是一个用于修改文档内容树的强大的对象模型。它被所有主流浏览器支持着，包括火狐浏览器和微软IE浏览器。它是网页脚本编程的强大基础。</p> + +<h2 id="What_is_a_content_tree.3F" name="What_is_a_content_tree.3F">什么是内容树？</h2> + +<p>很多HTML作者认为HTML是平面的东西 -- 一堆文字被标签包围在中间。当然还有比这个更多的内容。任何HTML文档 （或者说任何SGML文档或者 XML 文档) 是一个树状结构。 比如，以下的文档和树状结构是相似的 (虽然不是完全一致 -- 更多信息请参考 <a href="/en-US/docs/Whitespace_in_the_DOM" title="Whitespace_in_the_DOM">whitespace in the DOM</a>):</p> + +<pre class="brush: html"><html> +<head> + <title>My Document</title> +</head> +<body> + <h1>Header</h1> + <p>Paragraph</p> +</body> +</html> +</pre> + +<p><img alt="image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg" class="internal" src="/@api/deki/files/415/=Using_the_W3C_DOM_Level_1_Core-doctree.jpg"></p> + +<p>当Mozilla解析文档的时候，它首先构建一个内容树然后用它来显示这个文档。</p> + +<p>用于描述树状结构的术语通常出现在DOM Level 1的核心中。 我上面画的每一个方块都是这个树的一个节点。 节点上面的线条表示父子关系: 上面的父节点, 而位于下方的是子节点. 位于一个父节点下面的两个子节点是相邻的。 类似地，我们可以指代祖先和后代。（不过，表亲们太乱了。）</p> + +<h2 id="What_does_the_DOM_Level_1_Core_let_me_do.3F" name="What_does_the_DOM_Level_1_Core_let_me_do.3F">DOM Level 1 核心能让我们做什么?</h2> + +<p>W3C的DOM Level 1允许你随意改变内容树。其功能之强大足以从零构建出任何HTML文档。它允许作者在任何时候，都可以通过脚本来修改文档里的任何内容。这是网页制作者通过JavaScript动态改变DOM的最简单途径。在版本较旧的浏览器里，使用JavaScript都是通过访问全局对象 <code>document</code> 属性来得到文档。文档对象实现了W3C的DOM Level 1规定的<a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#i-Document">文档接口</a>。</p> + +<h2 id="A_simple_example" name="A_simple_example">一个简单例子</h2> + +<p>假设作者改变上面文档的头部内容，并且使用两段段落取代一段段落。实现代码如下：</p> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><body> +<input type="button" value="Change this document." onclick="change()"> +<h2>Header</h2> +<p>Paragraph</p> +</body><span> +</span></pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js"><span> function change() { + // document.getElementsByTagName("H2") returns a NodeList of the <h2> + // elements in the document, and the first is number 0: + + var header = document.getElementsByTagName("H2").item(0); + // the firstChild of the header is a Text node: + header.firstChild.data = "A dynamic document"; + // now the header is "A dynamic document". + + var para = document.getElementsByTagName("P").item(0); + para.firstChild.data = "This is the first paragraph."; + + // create a new Text node for the second paragraph + var newText = document.createTextNode("This is the second paragraph."); + // create a new Element to be the second paragraph + var newElement = document.createElement("P"); + // put the text in the paragraph + newElement.appendChild(newText); + // and put the paragraph on the end of the document by appending it to + // the BODY (which is the parent of para) + para.parentNode.appendChild(newElement); + }</span></pre> + +<p>{{ EmbedLiveSample('A_simple_example', 800, 300) }}</p> + +<p>可以看完整的<a href="https://developer.mozilla.org/@api/deki/files/2866/=example.html">示例代码</a>。</p> + +<h2 id="How_can_I_learn_more.3F" name="How_can_I_learn_more.3F">想学习更多？</h2> + +<p>现在您已经熟悉了DOM的基本概念，有一个文档解释了<a href="https://developer.mozilla.org/en-US/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces"> DOM Level 1的基本方法</a>的基本方法。这是本文的补充。</p> + +<p>也可以查看W3C的 <a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html">DOM Level 1 核心规范文档</a>。尽管是正式的规范文档，但十分清晰易于理解。其对于网页制作者主要有用的内容是描述不同的DOM对象及其所有属性和方法。可以继续阅读我们其它关于<a href="https://developer.mozilla.org/en-US/docs/DOM">DOM的文档</a>。</p> + +<div class="originaldocinfo"> +<p><strong>Original Document Information</strong></p> + +<ul> + <li>Author(s): L. David Baron <dbaron at dbaron dot org></li> + <li>Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li> +</ul> +</div> diff --git a/files/zh-cn/web/api/document_object_model/whitespace/index.html b/files/zh-cn/web/api/document_object_model/whitespace/index.html new file mode 100644 index 0000000000..929b77472a --- /dev/null +++ b/files/zh-cn/web/api/document_object_model/whitespace/index.html @@ -0,0 +1,194 @@ +--- +title: DOM中的空白符 +slug: Web/API/Document_Object_Model/Whitespace +translation_of: Web/API/Document_Object_Model/Whitespace +--- +<h4 id=".E5.95.8F.E9.A1.8C.E8.AA.AA.E6.98.8E" name=".E5.95.8F.E9.A1.8C.E8.AA.AA.E6.98.8E">问题说明</h4> + +<p><a href="zh_tw/DOM">DOM</a> 中的空白符会让处理节点结构时增加不少麻烦。在Mozilla 的软件中，原始文件里所有空白符都会在 DOM 中出现（不包括标签内含的空白符）。这样的处理方式有其必要之处，一方面编辑器中可迳行排列文字、二方面 <a href="zh_tw/CSS">CSS</a> 里的 <code>white-space: pre</code> 也才能发挥作用。 如此一来就表示：</p> + +<ul> + <li>有些空白符会自成一个文本节点。</li> + <li>有些空白符会与其他文本节点合成为一个文本节点。</li> +</ul> + +<p>换句话说，下面这段 HTML 代码对应的 DOM 节点结构会如附图所示，其中“\n”代表换行符：</p> + +<pre class="eval"><!-- My document --> +<html> +<head> + <title>My Document</title> +</head> +<body> + <h1>Header</h1> + <p> + Paragraph + </p> +</body> +</html> +</pre> + +<p><img src="https://mdn.mozillademos.org/files/854/whitespace_tree.png" style="height: 306px; width: 618px;"></p> + +<p>这么一来，要使用 DOM 游走于节点结构间又不想要无用的空白符时，会有点困难。</p> + +<h4 id=".E5.8A.A9.E4.BD.A0.E4.B8.80.E8.87.82.E4.B9.8B.E5.8A.9B" name=".E5.8A.A9.E4.BD.A0.E4.B8.80.E8.87.82.E4.B9.8B.E5.8A.9B">助你一臂之力</h4> + +<p>以下的 JavaScript 代码定义了许多函数，能够让你在处理 DOM 中的空白符时轻松点：</p> + +<pre>/** + * 以下所谓的“空白符”代表： + * "\t" TAB \u0009 （制表符） + * "\n" LF \u000A （换行符） + * "\r" CR \u000D （回车符） + * " " SPC \u0020 （真正的空格符） + * + * 不包括 JavaScript 的“\s”，因为那代表如不断行字符等其他字符。 + */ + + +/** + * 测知某节点的文字内容是否全为空白。 + * + * @参数 nod |CharacterData| 类的节点（如 |Text|、|Comment| 或 |CDATASection|）。 + * @传回值 若 |nod| 的文字内容全为空白则传回 true，否则传回 false。 + */ +function is_all_ws( nod ) +{ + // Use ECMA-262 Edition 3 String and RegExp features + return !(/[^\t\n\r ]/.test(nod.data)); +} + + +/** + * 测知是否该略过某节点。 + * + * @参数 nod DOM1 |Node| 对象 + * @传回值 若 |Text| 节点内仅有空白符或为 |Comment| 节点时，传回 true， + * 否则传回 false。 + */ + +function is_ignorable( nod ) +{ + return ( nod.nodeType == 8) || // 注释节点 + ( (nod.nodeType == 3) && is_all_ws(nod) ); // 仅含空白符的文字节点 +} + +/** + * 此为会跳过空白符节点及注释节点的 |previousSibling| 函数 + * （ |previousSibling| 是 DOM 节点的特性值，为该节点的前一个节点。） + * + * @参数 sib 节点。 + * @传回值 有两种可能： + * 1) |sib| 的前一个“非空白、非注释”节点（由 |is_ignorable| 测知。） + * 2) 若该节点前无任何此类节点，则传回 null。 + */ +function node_before( sib ) +{ + while ((sib = sib.previousSibling)) { + if (!is_ignorable(sib)) return sib; + } + return null; +} + +/** + * 此为会跳过空白符节点及注释节点的 |nextSibling| 函数 + * + * @参数 sib 节点。 + * @传回值 有两种可能： + * 1) |sib| 的下一个“非空白、非注释”节点。 + * 2) 若该节点后无任何此类节点，则传回 null。 + */ +function node_after( sib ) +{ + while ((sib = sib.nextSibling)) { + if (!is_ignorable(sib)) return sib; + } + return null; +} + +/** + * 此为会跳过空白符节点及注释节点的 |lastChild| 函数 + * （ lastChild| 是 DOM 节点的特性值，为该节点之中最后一个子节点。） + * + * @参数 par 节点。 + * @传回值 有两种可能： + * 1) |par| 中最后一个“非空白、非注释”节点。 + * 2) 若该节点中无任何此类子节点，则传回 null。 + */ +function last_child( par ) +{ + var res=par.lastChild; + while (res) { + if (!is_ignorable(res)) return res; + res = res.previousSibling; + } + return null; +} + +/** + * 此为会跳过空白符节点及注释节点的 |firstChild| 函数 + * + * @参数 par 节点。 + * @传回值 有两种可能： + * 1) |par| 中第一个“非空白、非注释”节点。 + * 2) 若该节点中无任何此类子节点，则传回 null。 + */ +function first_child( par ) +{ + var res=par.firstChild; + while (res) { + if (!is_ignorable(res)) return res; + res = res.nextSibling; + } + return null; +} + +/** + * 此为传回值不包含文字节点资料的首尾所有空白符、 + * 并将两个以上的空白符缩减为一个的 |data| 函数。 + *（ data 是 DOM 文字节点的特性值，为该文字节点中的资料。） + * + * @参数 txt 欲传回其中资料的文字节点 + * @传回值 文字节点的内容，其中空白符已依前述方式处理。 + */ +function data_of( txt ) +{ + var data = txt.data; + // Use ECMA-262 Edition 3 String and RegExp features + data = data.replace(/[\t\n\r ]+/g, " "); + if (data.charAt(0) == " ") + data = data.substring(1, data.length); + if (data.charAt(data.length - 1) == " ") + data = data.substring(0, data.length - 1); + return data; +} +</pre> + +<h2 id="Example" name="Example">示例</h2> + +<p>下面的代码演示了上面这些工具函数的使用方法。具体操作是，遍历一个子节点全部为元素节点的元素，找到所包含的第一个节点为一个文本内容为 “<code>This is the third paragraph</code>” 的文本节点的那个子元素，并修改该子元素的 class 属性及其第一个文本节点的文字内容。</p> + +<pre>var cur = first_child(document.getElementById("test")); +while (cur) +{ + if (data_of(cur.firstChild) == "This is the third paragraph.") + { + cur.className = "magic"; + cur.firstChild.data = "This is the magic paragraph."; + } + cur = node_after(cur); +} +</pre> + +<div class="originaldocinfo"> +<h4 id=".E5.8E.9F.E6.96.87.E8.B3.87.E8.A8.8A" name=".E5.8E.9F.E6.96.87.E8.B3.87.E8.A8.8A">原文资讯</h4> + +<ul> + <li>作者：<a class="external" href="http://dbaron.org">L. David Baron</a></li> + <li>最后更新：January 1, 2003</li> + <li>版权资讯：© 1998-2005 by individual mozilla.org contributors; 内容部份以 <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">创意公用</a>方式授权。</li> +</ul> +</div> + +<p> </p> |