ES6 - HTML DOM ES6 - 正则表达式 ES6 - 集合 ES6 HTML DOM 每个网页都驻留在一个浏览器窗口中，可以将其视为一个对象。 文档对象表示在该窗口中显示的HTML文档。文档对象具有各种属性，这些属性引用允许访问和修改文档内容的其他对象。 文档内容被访问和修改的方式称为文档对象模型或DOM。对象按层次结构组织。此分层结构适用于Web文档中对象的组织。 以下是几个重要对象的简单层次结构 - 有几个DOM存在。以下各节将详细解释这些DOM中的每一个，并说明如何使用它们来访问和修改文档内容。 Legacy DOM - 这是在JavaScript语言的早期版本中引入的模型。它受到所有浏览器的支持，但仅允许访问文档的某些关键部分，例如表单，表单元素和图像。 W3C DOM - 此文档对象模型允许访问和修改所有文档内容，并由万维网联盟（W3C）进行标准化。几乎所有的现代浏览器都支持这种模式。 IE4 DOM - 此文档对象模型是在Microsoft的Internet Explorer浏览器的第4版中引入的。IE 5及更高版本包括对大多数基本W3C DOM功能的支持。 Legacy DOM 这是在JavaScript语言的早期版本中引入的模型。它受到所有浏览器的支持，但只允许访问文档的某些关键部分，如表单，表单元素和图像。 该模型提供了几个只读属性，如title，URL和lastModified提供有关整个文档的信息。除此之外，该模型提供了各种方法，可用于设置和获取文档属性值。 旧版DOM中的文档属性 以下是可以使用Legacy DOM访问的文档属性列表。 Sr.No Property & Description 1 alinkColor 已弃用 - 指定已激活链接颜色的字符串。 例如 : document.alinkColor 2 anchors[ ] 一组锚对象，每个锚对象出现在文档中。 例如 : document.anchors[0], document.anchors[1] and so on 3 applets[ ] 一组applet对象，每个applet出现在文档中。 例如 : document.applets[0], document.applets[1] and so on 4 bgColor 已弃用 - 指定文档背景颜色的字符串。 例如 : document.bgColor 5 Cookie 具有特殊行为的字符串值属性，允许查询和设置与此文档关联的Cookie。 例如 : document.cookie 6 Domain 一个字符串，指定文档来自的Internet域。用于安全目的。 例如 : document.domain 7 embeds[ ] 用标签表示嵌入文档中的数据的对象数组。插件[]的同义词。一些插件和ActiveX控件可以用JavaScript代码进行控制。 例如 : document.embeds[0], document.embeds[1] and so on 8 fgColor 一个字符串，指定文档的默认文本颜色。 例如 : document.fgColor 9 forms[ ] 一个表单对象数组，每个HTML表单出现在文档中。 例如 : document.forms[0], document.forms[1] and so on 10 images[ ] 表单对象数组，每个HTML表单使用HTML 标记出现在文档中。 例如 : document.forms[0], document.forms[1] and so on 11 lastModified 指定文档最近更改日期的只读字符串。 例如 : document.lastModified 12 linkColor 已弃用 - 指定未访问链接颜色的字符串。 例如 : document.linkColor 13 links[ ] 它是一个文档链接数组。 例如 : document.links[0], document.links[1] and so on 14 Location 文档的URL。不赞成使用URL属性。 例如 : document.location 15 plugins[ ] 嵌入的同义词[] 例如 : document.plugins[0], document.plugins[1] and so on 16 Referrer 一个只读字符串，其中包含当前文档链接的文档的URL（如果有）。 例如 : document.referrer 17 Title 标签的文本内容。</p> <p><b>例如</b> : document.title</p> </td> </tr> <tr> <td style="text-align:center;vertical-align:middle">18</td> <td> <p><b>URL</b></p> <p>指定文档网址的只读字符串。</p> <p><b>例如</b> : document.URL</p> </td> </tr> <tr> <td style="text-align:center;vertical-align:middle">19</td> <td> <p><b>vlinkColor</b></p> <p>已弃用 - 指定访问链接颜色的字符串。</p> <p><b>例如</b> : document.vlinkColor</p> </td> </tr> </tbody></table><h2>传统DOM中的文档方法</h2> <p>以下是Legacy DOM支持的方法列表。</p> <table class="table table-bordered"> <tbody><tr> <th style="width:5%">Sr.No</th> <th style="text-align:center">Property & Description</th> </tr> <tr> <td style="text-align:center;vertical-align:middle">1</td> <td> <p><b>clear( )</b></p> <p>已弃用 - 删除文档内容并不返回任何内容。</p> <p><b>例如</b> : document.clear( )</p> </td> </tr> <tr> <td style="text-align:center;vertical-align:middle">2</td> <td> <p><b>close( )</b></p> <p>关闭用open（）方法打开的文档流并返回任何内容。</p> </td> </tr> <tr> <td style="text-align:center;vertical-align:middle">3</td> <td> <p><b>open( )</b></p> <p>删除现有文档内容并打开新文档内容可写入的流。什么都不返回</p> <p><b>例如</b> : document.open( )</p> </td> </tr> <tr> <td style="text-align:center;vertical-align:middle">4</td> <td> <p><b>write( value, ...)</b></p> <p>将指定的一个或多个字符串插入当前正在解析的文档中或附加到使用open（）打开的文档。什么都不返回</p> <p><b>例如</b> : document.write( value, ...)</p> </td> </tr> <tr> <td style="text-align:center;vertical-align:middle">5</td> <td> <p><b>writeln( value, ...)</b></p> <p>与write（）相同，只是它将一个换行符附加到输出。什么都不返回</p> <p><b>例如</b> : document.writeln( value, ...)</p> </td> </tr> </tbody></table><p>我们可以使用HTML DOM在任何HTML文档中找到任何HTML元素。例如，如果一个web文档包含一个表单元素，然后使用JavaScript，我们可以将其引用为document.forms [0]。如果您的Web文档包含两个表单元素，则第一个表单称为document.forms [0]，第二个表单称为document.forms [1]。</p> <p>使用上面给出的层次和属性，我们可以使用document.forms [0] .elements [0]等访问第一个表单元素。</p> <p><strong>示例</strong></p> <p>以下是使用Legacy DOM方法访问文档属性的示例。</p> <div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">html</span><span class="p">></span> <span class="p"><</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">title</span><span class="p">></span> Document Title <span class="p"></</span><span class="nt">title</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">type </span><span class="o">=</span> <span class="s">"text/javascript"</span><span class="p">></span> <span class="c"><!--</span> <span class="kd">function</span> <span class="nx">myFunc</span><span class="p">()</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">title</span><span class="p">;</span> <span class="nx">alert</span><span class="p">(</span><span class="s2">"Document Title : "</span> <span class="o">+</span> <span class="nx">ret</span> <span class="p">);</span> <span class="kd">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">URL</span><span class="p">;</span> <span class="nx">alert</span><span class="p">(</span><span class="s2">"Document URL : "</span> <span class="o">+</span> <span class="nx">ret</span> <span class="p">);</span> <span class="kd">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">forms</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span> <span class="nx">alert</span><span class="p">(</span><span class="s2">"Document First Form : "</span> <span class="o">+</span> <span class="nx">ret</span> <span class="p">);</span> <span class="kd">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">forms</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">elements</span><span class="p">[</span><span class="mi">1</span><span class="p">];</span> <span class="nx">alert</span><span class="p">(</span><span class="s2">"Second element : "</span> <span class="o">+</span> <span class="nx">ret</span> <span class="p">);</span> <span class="p">}</span> <span class="c1">//</span> <span class="o">--></span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">body</span><span class="p">></span> <span class="p"><</span><span class="nt">h1</span> <span class="na">id </span><span class="o">=</span> <span class="s">"title"</span><span class="p">></span>This is main title<span class="p"></</span><span class="nt">h1</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Click the following to see the result:<span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"><</span><span class="nt">form</span> <span class="na">name </span><span class="o">=</span> <span class="s">"FirstForm"</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type </span><span class="o">=</span> <span class="s">"button"</span> <span class="na">value </span><span class="o">=</span> <span class="s">"Click Me"</span> <span class="na">onclick </span><span class="o">=</span> <span class="s">"myFunc();"</span> <span class="p">/></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type </span><span class="o">=</span> <span class="s">"button"</span> <span class="na">value </span><span class="o">=</span> <span class="s">"Cancel"</span><span class="p">></span> <span class="p"></</span><span class="nt">form</span><span class="p">></span> <span class="p"><</span><span class="nt">form</span> <span class="na">name </span><span class="o">=</span> <span class="s">"SecondForm"</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type </span><span class="o">=</span> <span class="s">"button"</span> <span class="na">value </span><span class="o">=</span> <span class="s">"Don't ClickMe"</span><span class="p">/></span> <span class="p"></</span><span class="nt">form</span><span class="p">></span> <span class="p"></</span><span class="nt">body</span><span class="p">></span> <span class="p"></</span><span class="nt">html</span><span class="p">></span> </pre></div> <p><strong>注</strong> - 此示例返回窗体和元素的对象。我们必须通过使用本教程中未讨论的那些对象属性来访问它们的值。</p> </div> <!-- 分页 --> <nav> <ul class="pager"> <li class="previous"><a href="/article/7546">ES6 - 正则表达式</a></li> <li class="next"><a href="/article/7548">ES6 - 集合</a></li> </ul> </nav> </article> </div> </div> </div> </div> <footer class="es-footer"> <div class="copyright"> <div class="container"> Powered by <a href="http://www.codingdict.com/" target="_blank">CodingDict</a> ©2014-2020 <a class="mlm" href="http://www.codingdict.com/" target="_blank">编程字典</a> <a class="mlm" href="http://www.codingdict.com/courses">课程存档</a> <div class="mts"> 课程内容版权均归 <a href="http://www.codingdict.com/"> CodingDict </a> 所有 <a class="mlm" href="https://beian.miit.gov.cn/" target="_blank"> 京ICP备18030172号 </a> </div> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?30b336128641baa43b1404dd15891277"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({id: "JpzbFo2d3IEdIRuU",ck: "JpzbFo2d3IEdIRuU"})</script> </footer> </div> </body> </html>
