demo007x's Blog/ Posts/ posts/ 2023-05-08·2885 字·14 分钟· loading Notes JAVA HTML JavaScript HTTP 作者 demo007x 目录 DOM 的优点： 结构 DOM 类别： JavaScript 支持三种 DOM 类型，但我们仅讨论适用于 ES6 的类型。 旧版 DOM 的文档属性： **alinkColor：**此属性定义激活链接的颜色。 anchors[]: 它是每个锚点对象的数组，一个对应于文档中出现的每个锚点。 applets[]: 它是 applet 对象的数组，每个 applet 对应一个出现在文档中的 applet。 bgColor: 该属性定义文档的背景颜色。 Cookie: 此属性定义具有特殊行为的值属性，允许设置与要查询的文档关联的 cookie。 Domain: 此属性定义文档所属的域，已用于安全目的。 embeds[]: plugins[] 的同义词。它是表示文档中嵌入的数据的对象数组 fgColor: 此属性定义文档的默认文本颜色。 forms[]: 它是表单对象的数组，每个对象对应一个表单对象，如表单中所示。 images[]: 它是表单对象的数组，每个元素对应表单中出现的带有 标记的元素。 lastModified: 此属性定义最近更新的日期。 linkColor: 此属性定义未访问链接的颜色，它与vlinkColor相反。 links[]: 文档链接数组。 Location: 该属性保存文档的 URL。 plugins[]: 此属性是 embeds[] 的同义词。 Referrer: 包含文档 URL（如果与任何文档链接）的字符串。 Title: 标签的内容。</a></li> <li><a href="#url-该属性定义-url"><strong>URL:</strong> 该属性定义 URL。</a></li> <li><a href="#vlinkcolor-该属性定义访问链接未激活的颜色"><strong>vlinkColor:</strong> 该属性定义访问链接（未激活）的颜色。</a></li> </ul> </li> </ul> </li> <li><a href="#旧版-dom-中的文档方法"><strong>旧版 DOM 中的文档方法：</strong></a> <ul> <li> <ul> <li><a href="#clear-擦除文档的内容并且不返回任何内容"><strong>clear():</strong> 擦除文档的内容并且不返回任何内容。</a></li> <li><a href="#close-关闭用-open-打开的文档"><strong>close():</strong> 关闭用 open() 打开的文档。</a></li> <li><a href="#open-删除现有文档内容并打开一个可以写入新文档内容的流什么也不返回"><strong>open():</strong> 删除现有文档内容并打开一个可以写入新文档内容的流。什么也不返回。</a></li> <li><a href="#write-在文档中插入指定的字符串"><strong>write():</strong> 在文档中插入指定的字符串。</a></li> <li><a href="#writeln-与-write-相同但在完成附加后插入新行"><strong>writeln():</strong> 与 write() 相同，但在完成附加后插入新行。</a></li> </ul> </li> </ul> </li> <li><a href="#w3c-dom-中的文档属性"><strong>W3C DOM 中的文档属性：</strong></a> <ul> <li> <ul> <li><a href="#body-标签的内容"><strong>body:</strong> 标签的内容。</a></li> <li><a href="#defaultview-表示显示文档的窗口"><strong>defaultView:</strong> 表示显示文档的窗口。</a></li> <li><a href="#documentelement-对文档标签的引用"><strong>documentElement:</strong> 对文档标签的引用。</a></li> <li><a href="#implementation-表示-domimplementation-对象该对象表示创建此文档的实现"><strong>implementation:</strong> 表示 DOMImplementation 对象，该对象表示创建此文档的实现。</a></li> </ul> </li> </ul> </li> <li><a href="#w3c-dom-中的文档方法"><strong>W3C DOM 中的文档方法：</strong></a> <ul> <li> <ul> <li><a href="#createattributename_of_attr-返回一个新创建的具有指定名称的-attr-节点"><strong>createAttribute(name_of_attr):</strong> 返回一个新创建的具有指定名称的 Attr 节点。</a></li> <li><a href="#createcommenttext-创建并返回一个包含指定文本的新注释节点"><strong>createComment(text):</strong> 创建并返回一个包含指定文本的新注释节点。</a></li> <li><a href="#createdocumentfragment-创建并返回一个空的-documentfragment-节点"><strong>createDocumentFragment():</strong> 创建并返回一个空的 DocumentFragment 节点。</a></li> <li><a href="#createelementtagname_of_new_ele-创建并返回具有指定标记名的新-element-节点"><strong>createElement(tagname_of_new_ele):</strong> 创建并返回具有指定标记名的新 Element 节点。</a></li> <li><a href="#createtextnodetext-创建并返回一个包含指定文本的新文本节点"><strong>createTextNode(text):</strong> 创建并返回一个包含指定文本的新文本节点。</a></li> <li><a href="#getelementbyidid-从具有提到的-id-的元素的文档中返回值"><strong>getElementById(Id):</strong> 从具有提到的 Id 的元素的文档中返回值。</a></li> <li><a href="#getelementsbynamename-从文档中返回具有指定名称的节点数组"><strong>getElementsByName(name):</strong> 从文档中返回具有指定名称的节点数组。</a></li> <li><a href="#getelementsbytagnametagname-返回文档中具有指定标记名的所有元素节点的数组"><strong>getElementsByTagName(tagname):</strong> 返回文档中具有指定标记名的所有元素节点的数组。</a></li> <li><a href="#importnodeimportednode-deep-从适合插入到此文档中的其他文档创建并返回节点的副本如果-deep-参数为真它也会递归地复制该节点的子节点"><strong>importNode(importedNode, deep):</strong> 从适合插入到此文档中的其他文档创建并返回节点的副本。如果 deep 参数为真，它也会递归地复制该节点的子节点。</a></li> <li><a href="#activeelement指当前活动的输入元素">**activeElement：**指当前活动的输入元素。</a></li> <li><a href="#all-文档中所有元素对象的可索引数组"><strong>all[]:</strong> 文档中所有元素对象的可索引数组。</a></li> <li><a href="#charset-文档的字符集"><strong>charset:</strong> 文档的字符集。</a></li> <li><a href="#children-包含文档直接子级-html-元素的数组"><strong>children[]:</strong> 包含文档直接子级 HTML 元素的数组。</a></li> <li><a href="#defaultcharset-文档的默认字符集"><strong>defaultCharset:</strong> 文档的默认字符集。</a></li> <li><a href="#expando-当此属性设置为-false-时它会阻止客户端对象扩展"><strong>expando:</strong> 当此属性设置为 false 时，它会阻止客户端对象扩展。</a></li> <li><a href="#parentwindow-包含窗口的文档"><strong>parentWindow:</strong> 包含窗口的文档。</a></li> <li><a href="#readystate-指定文档的加载状态"><strong>readyState:</strong> 指定文档的加载状态。</a></li> <li><a href="#uninitialized-文档尚未开始加载"><strong>uninitialized:</strong> 文档尚未开始加载。</a></li> <li><a href="#loading-文档正在加载"><strong>loading:</strong> 文档正在加载</a></li> <li><a href="#interactive-文档已加载到足以供用户交互"><strong>interactive:</strong> 文档已加载到足以供用户交互。</a></li> <li><a href="#complete-文档已加载"><strong>complete:</strong> 文档已加载。</a></li> <li><a href="#elementfrompointxy-返回位于指定点的元素"><strong>elementFromPoint(x,y):</strong> 返回位于指定点的元素。</a></li> </ul> </li> </ul> </li> </ul> </nav> </div> </details> <details class="toc-inside mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 lg:hidden"> <summary class="py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden"> 目录 </summary> <div class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"> <nav id="TableOfContents"> <ul> <li><a href="#dom-的优点"><strong>DOM 的优点：</strong></a> <ul> <li><a href="#结构"><strong>结构</strong></a></li> <li><a href="#dom-类别-javascript-支持三种-dom-类型但我们仅讨论适用于-es6-的类型"><strong>DOM 类别：</strong> JavaScript 支持三种 DOM 类型，但我们仅讨论适用于 ES6 的类型。</a></li> <li><a href="#旧版-dom-的文档属性"><strong>旧版 DOM 的文档属性：</strong></a> <ul> <li><a href="#alinkcolor此属性定义激活链接的颜色">**alinkColor：**此属性定义激活链接的颜色。</a></li> <li><a href="#anchors-它是每个锚点对象的数组一个对应于文档中出现的每个锚点"><strong>anchors[]:</strong> 它是每个锚点对象的数组，一个对应于文档中出现的每个锚点。</a></li> <li><a href="#applets-它是-applet-对象的数组每个-applet-对应一个出现在文档中的-applet"><strong>applets[]:</strong> 它是 applet 对象的数组，每个 applet 对应一个出现在文档中的 applet。</a></li> <li><a href="#bgcolor-该属性定义文档的背景颜色"><strong>bgColor:</strong> 该属性定义文档的背景颜色。</a></li> <li><a href="#cookie-此属性定义具有特殊行为的值属性允许设置与要查询的文档关联的-cookie"><strong>Cookie:</strong> 此属性定义具有特殊行为的值属性，允许设置与要查询的文档关联的 cookie。</a></li> <li><a href="#domain-此属性定义文档所属的域已用于安全目的"><strong>Domain:</strong> 此属性定义文档所属的域，已用于安全目的。</a></li> <li><a href="#embeds-plugins-的同义词它是表示文档中嵌入的数据的对象数组"><strong>embeds[]:</strong> plugins[] 的同义词。它是表示文档中嵌入的数据的对象数组</a></li> <li><a href="#fgcolor-此属性定义文档的默认文本颜色"><strong>fgColor:</strong> 此属性定义文档的默认文本颜色。</a></li> <li><a href="#forms-它是表单对象的数组每个对象对应一个表单对象如表单中所示"><strong>forms[]:</strong> 它是表单对象的数组，每个对象对应一个表单对象，如表单中所示。</a></li> <li><a href="#images-它是表单对象的数组每个元素对应表单中出现的带有-img-标记的元素"><strong>images[]:</strong> 它是表单对象的数组，每个元素对应表单中出现的带有 <img> 标记的元素。</a></li> <li><a href="#lastmodified-此属性定义最近更新的日期"><strong>lastModified:</strong> 此属性定义最近更新的日期。</a></li> <li><a href="#linkcolor-此属性定义未访问链接的颜色它与vlinkcolor相反"><strong>linkColor:</strong> 此属性定义未访问链接的颜色，它与<strong>vlinkColor</strong>相反。</a></li> <li><a href="#links-文档链接数组"><strong>links[]:</strong> 文档链接数组。</a></li> <li><a href="#location-该属性保存文档的-url"><strong>Location:</strong> 该属性保存文档的 URL。</a></li> <li><a href="#plugins-此属性是-embeds-的同义词"><strong>plugins[]:</strong> 此属性是 embeds[] 的同义词。</a></li> <li><a href="#referrer-包含文档-url如果与任何文档链接的字符串"><strong>Referrer:</strong> 包含文档 URL（如果与任何文档链接）的字符串。</a></li> <li><a href="#title--title标签的内容"><strong>Title:</strong> <title>标签的内容。</a></li> <li><a href="#url-该属性定义-url"><strong>URL:</strong> 该属性定义 URL。</a></li> <li><a href="#vlinkcolor-该属性定义访问链接未激活的颜色"><strong>vlinkColor:</strong> 该属性定义访问链接（未激活）的颜色。</a></li> </ul> </li> </ul> </li> <li><a href="#旧版-dom-中的文档方法"><strong>旧版 DOM 中的文档方法：</strong></a> <ul> <li> <ul> <li><a href="#clear-擦除文档的内容并且不返回任何内容"><strong>clear():</strong> 擦除文档的内容并且不返回任何内容。</a></li> <li><a href="#close-关闭用-open-打开的文档"><strong>close():</strong> 关闭用 open() 打开的文档。</a></li> <li><a href="#open-删除现有文档内容并打开一个可以写入新文档内容的流什么也不返回"><strong>open():</strong> 删除现有文档内容并打开一个可以写入新文档内容的流。什么也不返回。</a></li> <li><a href="#write-在文档中插入指定的字符串"><strong>write():</strong> 在文档中插入指定的字符串。</a></li> <li><a href="#writeln-与-write-相同但在完成附加后插入新行"><strong>writeln():</strong> 与 write() 相同，但在完成附加后插入新行。</a></li> </ul> </li> </ul> </li> <li><a href="#w3c-dom-中的文档属性"><strong>W3C DOM 中的文档属性：</strong></a> <ul> <li> <ul> <li><a href="#body-标签的内容"><strong>body:</strong> 标签的内容。</a></li> <li><a href="#defaultview-表示显示文档的窗口"><strong>defaultView:</strong> 表示显示文档的窗口。</a></li> <li><a href="#documentelement-对文档标签的引用"><strong>documentElement:</strong> 对文档标签的引用。</a></li> <li><a href="#implementation-表示-domimplementation-对象该对象表示创建此文档的实现"><strong>implementation:</strong> 表示 DOMImplementation 对象，该对象表示创建此文档的实现。</a></li> </ul> </li> </ul> </li> <li><a href="#w3c-dom-中的文档方法"><strong>W3C DOM 中的文档方法：</strong></a> <ul> <li> <ul> <li><a href="#createattributename_of_attr-返回一个新创建的具有指定名称的-attr-节点"><strong>createAttribute(name_of_attr):</strong> 返回一个新创建的具有指定名称的 Attr 节点。</a></li> <li><a href="#createcommenttext-创建并返回一个包含指定文本的新注释节点"><strong>createComment(text):</strong> 创建并返回一个包含指定文本的新注释节点。</a></li> <li><a href="#createdocumentfragment-创建并返回一个空的-documentfragment-节点"><strong>createDocumentFragment():</strong> 创建并返回一个空的 DocumentFragment 节点。</a></li> <li><a href="#createelementtagname_of_new_ele-创建并返回具有指定标记名的新-element-节点"><strong>createElement(tagname_of_new_ele):</strong> 创建并返回具有指定标记名的新 Element 节点。</a></li> <li><a href="#createtextnodetext-创建并返回一个包含指定文本的新文本节点"><strong>createTextNode(text):</strong> 创建并返回一个包含指定文本的新文本节点。</a></li> <li><a href="#getelementbyidid-从具有提到的-id-的元素的文档中返回值"><strong>getElementById(Id):</strong> 从具有提到的 Id 的元素的文档中返回值。</a></li> <li><a href="#getelementsbynamename-从文档中返回具有指定名称的节点数组"><strong>getElementsByName(name):</strong> 从文档中返回具有指定名称的节点数组。</a></li> <li><a href="#getelementsbytagnametagname-返回文档中具有指定标记名的所有元素节点的数组"><strong>getElementsByTagName(tagname):</strong> 返回文档中具有指定标记名的所有元素节点的数组。</a></li> <li><a href="#importnodeimportednode-deep-从适合插入到此文档中的其他文档创建并返回节点的副本如果-deep-参数为真它也会递归地复制该节点的子节点"><strong>importNode(importedNode, deep):</strong> 从适合插入到此文档中的其他文档创建并返回节点的副本。如果 deep 参数为真，它也会递归地复制该节点的子节点。</a></li> <li><a href="#activeelement指当前活动的输入元素">**activeElement：**指当前活动的输入元素。</a></li> <li><a href="#all-文档中所有元素对象的可索引数组"><strong>all[]:</strong> 文档中所有元素对象的可索引数组。</a></li> <li><a href="#charset-文档的字符集"><strong>charset:</strong> 文档的字符集。</a></li> <li><a href="#children-包含文档直接子级-html-元素的数组"><strong>children[]:</strong> 包含文档直接子级 HTML 元素的数组。</a></li> <li><a href="#defaultcharset-文档的默认字符集"><strong>defaultCharset:</strong> 文档的默认字符集。</a></li> <li><a href="#expando-当此属性设置为-false-时它会阻止客户端对象扩展"><strong>expando:</strong> 当此属性设置为 false 时，它会阻止客户端对象扩展。</a></li> <li><a href="#parentwindow-包含窗口的文档"><strong>parentWindow:</strong> 包含窗口的文档。</a></li> <li><a href="#readystate-指定文档的加载状态"><strong>readyState:</strong> 指定文档的加载状态。</a></li> <li><a href="#uninitialized-文档尚未开始加载"><strong>uninitialized:</strong> 文档尚未开始加载。</a></li> <li><a href="#loading-文档正在加载"><strong>loading:</strong> 文档正在加载</a></li> <li><a href="#interactive-文档已加载到足以供用户交互"><strong>interactive:</strong> 文档已加载到足以供用户交互。</a></li> <li><a href="#complete-文档已加载"><strong>complete:</strong> 文档已加载。</a></li> <li><a href="#elementfrompointxy-返回位于指定点的元素"><strong>elementFromPoint(x,y):</strong> 返回位于指定点的元素。</a></li> </ul> </li> </ul> </li> </ul> </nav> </div> </details> <script> (function () { var $toc = $('#TableOfContents'); if ($toc.length > 0) { var $window = $(window); function onScroll() { var currentScroll = $window.scrollTop(); var h = $('.anchor'); var id = ""; h.each(function (i, e) { e = $(e); if (e.offset().top - $(window).height()/3 <= currentScroll) { id = decodeURIComponent(e.attr('id')); } }); var active = $toc.find('a.active'); if (active.length == 1 && active.eq(0).attr('href') == '#' + id) return true; active.each(function (i, e) { $(e).removeClass('active').siblings('ul').hide(); }); $toc.find('a[href="#' + id + '"]').addClass('active') $toc.find('a[href="#' + id + '"]').parentsUntil('#TableOfContents').each(function (i, e) { $(e).children('a').parents('ul').show(); }); } $window.on('scroll', onScroll); $(document).ready(function () { $toc.find('a').parent('li').find('ul').hide(); onScroll(); }); } })(); </script> </div> </div> <div class="min-w-0 min-h-0 max-w-fit"> <div class="article-content max-w-prose mb-20"> <h1 class="relative group">ES6 HTML DOM <div id="es6-html-dom" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#es6-html-dom" aria-label="锚点">#</a> </span> </h1> <p><strong>DOM</strong>代表文档对象**模型。<strong>HTML</strong> 页面在浏览器中呈现。浏览器将从网络服务器下载的页面中包含的所有元素组装到其内存中。一旦完成，浏览器就会在浏览器窗口中显示这些对象，一旦完成，浏览器就无法再识别单个 HTML 元素。支持 JavaScript 的浏览器能够在 HTML 页面在浏览器中呈现之后识别该页面中的各个对象，因为支持 JavaScript 的浏览器可以识别并使用 DOM。因此，允许随意控制对象的功能。</p> <h2 class="relative group"><strong>DOM 的优点：</strong> <div id="dom-%E7%9A%84%E4%BC%98%E7%82%B9" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#dom-%E7%9A%84%E4%BC%98%E7%82%B9" aria-label="锚点">#</a> </span> </h2> <ul> <li>有助于创建交互式网页，因为它允许浏览器识别单个 HTML 对象，即使它们在浏览器窗口中呈现后也是如此。</li> <li>允许随意控制对象的功能</li> <li>帮助更新或修改数据</li> </ul> <h3 class="relative group"><strong>结构</strong> <div id="%E7%BB%93%E6%9E%84" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#%E7%BB%93%E6%9E%84" aria-label="锚点">#</a> </span> </h3> <p> <figure> <img class="my-0 rounded-md" loading="lazy" src="https://demo007x-articles.oss-cn-beijing.aliyuncs.com/demo007x-articles/202310161258719.png" alt="image-20231016125835295" /> </figure> </p> <iframe src="https://aa.geeksforgeeks.org/iframe.html?code=GFG_ABP_Incontent_728x90" style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-size: 17px; vertical-align: baseline; max-width: 100%; width: 748px; height: 110px;"></iframe> <ul> <li>**导航器：**浏览器。例如：Netscape Navigator，Internet Explorer，Opera，Mosaic等。</li> <li><strong>窗口：</strong> 浏览器的窗口。</li> <li><strong>文档：</strong> 文档显示在浏览器窗口中。它还有自己的多个元素。我们这里只讨论表单。</li> <li><strong>表单：</strong> DOM 层次结构继续向下包含表单的各个元素</li> </ul> <h3 class="relative group"><strong>DOM 类别：</strong> JavaScript 支持三种 DOM 类型，但我们仅讨论适用于 ES6 的类型。 <div id="dom-%E7%B1%BB%E5%88%AB-javascript-%E6%94%AF%E6%8C%81%E4%B8%89%E7%A7%8D-dom-%E7%B1%BB%E5%9E%8B%E4%BD%86%E6%88%91%E4%BB%AC%E4%BB%85%E8%AE%A8%E8%AE%BA%E9%80%82%E7%94%A8%E4%BA%8E-es6-%E7%9A%84%E7%B1%BB%E5%9E%8B" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#dom-%E7%B1%BB%E5%88%AB-javascript-%E6%94%AF%E6%8C%81%E4%B8%89%E7%A7%8D-dom-%E7%B1%BB%E5%9E%8B%E4%BD%86%E6%88%91%E4%BB%AC%E4%BB%85%E8%AE%A8%E8%AE%BA%E9%80%82%E7%94%A8%E4%BA%8E-es6-%E7%9A%84%E7%B1%BB%E5%9E%8B" aria-label="锚点">#</a> </span> </h3> <ol> <li>**Legacy DOM：**这是早期版本的 JavaScript 使用的模型。该模型提供只读属性，例如标题、URL 等。它还提供有关整个文档的 LastModified 信息。该模型有很多方法可用于设置和获取文档属性值。</li> </ol> <h3 class="relative group"><strong>旧版 DOM 的文档属性：</strong> <div id="%E6%97%A7%E7%89%88-dom-%E7%9A%84%E6%96%87%E6%A1%A3%E5%B1%9E%E6%80%A7" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#%E6%97%A7%E7%89%88-dom-%E7%9A%84%E6%96%87%E6%A1%A3%E5%B1%9E%E6%80%A7" aria-label="锚点">#</a> </span> </h3> <h4 class="relative group">**alinkColor：**此属性定义激活链接的颜色。 <div id="alinkcolor%E6%AD%A4%E5%B1%9E%E6%80%A7%E5%AE%9A%E4%B9%89%E6%BF%80%E6%B4%BB%E9%93%BE%E6%8E%A5%E7%9A%84%E9%A2%9C%E8%89%B2" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#alinkcolor%E6%AD%A4%E5%B1%9E%E6%80%A7%E5%AE%9A%E4%B9%89%E6%BF%80%E6%B4%BB%E9%93%BE%E6%8E%A5%E7%9A%84%E9%A2%9C%E8%89%B2" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">alinkColor</span> </span></span></code></pre></div> <h4 class="relative group"><strong>anchors[]:</strong> 它是每个锚点对象的数组，一个对应于文档中出现的每个锚点。 <div id="anchors-%E5%AE%83%E6%98%AF%E6%AF%8F%E4%B8%AA%E9%94%9A%E7%82%B9%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%95%B0%E7%BB%84%E4%B8%80%E4%B8%AA%E5%AF%B9%E5%BA%94%E4%BA%8E%E6%96%87%E6%A1%A3%E4%B8%AD%E5%87%BA%E7%8E%B0%E7%9A%84%E6%AF%8F%E4%B8%AA%E9%94%9A%E7%82%B9" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#anchors-%E5%AE%83%E6%98%AF%E6%AF%8F%E4%B8%AA%E9%94%9A%E7%82%B9%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%95%B0%E7%BB%84%E4%B8%80%E4%B8%AA%E5%AF%B9%E5%BA%94%E4%BA%8E%E6%96%87%E6%A1%A3%E4%B8%AD%E5%87%BA%E7%8E%B0%E7%9A%84%E6%AF%8F%E4%B8%AA%E9%94%9A%E7%82%B9" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">anchors</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span><span class="nb">document</span><span class="p">.</span><span class="nx">anchors</span><span class="p">[</span><span class="mi">1</span><span class="p">],...</span> </span></span></code></pre></div> <h4 class="relative group"><strong>applets[]:</strong> 它是 applet 对象的数组，每个 applet 对应一个出现在文档中的 applet。 <div id="applets-%E5%AE%83%E6%98%AF-applet-%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%95%B0%E7%BB%84%E6%AF%8F%E4%B8%AA-applet-%E5%AF%B9%E5%BA%94%E4%B8%80%E4%B8%AA%E5%87%BA%E7%8E%B0%E5%9C%A8%E6%96%87%E6%A1%A3%E4%B8%AD%E7%9A%84-applet" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#applets-%E5%AE%83%E6%98%AF-applet-%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%95%B0%E7%BB%84%E6%AF%8F%E4%B8%AA-applet-%E5%AF%B9%E5%BA%94%E4%B8%80%E4%B8%AA%E5%87%BA%E7%8E%B0%E5%9C%A8%E6%96%87%E6%A1%A3%E4%B8%AD%E7%9A%84-applet" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">applets</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span><span class="nb">document</span><span class="p">.</span><span class="nx">applets</span><span class="p">[</span><span class="mi">1</span><span class="p">],..</span> </span></span></code></pre></div> <h4 class="relative group"><strong>bgColor:</strong> 该属性定义文档的背景颜色。 <div id="bgcolor-%E8%AF%A5%E5%B1%9E%E6%80%A7%E5%AE%9A%E4%B9%89%E6%96%87%E6%A1%A3%E7%9A%84%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#bgcolor-%E8%AF%A5%E5%B1%9E%E6%80%A7%E5%AE%9A%E4%B9%89%E6%96%87%E6%A1%A3%E7%9A%84%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">bgColor</span> </span></span></code></pre></div> <h4 class="relative group"><strong>Cookie:</strong> 此属性定义具有特殊行为的值属性，允许设置与要查询的文档关联的 cookie。 <div id="cookie-%E6%AD%A4%E5%B1%9E%E6%80%A7%E5%AE%9A%E4%B9%89%E5%85%B7%E6%9C%89%E7%89%B9%E6%AE%8A%E8%A1%8C%E4%B8%BA%E7%9A%84%E5%80%BC%E5%B1%9E%E6%80%A7%E5%85%81%E8%AE%B8%E8%AE%BE%E7%BD%AE%E4%B8%8E%E8%A6%81%E6%9F%A5%E8%AF%A2%E7%9A%84%E6%96%87%E6%A1%A3%E5%85%B3%E8%81%94%E7%9A%84-cookie" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#cookie-%E6%AD%A4%E5%B1%9E%E6%80%A7%E5%AE%9A%E4%B9%89%E5%85%B7%E6%9C%89%E7%89%B9%E6%AE%8A%E8%A1%8C%E4%B8%BA%E7%9A%84%E5%80%BC%E5%B1%9E%E6%80%A7%E5%85%81%E8%AE%B8%E8%AE%BE%E7%BD%AE%E4%B8%8E%E8%A6%81%E6%9F%A5%E8%AF%A2%E7%9A%84%E6%96%87%E6%A1%A3%E5%85%B3%E8%81%94%E7%9A%84-cookie" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">cookie</span> </span></span></code></pre></div> <h4 class="relative group"><strong>Domain:</strong> 此属性定义文档所属的域，已用于安全目的。 <div id="domain-%E6%AD%A4%E5%B1%9E%E6%80%A7%E5%AE%9A%E4%B9%89%E6%96%87%E6%A1%A3%E6%89%80%E5%B1%9E%E7%9A%84%E5%9F%9F%E5%B7%B2%E7%94%A8%E4%BA%8E%E5%AE%89%E5%85%A8%E7%9B%AE%E7%9A%84" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#domain-%E6%AD%A4%E5%B1%9E%E6%80%A7%E5%AE%9A%E4%B9%89%E6%96%87%E6%A1%A3%E6%89%80%E5%B1%9E%E7%9A%84%E5%9F%9F%E5%B7%B2%E7%94%A8%E4%BA%8E%E5%AE%89%E5%85%A8%E7%9B%AE%E7%9A%84" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">domain</span> </span></span></code></pre></div> <h4 class="relative group"><strong>embeds[]:</strong> plugins[] 的同义词。它是表示文档中嵌入的数据的对象数组 <div id="embeds-plugins-%E7%9A%84%E5%90%8C%E4%B9%89%E8%AF%8D%E5%AE%83%E6%98%AF%E8%A1%A8%E7%A4%BA%E6%96%87%E6%A1%A3%E4%B8%AD%E5%B5%8C%E5%85%A5%E7%9A%84%E6%95%B0%E6%8D%AE%E7%9A%84%E5%AF%B9%E8%B1%A1%E6%95%B0%E7%BB%84" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#embeds-plugins-%E7%9A%84%E5%90%8C%E4%B9%89%E8%AF%8D%E5%AE%83%E6%98%AF%E8%A1%A8%E7%A4%BA%E6%96%87%E6%A1%A3%E4%B8%AD%E5%B5%8C%E5%85%A5%E7%9A%84%E6%95%B0%E6%8D%AE%E7%9A%84%E5%AF%B9%E8%B1%A1%E6%95%B0%E7%BB%84" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">embeds</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span><span class="nb">document</span><span class="p">.</span><span class="nx">embeds</span><span class="p">[</span><span class="mi">1</span><span class="p">],...</span> </span></span></code></pre></div> <h4 class="relative group"><strong>fgColor:</strong> 此属性定义文档的默认文本颜色。 <div id="fgcolor-%E6%AD%A4%E5%B1%9E%E6%80%A7%E5%AE%9A%E4%B9%89%E6%96%87%E6%A1%A3%E7%9A%84%E9%BB%98%E8%AE%A4%E6%96%87%E6%9C%AC%E9%A2%9C%E8%89%B2" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#fgcolor-%E6%AD%A4%E5%B1%9E%E6%80%A7%E5%AE%9A%E4%B9%89%E6%96%87%E6%A1%A3%E7%9A%84%E9%BB%98%E8%AE%A4%E6%96%87%E6%9C%AC%E9%A2%9C%E8%89%B2" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">fgColor</span> </span></span></code></pre></div> <h4 class="relative group"><strong>forms[]:</strong> 它是表单对象的数组，每个对象对应一个表单对象，如表单中所示。 <div id="forms-%E5%AE%83%E6%98%AF%E8%A1%A8%E5%8D%95%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%95%B0%E7%BB%84%E6%AF%8F%E4%B8%AA%E5%AF%B9%E8%B1%A1%E5%AF%B9%E5%BA%94%E4%B8%80%E4%B8%AA%E8%A1%A8%E5%8D%95%E5%AF%B9%E8%B1%A1%E5%A6%82%E8%A1%A8%E5%8D%95%E4%B8%AD%E6%89%80%E7%A4%BA" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#forms-%E5%AE%83%E6%98%AF%E8%A1%A8%E5%8D%95%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%95%B0%E7%BB%84%E6%AF%8F%E4%B8%AA%E5%AF%B9%E8%B1%A1%E5%AF%B9%E5%BA%94%E4%B8%80%E4%B8%AA%E8%A1%A8%E5%8D%95%E5%AF%B9%E8%B1%A1%E5%A6%82%E8%A1%A8%E5%8D%95%E4%B8%AD%E6%89%80%E7%A4%BA" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <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="nb">document</span><span class="p">.</span><span class="nx">forms</span><span class="p">[</span><span class="mi">1</span><span class="p">],...</span> </span></span></code></pre></div> <h4 class="relative group"><strong>images[]:</strong> 它是表单对象的数组，每个元素对应表单中出现的带有 <img> 标记的元素。 <div id="images-%E5%AE%83%E6%98%AF%E8%A1%A8%E5%8D%95%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%95%B0%E7%BB%84%E6%AF%8F%E4%B8%AA%E5%85%83%E7%B4%A0%E5%AF%B9%E5%BA%94%E8%A1%A8%E5%8D%95%E4%B8%AD%E5%87%BA%E7%8E%B0%E7%9A%84%E5%B8%A6%E6%9C%89-img-%E6%A0%87%E8%AE%B0%E7%9A%84%E5%85%83%E7%B4%A0" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#images-%E5%AE%83%E6%98%AF%E8%A1%A8%E5%8D%95%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%95%B0%E7%BB%84%E6%AF%8F%E4%B8%AA%E5%85%83%E7%B4%A0%E5%AF%B9%E5%BA%94%E8%A1%A8%E5%8D%95%E4%B8%AD%E5%87%BA%E7%8E%B0%E7%9A%84%E5%B8%A6%E6%9C%89-img-%E6%A0%87%E8%AE%B0%E7%9A%84%E5%85%83%E7%B4%A0" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">images</span><span class="p">[</span><span class="mi">0</span><span class="p">[,</span><span class="nb">document</span><span class="p">.</span><span class="nx">images</span><span class="p">[</span><span class="mi">1</span><span class="p">],...</span> </span></span></code></pre></div> <h4 class="relative group"><strong>lastModified:</strong> 此属性定义最近更新的日期。 <div id="lastmodified-%E6%AD%A4%E5%B1%9E%E6%80%A7%E5%AE%9A%E4%B9%89%E6%9C%80%E8%BF%91%E6%9B%B4%E6%96%B0%E7%9A%84%E6%97%A5%E6%9C%9F" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#lastmodified-%E6%AD%A4%E5%B1%9E%E6%80%A7%E5%AE%9A%E4%B9%89%E6%9C%80%E8%BF%91%E6%9B%B4%E6%96%B0%E7%9A%84%E6%97%A5%E6%9C%9F" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">lastModified</span> </span></span></code></pre></div> <h4 class="relative group"><strong>linkColor:</strong> 此属性定义未访问链接的颜色，它与<strong>vlinkColor</strong>相反。 <div id="linkcolor-%E6%AD%A4%E5%B1%9E%E6%80%A7%E5%AE%9A%E4%B9%89%E6%9C%AA%E8%AE%BF%E9%97%AE%E9%93%BE%E6%8E%A5%E7%9A%84%E9%A2%9C%E8%89%B2%E5%AE%83%E4%B8%8Evlinkcolor%E7%9B%B8%E5%8F%8D" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#linkcolor-%E6%AD%A4%E5%B1%9E%E6%80%A7%E5%AE%9A%E4%B9%89%E6%9C%AA%E8%AE%BF%E9%97%AE%E9%93%BE%E6%8E%A5%E7%9A%84%E9%A2%9C%E8%89%B2%E5%AE%83%E4%B8%8Evlinkcolor%E7%9B%B8%E5%8F%8D" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">linkColor</span> </span></span></code></pre></div> <h4 class="relative group"><strong>links[]:</strong> 文档链接数组。 <div id="links-%E6%96%87%E6%A1%A3%E9%93%BE%E6%8E%A5%E6%95%B0%E7%BB%84" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#links-%E6%96%87%E6%A1%A3%E9%93%BE%E6%8E%A5%E6%95%B0%E7%BB%84" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">links</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span><span class="nb">document</span><span class="p">.</span><span class="nx">links</span><span class="p">[</span><span class="mi">1</span><span class="p">],...</span> </span></span></code></pre></div> <h4 class="relative group"><strong>Location:</strong> 该属性保存文档的 URL。 <div id="location-%E8%AF%A5%E5%B1%9E%E6%80%A7%E4%BF%9D%E5%AD%98%E6%96%87%E6%A1%A3%E7%9A%84-url" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#location-%E8%AF%A5%E5%B1%9E%E6%80%A7%E4%BF%9D%E5%AD%98%E6%96%87%E6%A1%A3%E7%9A%84-url" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">location</span> </span></span></code></pre></div> <h4 class="relative group"><strong>plugins[]:</strong> 此属性是 embeds[] 的同义词。 <div id="plugins-%E6%AD%A4%E5%B1%9E%E6%80%A7%E6%98%AF-embeds-%E7%9A%84%E5%90%8C%E4%B9%89%E8%AF%8D" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#plugins-%E6%AD%A4%E5%B1%9E%E6%80%A7%E6%98%AF-embeds-%E7%9A%84%E5%90%8C%E4%B9%89%E8%AF%8D" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">plugins</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span><span class="nb">document</span><span class="p">.</span><span class="nx">plugins</span><span class="p">[</span><span class="mi">1</span><span class="p">],...</span> </span></span></code></pre></div> <h4 class="relative group"><strong>Referrer:</strong> 包含文档 URL（如果与任何文档链接）的字符串。 <div id="referrer-%E5%8C%85%E5%90%AB%E6%96%87%E6%A1%A3-url%E5%A6%82%E6%9E%9C%E4%B8%8E%E4%BB%BB%E4%BD%95%E6%96%87%E6%A1%A3%E9%93%BE%E6%8E%A5%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#referrer-%E5%8C%85%E5%90%AB%E6%96%87%E6%A1%A3-url%E5%A6%82%E6%9E%9C%E4%B8%8E%E4%BB%BB%E4%BD%95%E6%96%87%E6%A1%A3%E9%93%BE%E6%8E%A5%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">referrer</span> </span></span></code></pre></div> <h4 class="relative group"><strong>Title:</strong> <title>标签的内容。 <div id="title--title%E6%A0%87%E7%AD%BE%E7%9A%84%E5%86%85%E5%AE%B9" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#title--title%E6%A0%87%E7%AD%BE%E7%9A%84%E5%86%85%E5%AE%B9" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">title</span> </span></span></code></pre></div> <h4 class="relative group"><strong>URL:</strong> 该属性定义 URL。 <div id="url-%E8%AF%A5%E5%B1%9E%E6%80%A7%E5%AE%9A%E4%B9%89-url" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#url-%E8%AF%A5%E5%B1%9E%E6%80%A7%E5%AE%9A%E4%B9%89-url" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">URL</span> </span></span></code></pre></div> <h4 class="relative group"><strong>vlinkColor:</strong> 该属性定义访问链接（未激活）的颜色。 <div id="vlinkcolor-%E8%AF%A5%E5%B1%9E%E6%80%A7%E5%AE%9A%E4%B9%89%E8%AE%BF%E9%97%AE%E9%93%BE%E6%8E%A5%E6%9C%AA%E6%BF%80%E6%B4%BB%E7%9A%84%E9%A2%9C%E8%89%B2" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#vlinkcolor-%E8%AF%A5%E5%B1%9E%E6%80%A7%E5%AE%9A%E4%B9%89%E8%AE%BF%E9%97%AE%E9%93%BE%E6%8E%A5%E6%9C%AA%E6%BF%80%E6%B4%BB%E7%9A%84%E9%A2%9C%E8%89%B2" aria-label="锚点">#</a> </span> </h4> <pre tabindex="0"><code> document.vlinkColor </code></pre> <h2 class="relative group"><strong>旧版 DOM 中的文档方法：</strong> <div id="%E6%97%A7%E7%89%88-dom-%E4%B8%AD%E7%9A%84%E6%96%87%E6%A1%A3%E6%96%B9%E6%B3%95" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#%E6%97%A7%E7%89%88-dom-%E4%B8%AD%E7%9A%84%E6%96%87%E6%A1%A3%E6%96%B9%E6%B3%95" aria-label="锚点">#</a> </span> </h2> <h4 class="relative group"><strong>clear():</strong> 擦除文档的内容并且不返回任何内容。 <div id="clear-%E6%93%A6%E9%99%A4%E6%96%87%E6%A1%A3%E7%9A%84%E5%86%85%E5%AE%B9%E5%B9%B6%E4%B8%94%E4%B8%8D%E8%BF%94%E5%9B%9E%E4%BB%BB%E4%BD%95%E5%86%85%E5%AE%B9" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#clear-%E6%93%A6%E9%99%A4%E6%96%87%E6%A1%A3%E7%9A%84%E5%86%85%E5%AE%B9%E5%B9%B6%E4%B8%94%E4%B8%8D%E8%BF%94%E5%9B%9E%E4%BB%BB%E4%BD%95%E5%86%85%E5%AE%B9" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">clear</span><span class="p">()</span> </span></span></code></pre></div> <h4 class="relative group"><strong>close():</strong> 关闭用 open() 打开的文档。 <div id="close-%E5%85%B3%E9%97%AD%E7%94%A8-open-%E6%89%93%E5%BC%80%E7%9A%84%E6%96%87%E6%A1%A3" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#close-%E5%85%B3%E9%97%AD%E7%94%A8-open-%E6%89%93%E5%BC%80%E7%9A%84%E6%96%87%E6%A1%A3" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">close</span><span class="p">()</span> </span></span></code></pre></div> <h4 class="relative group"><strong>open():</strong> 删除现有文档内容并打开一个可以写入新文档内容的流。什么也不返回。 <div id="open-%E5%88%A0%E9%99%A4%E7%8E%B0%E6%9C%89%E6%96%87%E6%A1%A3%E5%86%85%E5%AE%B9%E5%B9%B6%E6%89%93%E5%BC%80%E4%B8%80%E4%B8%AA%E5%8F%AF%E4%BB%A5%E5%86%99%E5%85%A5%E6%96%B0%E6%96%87%E6%A1%A3%E5%86%85%E5%AE%B9%E7%9A%84%E6%B5%81%E4%BB%80%E4%B9%88%E4%B9%9F%E4%B8%8D%E8%BF%94%E5%9B%9E" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#open-%E5%88%A0%E9%99%A4%E7%8E%B0%E6%9C%89%E6%96%87%E6%A1%A3%E5%86%85%E5%AE%B9%E5%B9%B6%E6%89%93%E5%BC%80%E4%B8%80%E4%B8%AA%E5%8F%AF%E4%BB%A5%E5%86%99%E5%85%A5%E6%96%B0%E6%96%87%E6%A1%A3%E5%86%85%E5%AE%B9%E7%9A%84%E6%B5%81%E4%BB%80%E4%B9%88%E4%B9%9F%E4%B8%8D%E8%BF%94%E5%9B%9E" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">open</span><span class="p">()</span> </span></span></code></pre></div> <h4 class="relative group"><strong>write():</strong> 在文档中插入指定的字符串。 <div id="write-%E5%9C%A8%E6%96%87%E6%A1%A3%E4%B8%AD%E6%8F%92%E5%85%A5%E6%8C%87%E5%AE%9A%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#write-%E5%9C%A8%E6%96%87%E6%A1%A3%E4%B8%AD%E6%8F%92%E5%85%A5%E6%8C%87%E5%AE%9A%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">()</span> </span></span></code></pre></div> <h4 class="relative group"><strong>writeln():</strong> 与 write() 相同，但在完成附加后插入新行。 <div id="writeln-%E4%B8%8E-write-%E7%9B%B8%E5%90%8C%E4%BD%86%E5%9C%A8%E5%AE%8C%E6%88%90%E9%99%84%E5%8A%A0%E5%90%8E%E6%8F%92%E5%85%A5%E6%96%B0%E8%A1%8C" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#writeln-%E4%B8%8E-write-%E7%9B%B8%E5%90%8C%E4%BD%86%E5%9C%A8%E5%AE%8C%E6%88%90%E9%99%84%E5%8A%A0%E5%90%8E%E6%8F%92%E5%85%A5%E6%96%B0%E8%A1%8C" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">writeln</span><span class="p">()</span> </span></span></code></pre></div><p><strong>Example:</strong></p> <ul> <li>HTML</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span> </span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Legacy DOM example<span class="p"></</span><span class="nt">title</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <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></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">func1</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">title</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nx">alert</span><span class="p">(</span><span class="s2">"Document title: "</span> <span class="o">+</span> <span class="nx">a</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">func2</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">URL</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">c</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">lastModified</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">d</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">location</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s2">"Document URL: "</span> <span class="o">+</span> <span class="nx">b</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s2">"Document last modified: "</span> <span class="o">+</span> <span class="nx">c</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s2">"Document location: "</span> <span class="o">+</span> <span class="nx">d</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">func3</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">n</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">1</span><span class="p">];</span> </span></span><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s2">"Second form elements: "</span> <span class="o">+</span> <span class="nx">n</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">script</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">center</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h1</span> <span class="na">style</span><span class="o">=</span><span class="s">"color: green"</span><span class="p">></span>GeeksforGeeks<span class="p"></</span><span class="nt">h1</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">b</span><span class="p">></span>Document to try Legacy DOM elements.<span class="p"></</span><span class="nt">b</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">form</span> <span class="na">name</span><span class="o">=</span><span class="s">"form1"</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span><span class="p">></span>Section 1:<span class="p"></</span><span class="nt">p</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">name</span><span class="o">=</span><span class="s">"b1"</span> <span class="na">id</span><span class="o">=</span><span class="s">"1"</span> </span></span><span class="line"><span class="cl"> <span class="na">value</span><span class="o">=</span><span class="s">"title"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">"func1()"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> Title </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">button</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">name</span><span class="o">=</span><span class="s">"b2"</span> <span class="na">id</span><span class="o">=</span><span class="s">"2"</span> </span></span><span class="line"><span class="cl"> <span class="na">value</span><span class="o">=</span><span class="s">"INFO"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">"func2()"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> URL </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">button</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">form</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">br</span><span class="p">></span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">form</span> <span class="na">name</span><span class="o">=</span><span class="s">"form2"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> Section 2: </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">br</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">br</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">name</span><span class="o">=</span><span class="s">"bt1"</span> <span class="na">id</span><span class="o">=</span><span class="s">"1"</span> </span></span><span class="line"><span class="cl"> <span class="na">value</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">"func3()"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> Elements </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">button</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">form</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">center</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">html</span><span class="p">></span> </span></span></code></pre></div><p><strong>输出:</strong></p> <p> <figure> <img class="my-0 rounded-md" loading="lazy" src="https://demo007x-articles.oss-cn-beijing.aliyuncs.com/demo007x-articles/202310161314354.png" alt="image-20231016131443920" /> </figure> </p> <p><strong>W3C DOM:</strong> 该 DOM 遵循万维网联盟标准，其中规定：</p> <blockquote> <p>“文档对象模型是一个平台和语言中立的接口，允许程序和脚本动态访问和更新文档的内容、结构和样式。”*</p> </blockquote> <p>该模型主要关注语言中立性，以便使脚本编写和样式化文档变得容易。</p> <h2 class="relative group"><strong>W3C DOM 中的文档属性：</strong> <div id="w3c-dom-%E4%B8%AD%E7%9A%84%E6%96%87%E6%A1%A3%E5%B1%9E%E6%80%A7" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#w3c-dom-%E4%B8%AD%E7%9A%84%E6%96%87%E6%A1%A3%E5%B1%9E%E6%80%A7" aria-label="锚点">#</a> </span> </h2> <h4 class="relative group"><strong>body:</strong> 标签的内容。 <div id="body-%E6%A0%87%E7%AD%BE%E7%9A%84%E5%86%85%E5%AE%B9" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#body-%E6%A0%87%E7%AD%BE%E7%9A%84%E5%86%85%E5%AE%B9" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span> </span></span></code></pre></div> <h4 class="relative group"><strong>defaultView:</strong> 表示显示文档的窗口。 <div id="defaultview-%E8%A1%A8%E7%A4%BA%E6%98%BE%E7%A4%BA%E6%96%87%E6%A1%A3%E7%9A%84%E7%AA%97%E5%8F%A3" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#defaultview-%E8%A1%A8%E7%A4%BA%E6%98%BE%E7%A4%BA%E6%96%87%E6%A1%A3%E7%9A%84%E7%AA%97%E5%8F%A3" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">defaultView</span> </span></span></code></pre></div> <h4 class="relative group"><strong>documentElement:</strong> 对文档标签的引用。 <div id="documentelement-%E5%AF%B9%E6%96%87%E6%A1%A3%E6%A0%87%E7%AD%BE%E7%9A%84%E5%BC%95%E7%94%A8" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#documentelement-%E5%AF%B9%E6%96%87%E6%A1%A3%E6%A0%87%E7%AD%BE%E7%9A%84%E5%BC%95%E7%94%A8" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span> </span></span></code></pre></div> <h4 class="relative group"><strong>implementation:</strong> 表示 DOMImplementation 对象，该对象表示创建此文档的实现。 <div id="implementation-%E8%A1%A8%E7%A4%BA-domimplementation-%E5%AF%B9%E8%B1%A1%E8%AF%A5%E5%AF%B9%E8%B1%A1%E8%A1%A8%E7%A4%BA%E5%88%9B%E5%BB%BA%E6%AD%A4%E6%96%87%E6%A1%A3%E7%9A%84%E5%AE%9E%E7%8E%B0" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#implementation-%E8%A1%A8%E7%A4%BA-domimplementation-%E5%AF%B9%E8%B1%A1%E8%AF%A5%E5%AF%B9%E8%B1%A1%E8%A1%A8%E7%A4%BA%E5%88%9B%E5%BB%BA%E6%AD%A4%E6%96%87%E6%A1%A3%E7%9A%84%E5%AE%9E%E7%8E%B0" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">implementation</span> </span></span></code></pre></div> <h2 class="relative group"><strong>W3C DOM 中的文档方法：</strong> <div id="w3c-dom-%E4%B8%AD%E7%9A%84%E6%96%87%E6%A1%A3%E6%96%B9%E6%B3%95" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#w3c-dom-%E4%B8%AD%E7%9A%84%E6%96%87%E6%A1%A3%E6%96%B9%E6%B3%95" aria-label="锚点">#</a> </span> </h2> <h4 class="relative group"><strong>createAttribute(name_of_attr):</strong> 返回一个新创建的具有指定名称的 Attr 节点。 <div id="createattributename_of_attr-%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA%E6%96%B0%E5%88%9B%E5%BB%BA%E7%9A%84%E5%85%B7%E6%9C%89%E6%8C%87%E5%AE%9A%E5%90%8D%E7%A7%B0%E7%9A%84-attr-%E8%8A%82%E7%82%B9" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#createattributename_of_attr-%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA%E6%96%B0%E5%88%9B%E5%BB%BA%E7%9A%84%E5%85%B7%E6%9C%89%E6%8C%87%E5%AE%9A%E5%90%8D%E7%A7%B0%E7%9A%84-attr-%E8%8A%82%E7%82%B9" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">createAttribute</span><span class="p">(</span><span class="nx">name_of_attr</span><span class="p">)</span> </span></span></code></pre></div> <h4 class="relative group"><strong>createComment(text):</strong> 创建并返回一个包含指定文本的新注释节点。 <div id="createcommenttext-%E5%88%9B%E5%BB%BA%E5%B9%B6%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA%E5%8C%85%E5%90%AB%E6%8C%87%E5%AE%9A%E6%96%87%E6%9C%AC%E7%9A%84%E6%96%B0%E6%B3%A8%E9%87%8A%E8%8A%82%E7%82%B9" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#createcommenttext-%E5%88%9B%E5%BB%BA%E5%B9%B6%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA%E5%8C%85%E5%90%AB%E6%8C%87%E5%AE%9A%E6%96%87%E6%9C%AC%E7%9A%84%E6%96%B0%E6%B3%A8%E9%87%8A%E8%8A%82%E7%82%B9" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">createComment</span><span class="p">(</span><span class="nx">some_text</span><span class="p">)</span> </span></span></code></pre></div> <h4 class="relative group"><strong>createDocumentFragment():</strong> 创建并返回一个空的 DocumentFragment 节点。 <div id="createdocumentfragment-%E5%88%9B%E5%BB%BA%E5%B9%B6%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA%E7%A9%BA%E7%9A%84-documentfragment-%E8%8A%82%E7%82%B9" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#createdocumentfragment-%E5%88%9B%E5%BB%BA%E5%B9%B6%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA%E7%A9%BA%E7%9A%84-documentfragment-%E8%8A%82%E7%82%B9" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">createDocumentFragment</span><span class="p">()</span> </span></span></code></pre></div> <h4 class="relative group"><strong>createElement(tagname_of_new_ele):</strong> 创建并返回具有指定标记名的新 Element 节点。 <div id="createelementtagname_of_new_ele-%E5%88%9B%E5%BB%BA%E5%B9%B6%E8%BF%94%E5%9B%9E%E5%85%B7%E6%9C%89%E6%8C%87%E5%AE%9A%E6%A0%87%E8%AE%B0%E5%90%8D%E7%9A%84%E6%96%B0-element-%E8%8A%82%E7%82%B9" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#createelementtagname_of_new_ele-%E5%88%9B%E5%BB%BA%E5%B9%B6%E8%BF%94%E5%9B%9E%E5%85%B7%E6%9C%89%E6%8C%87%E5%AE%9A%E6%A0%87%E8%AE%B0%E5%90%8D%E7%9A%84%E6%96%B0-element-%E8%8A%82%E7%82%B9" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="nx">tagname_of_new_ele</span><span class="p">)</span> </span></span></code></pre></div> <h4 class="relative group"><strong>createTextNode(text):</strong> 创建并返回一个包含指定文本的新文本节点。 <div id="createtextnodetext-%E5%88%9B%E5%BB%BA%E5%B9%B6%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA%E5%8C%85%E5%90%AB%E6%8C%87%E5%AE%9A%E6%96%87%E6%9C%AC%E7%9A%84%E6%96%B0%E6%96%87%E6%9C%AC%E8%8A%82%E7%82%B9" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#createtextnodetext-%E5%88%9B%E5%BB%BA%E5%B9%B6%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA%E5%8C%85%E5%90%AB%E6%8C%87%E5%AE%9A%E6%96%87%E6%9C%AC%E7%9A%84%E6%96%B0%E6%96%87%E6%9C%AC%E8%8A%82%E7%82%B9" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">createTextNode</span><span class="p">(</span><span class="nx">text</span><span class="p">)</span> </span></span></code></pre></div> <h4 class="relative group"><strong>getElementById(Id):</strong> 从具有提到的 Id 的元素的文档中返回值。 <div id="getelementbyidid-%E4%BB%8E%E5%85%B7%E6%9C%89%E6%8F%90%E5%88%B0%E7%9A%84-id-%E7%9A%84%E5%85%83%E7%B4%A0%E7%9A%84%E6%96%87%E6%A1%A3%E4%B8%AD%E8%BF%94%E5%9B%9E%E5%80%BC" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#getelementbyidid-%E4%BB%8E%E5%85%B7%E6%9C%89%E6%8F%90%E5%88%B0%E7%9A%84-id-%E7%9A%84%E5%85%83%E7%B4%A0%E7%9A%84%E6%96%87%E6%A1%A3%E4%B8%AD%E8%BF%94%E5%9B%9E%E5%80%BC" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">Id</span><span class="p">)</span> </span></span></code></pre></div> <h4 class="relative group"><strong>getElementsByName(name):</strong> 从文档中返回具有指定名称的节点数组。 <div id="getelementsbynamename-%E4%BB%8E%E6%96%87%E6%A1%A3%E4%B8%AD%E8%BF%94%E5%9B%9E%E5%85%B7%E6%9C%89%E6%8C%87%E5%AE%9A%E5%90%8D%E7%A7%B0%E7%9A%84%E8%8A%82%E7%82%B9%E6%95%B0%E7%BB%84" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#getelementsbynamename-%E4%BB%8E%E6%96%87%E6%A1%A3%E4%B8%AD%E8%BF%94%E5%9B%9E%E5%85%B7%E6%9C%89%E6%8C%87%E5%AE%9A%E5%90%8D%E7%A7%B0%E7%9A%84%E8%8A%82%E7%82%B9%E6%95%B0%E7%BB%84" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByName</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> </span></span></code></pre></div> <h4 class="relative group"><strong>getElementsByTagName(tagname):</strong> 返回文档中具有指定标记名的所有元素节点的数组。 <div id="getelementsbytagnametagname-%E8%BF%94%E5%9B%9E%E6%96%87%E6%A1%A3%E4%B8%AD%E5%85%B7%E6%9C%89%E6%8C%87%E5%AE%9A%E6%A0%87%E8%AE%B0%E5%90%8D%E7%9A%84%E6%89%80%E6%9C%89%E5%85%83%E7%B4%A0%E8%8A%82%E7%82%B9%E7%9A%84%E6%95%B0%E7%BB%84" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#getelementsbytagnametagname-%E8%BF%94%E5%9B%9E%E6%96%87%E6%A1%A3%E4%B8%AD%E5%85%B7%E6%9C%89%E6%8C%87%E5%AE%9A%E6%A0%87%E8%AE%B0%E5%90%8D%E7%9A%84%E6%89%80%E6%9C%89%E5%85%83%E7%B4%A0%E8%8A%82%E7%82%B9%E7%9A%84%E6%95%B0%E7%BB%84" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="nx">tagname</span><span class="p">)</span> </span></span></code></pre></div> <h4 class="relative group"><strong>importNode(importedNode, deep):</strong> 从适合插入到此文档中的其他文档创建并返回节点的副本。如果 deep 参数为真，它也会递归地复制该节点的子节点。 <div id="importnodeimportednode-deep-%E4%BB%8E%E9%80%82%E5%90%88%E6%8F%92%E5%85%A5%E5%88%B0%E6%AD%A4%E6%96%87%E6%A1%A3%E4%B8%AD%E7%9A%84%E5%85%B6%E4%BB%96%E6%96%87%E6%A1%A3%E5%88%9B%E5%BB%BA%E5%B9%B6%E8%BF%94%E5%9B%9E%E8%8A%82%E7%82%B9%E7%9A%84%E5%89%AF%E6%9C%AC%E5%A6%82%E6%9E%9C-deep-%E5%8F%82%E6%95%B0%E4%B8%BA%E7%9C%9F%E5%AE%83%E4%B9%9F%E4%BC%9A%E9%80%92%E5%BD%92%E5%9C%B0%E5%A4%8D%E5%88%B6%E8%AF%A5%E8%8A%82%E7%82%B9%E7%9A%84%E5%AD%90%E8%8A%82%E7%82%B9" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#importnodeimportednode-deep-%E4%BB%8E%E9%80%82%E5%90%88%E6%8F%92%E5%85%A5%E5%88%B0%E6%AD%A4%E6%96%87%E6%A1%A3%E4%B8%AD%E7%9A%84%E5%85%B6%E4%BB%96%E6%96%87%E6%A1%A3%E5%88%9B%E5%BB%BA%E5%B9%B6%E8%BF%94%E5%9B%9E%E8%8A%82%E7%82%B9%E7%9A%84%E5%89%AF%E6%9C%AC%E5%A6%82%E6%9E%9C-deep-%E5%8F%82%E6%95%B0%E4%B8%BA%E7%9C%9F%E5%AE%83%E4%B9%9F%E4%BC%9A%E9%80%92%E5%BD%92%E5%9C%B0%E5%A4%8D%E5%88%B6%E8%AF%A5%E8%8A%82%E7%82%B9%E7%9A%84%E5%AD%90%E8%8A%82%E7%82%B9" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">importNode</span><span class="p">(</span><span class="nx">importedNode</span><span class="p">,</span> <span class="nx">deep</span><span class="p">)</span> </span></span></code></pre></div><p><strong>示例:</strong></p> <ul> <li>HTML</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span> </span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">title</span><span class="p">></span>W3c example<span class="p"></</span><span class="nt">title</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <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></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">hello</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">n</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'2'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s2">"Hello "</span> <span class="o">+</span> <span class="nx">n</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s2">"</br>Document body:"</span> <span class="o">+</span> <span class="nx">a</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">defaultView</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s2">"</br>Document default view: "</span> <span class="o">+</span> <span class="nx">b</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">script</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">center</span><span class="p">></span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h1</span> <span class="na">style</span><span class="o">=</span><span class="s">"color: green"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> hello demo! </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">h1</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span><span class="p">></span> </span></span><span class="line"><span class="cl"> Hello from GeeksforGeeks, this is </span></span><span class="line"><span class="cl"> an example representation. </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">p</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">form</span> <span class="na">name</span><span class="o">=</span><span class="s">"myform"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">b</span><span class="p">></span>Name:<span class="p"></</span><span class="nt">b</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">name</span><span class="o">=</span><span class="s">"name"</span> <span class="na">id</span><span class="o">=</span><span class="s">"2"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">name</span><span class="o">=</span><span class="s">"submit"</span> </span></span><span class="line"><span class="cl"> <span class="na">value</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">"hello()"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">form</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">center</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">html</span><span class="p">></span> </span></span></code></pre></div><p><strong>输出:</strong></p> <p> <figure> <img class="my-0 rounded-md" loading="lazy" src="https://demo007x-articles.oss-cn-beijing.aliyuncs.com/demo007x-articles/202310161316557.png" alt="image-20231016131600495" /> </figure> </p> <p>**3. **IE4 DOM：该DOM是在Internet Explorer版本4中引入的。</p> <p>后续版本进行了扩展并继续包含 W3C DOM 的功能。</p> <p><strong>IE4 DOM 中的文档属性：</strong></p> <h4 class="relative group">**activeElement：**指当前活动的输入元素。 <div id="activeelement%E6%8C%87%E5%BD%93%E5%89%8D%E6%B4%BB%E5%8A%A8%E7%9A%84%E8%BE%93%E5%85%A5%E5%85%83%E7%B4%A0" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#activeelement%E6%8C%87%E5%BD%93%E5%89%8D%E6%B4%BB%E5%8A%A8%E7%9A%84%E8%BE%93%E5%85%A5%E5%85%83%E7%B4%A0" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">activeElement</span> </span></span></code></pre></div> <h4 class="relative group"><strong>all[]:</strong> 文档中所有元素对象的可索引数组。 <div id="all-%E6%96%87%E6%A1%A3%E4%B8%AD%E6%89%80%E6%9C%89%E5%85%83%E7%B4%A0%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%8F%AF%E7%B4%A2%E5%BC%95%E6%95%B0%E7%BB%84" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#all-%E6%96%87%E6%A1%A3%E4%B8%AD%E6%89%80%E6%9C%89%E5%85%83%E7%B4%A0%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%8F%AF%E7%B4%A2%E5%BC%95%E6%95%B0%E7%BB%84" aria-label="锚点">#</a> </span> </h4> <pre tabindex="0"><code> document.all[] 此函数用于检查网页中是否存在特定元素，但现在已被视为已弃用， 因为它仅适用于 Internet Explorer，并且在其他浏览器中不受支持。 </code></pre> <h4 class="relative group"><strong>charset:</strong> 文档的字符集。 <div id="charset-%E6%96%87%E6%A1%A3%E7%9A%84%E5%AD%97%E7%AC%A6%E9%9B%86" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#charset-%E6%96%87%E6%A1%A3%E7%9A%84%E5%AD%97%E7%AC%A6%E9%9B%86" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">charset</span> </span></span></code></pre></div> <h4 class="relative group"><strong>children[]:</strong> 包含文档直接子级 HTML 元素的数组。 <div id="children-%E5%8C%85%E5%90%AB%E6%96%87%E6%A1%A3%E7%9B%B4%E6%8E%A5%E5%AD%90%E7%BA%A7-html-%E5%85%83%E7%B4%A0%E7%9A%84%E6%95%B0%E7%BB%84" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#children-%E5%8C%85%E5%90%AB%E6%96%87%E6%A1%A3%E7%9B%B4%E6%8E%A5%E5%AD%90%E7%BA%A7-html-%E5%85%83%E7%B4%A0%E7%9A%84%E6%95%B0%E7%BB%84" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">children</span><span class="p">[]</span> </span></span></code></pre></div> <h4 class="relative group"><strong>defaultCharset:</strong> 文档的默认字符集。 <div id="defaultcharset-%E6%96%87%E6%A1%A3%E7%9A%84%E9%BB%98%E8%AE%A4%E5%AD%97%E7%AC%A6%E9%9B%86" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#defaultcharset-%E6%96%87%E6%A1%A3%E7%9A%84%E9%BB%98%E8%AE%A4%E5%AD%97%E7%AC%A6%E9%9B%86" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">defaultCharset</span> </span></span></code></pre></div> <h4 class="relative group"><strong>expando:</strong> 当此属性设置为 false 时，它会阻止客户端对象扩展。 <div id="expando-%E5%BD%93%E6%AD%A4%E5%B1%9E%E6%80%A7%E8%AE%BE%E7%BD%AE%E4%B8%BA-false-%E6%97%B6%E5%AE%83%E4%BC%9A%E9%98%BB%E6%AD%A2%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%AF%B9%E8%B1%A1%E6%89%A9%E5%B1%95" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#expando-%E5%BD%93%E6%AD%A4%E5%B1%9E%E6%80%A7%E8%AE%BE%E7%BD%AE%E4%B8%BA-false-%E6%97%B6%E5%AE%83%E4%BC%9A%E9%98%BB%E6%AD%A2%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%AF%B9%E8%B1%A1%E6%89%A9%E5%B1%95" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">expando</span> </span></span></code></pre></div> <h4 class="relative group"><strong>parentWindow:</strong> 包含窗口的文档。 <div id="parentwindow-%E5%8C%85%E5%90%AB%E7%AA%97%E5%8F%A3%E7%9A%84%E6%96%87%E6%A1%A3" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#parentwindow-%E5%8C%85%E5%90%AB%E7%AA%97%E5%8F%A3%E7%9A%84%E6%96%87%E6%A1%A3" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">parentWindow</span> </span></span></code></pre></div> <h4 class="relative group"><strong>readyState:</strong> 指定文档的加载状态。 <div id="readystate-%E6%8C%87%E5%AE%9A%E6%96%87%E6%A1%A3%E7%9A%84%E5%8A%A0%E8%BD%BD%E7%8A%B6%E6%80%81" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#readystate-%E6%8C%87%E5%AE%9A%E6%96%87%E6%A1%A3%E7%9A%84%E5%8A%A0%E8%BD%BD%E7%8A%B6%E6%80%81" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">readyState</span> </span></span></code></pre></div> <h4 class="relative group"><strong>uninitialized:</strong> 文档尚未开始加载。 <div id="uninitialized-%E6%96%87%E6%A1%A3%E5%B0%9A%E6%9C%AA%E5%BC%80%E5%A7%8B%E5%8A%A0%E8%BD%BD" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#uninitialized-%E6%96%87%E6%A1%A3%E5%B0%9A%E6%9C%AA%E5%BC%80%E5%A7%8B%E5%8A%A0%E8%BD%BD" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">uninitialized</span> </span></span></code></pre></div> <h4 class="relative group"><strong>loading:</strong> 文档正在加载 <div id="loading-%E6%96%87%E6%A1%A3%E6%AD%A3%E5%9C%A8%E5%8A%A0%E8%BD%BD" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#loading-%E6%96%87%E6%A1%A3%E6%AD%A3%E5%9C%A8%E5%8A%A0%E8%BD%BD" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">loading</span> </span></span></code></pre></div> <h4 class="relative group"><strong>interactive:</strong> 文档已加载到足以供用户交互。 <div id="interactive-%E6%96%87%E6%A1%A3%E5%B7%B2%E5%8A%A0%E8%BD%BD%E5%88%B0%E8%B6%B3%E4%BB%A5%E4%BE%9B%E7%94%A8%E6%88%B7%E4%BA%A4%E4%BA%92" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#interactive-%E6%96%87%E6%A1%A3%E5%B7%B2%E5%8A%A0%E8%BD%BD%E5%88%B0%E8%B6%B3%E4%BB%A5%E4%BE%9B%E7%94%A8%E6%88%B7%E4%BA%A4%E4%BA%92" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">interactive</span> </span></span></code></pre></div> <h4 class="relative group"><strong>complete:</strong> 文档已加载。 <div id="complete-%E6%96%87%E6%A1%A3%E5%B7%B2%E5%8A%A0%E8%BD%BD" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#complete-%E6%96%87%E6%A1%A3%E5%B7%B2%E5%8A%A0%E8%BD%BD" aria-label="锚点">#</a> </span> </h4> <pre tabindex="0"><code> document.complete </code></pre><p><strong>IE4 DOM 中的文档方法：</strong></p> <h4 class="relative group"><strong>elementFromPoint(x,y):</strong> 返回位于指定点的元素。 <div id="elementfrompointxy-%E8%BF%94%E5%9B%9E%E4%BD%8D%E4%BA%8E%E6%8C%87%E5%AE%9A%E7%82%B9%E7%9A%84%E5%85%83%E7%B4%A0" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#elementfrompointxy-%E8%BF%94%E5%9B%9E%E4%BD%8D%E4%BA%8E%E6%8C%87%E5%AE%9A%E7%82%B9%E7%9A%84%E5%85%83%E7%B4%A0" aria-label="锚点">#</a> </span> </h4> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">elementFromPoint</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span><span class="nx">y</span><span class="p">)</span> </span></span></code></pre></div><p><strong>Example:</strong></p> <ul> <li>HTML</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span> </span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">title</span><span class="p">></span>IE4 DOM example<span class="p"></</span><span class="nt">title</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <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></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">func1</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">all</span><span class="p">[</span><span class="s2">"greetings"</span><span class="p">];</span> </span></span><span class="line"><span class="cl"> <span class="nx">alert</span><span class="p">(</span><span class="s2">"Hey, "</span> <span class="o">+</span> <span class="nx">a</span><span class="p">.</span><span class="nx">innerHTML</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="kd">function</span> <span class="nx">func2</span><span class="p">()</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">activeElement</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s2">"Active element: "</span> <span class="o">+</span> <span class="nx">b</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">script</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">center</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h1</span> <span class="na">style</span><span class="o">=</span><span class="s">"color: green"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> demo </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">h1</span><span class="p">></span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"greetings"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> Hello from GeeksforGeeks, this is </span></span><span class="line"><span class="cl"> an example representation. </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">h4</span><span class="p">></span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">form</span> <span class="na">name</span><span class="o">=</span><span class="s">"myform"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">name</span><span class="o">=</span><span class="s">"b1"</span> </span></span><span class="line"><span class="cl"> <span class="na">value</span><span class="o">=</span><span class="s">"Greet"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">"func1()"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">name</span><span class="o">=</span><span class="s">"text1"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">name</span><span class="o">=</span><span class="s">"b2"</span> </span></span><span class="line"><span class="cl"> <span class="na">onclick</span><span class="o">=</span><span class="s">"func2()"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">form</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">center</span><span class="p">></span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">html</span><span class="p">></span> </span></span></code></pre></div><p><strong>输出:</strong></p> <p> <figure> <img class="my-0 rounded-md" loading="lazy" src="https://demo007x-articles.oss-cn-beijing.aliyuncs.com/demo007x-articles/202310161310572.png" alt="image-20231016131054959" /> </figure> </p> </div> <h2 class="mt-8 text-2xl font-extrabold mb-10">相关文章</h2> <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3"> <a href="/posts/2023-javascript-%E9%9D%A2%E8%AF%95%E9%97%AE%E7%AD%94/" class="min-w-full"> <div class="min-h-full border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative"> <div class="px-6 py-4"> <div class="text-base font-medium text-neutral-600 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral" href="/posts/2023-javascript-%E9%9D%A2%E8%AF%95%E9%97%AE%E7%AD%94/">2023 JavaScript 面试题以及答案</div> <div class="text-sm text-neutral-500 dark:text-neutral-400"> <div style="cursor: default;" class="flex flex-row flex-wrap items-center"> </div> <div style="cursor: pointer;" class="flex flex-row flex-wrap items-center"> </div> <div style="cursor: pointer;" class="flex flex-row flex-wrap items-center"> <span style="margin-top:0.5rem" class="mr-2" onclick="window.open("/categories/notes/",'_self');"> <span class="flex" style="cursor: pointer;"> <span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"> Notes </span> </span> </span> <span style="margin-top:0.5rem" class="mr-2" onclick="window.open("/tags/java/",'_self');"> <span class="flex" style="cursor: pointer;"> <span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"> JAVA </span> </span> </span> <span style="margin-top:0.5rem" class="mr-2" onclick="window.open("/tags/javascript/",'_self');"> <span class="flex" style="cursor: pointer;"> <span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"> JavaScript </span> </span> </span> <span style="margin-top:0.5rem" class="mr-2" onclick="window.open("/tags/http/",'_self');"> <span class="flex" style="cursor: pointer;"> <span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"> HTTP </span> </span> </span> <span style="margin-top:0.5rem" class="mr-2" onclick="window.open("/tags/html/",'_self');"> <span class="flex" style="cursor: pointer;"> <span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"> HTML </span> </span> </span> </div> </div> <div class="py-1 prose dark:prose-invert text-ellipsis text-sm" style=" display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; "> 在本文中，您将学习面试中最常见的JavaScript面试问题和答案。在继续学习 Jav </div> </div> <div class="px-6 pt-4 pb-2"> </div> </div> </a> <a href="/posts/2023-javascript-%E9%9D%A2%E8%AF%95%E9%97%AE%E7%AD%94-%E9%AB%98%E7%BA%A7/" class="min-w-full"> <div class="min-h-full border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative"> <div class="px-6 py-4"> <div class="text-base font-medium text-neutral-600 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral" href="/posts/2023-javascript-%E9%9D%A2%E8%AF%95%E9%97%AE%E7%AD%94-%E9%AB%98%E7%BA%A7/">JavaScript 面试问答 （2023） – 高级</div> <div class="text-sm text-neutral-500 dark:text-neutral-400"> <div style="cursor: default;" class="flex flex-row flex-wrap items-center"> </div> <div style="cursor: pointer;" class="flex flex-row flex-wrap items-center"> </div> <div style="cursor: pointer;" class="flex flex-row flex-wrap items-center"> <span style="margin-top:0.5rem" class="mr-2" onclick="window.open("/categories/notes/",'_self');"> <span class="flex" style="cursor: pointer;"> <span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"> Notes </span> </span> </span> <span style="margin-top:0.5rem" class="mr-2" onclick="window.open("/tags/java/",'_self');"> <span class="flex" style="cursor: pointer;"> <span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"> JAVA </span> </span> </span> <span style="margin-top:0.5rem" class="mr-2" onclick="window.open("/tags/http/",'_self');"> <span class="flex" style="cursor: pointer;"> <span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"> HTTP </span> </span> </span> <span style="margin-top:0.5rem" class="mr-2" onclick="window.open("/tags/javascript/",'_self');"> <span class="flex" style="cursor: pointer;"> <span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"> JavaScript </span> </span> </span> <span style="margin-top:0.5rem" class="mr-2" onclick="window.open("/tags/html/",'_self');"> <span class="flex" style="cursor: pointer;"> <span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"> HTML </span> </span> </span> </div> </div> <div class="py-1 prose dark:prose-invert text-ellipsis text-sm" style=" display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; "> 在本文中，您将学习面试中最常见的JavaScript面试问题和答案。在继续学习 </div> </div> <div class="px-6 pt-4 pb-2"> </div> </div> </a> <a href="/posts/2023-javascript-%E9%9D%A2%E8%AF%95%E9%97%AE%E7%AD%94-%E4%B8%AD%E7%BA%A7/" class="min-w-full"> <div class="min-h-full border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative"> <div class="px-6 py-4"> <div class="text-base font-medium text-neutral-600 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral" href="/posts/2023-javascript-%E9%9D%A2%E8%AF%95%E9%97%AE%E7%AD%94-%E4%B8%AD%E7%BA%A7/">JavaScript 面试问答 （2023） – 中级</div> <div class="text-sm text-neutral-500 dark:text-neutral-400"> <div style="cursor: default;" class="flex flex-row flex-wrap items-center"> </div> <div style="cursor: pointer;" class="flex flex-row flex-wrap items-center"> </div> <div style="cursor: pointer;" class="flex flex-row flex-wrap items-center"> <span style="margin-top:0.5rem" class="mr-2" onclick="window.open("/categories/notes/",'_self');"> <span class="flex" style="cursor: pointer;"> <span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"> Notes </span> </span> </span> <span style="margin-top:0.5rem" class="mr-2" onclick="window.open("/tags/html/",'_self');"> <span class="flex" style="cursor: pointer;"> <span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"> HTML </span> </span> </span> <span style="margin-top:0.5rem" class="mr-2" onclick="window.open("/tags/javascript/",'_self');"> <span class="flex" style="cursor: pointer;"> <span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"> JavaScript </span> </span> </span> <span style="margin-top:0.5rem" class="mr-2" onclick="window.open("/tags/http/",'_self');"> <span class="flex" style="cursor: pointer;"> <span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"> HTTP </span> </span> </span> </div> </div> <div class="py-1 prose dark:prose-invert text-ellipsis text-sm" style=" display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; "> 在本文中，您将学习面试中最常见的JavaScript面试问题和答案。在继续学习 </div> </div> <div class="px-6 pt-4 pb-2"> </div> </div> </a> </section> </div> <script> var oid = "views_posts\/ES6 HTML DOM.md" var oid_likes = "likes_posts\/ES6 HTML DOM.md" </script> <script type="text/javascript" src="/js/page.min.b06a29d42a4ed16787978e2eee1e8c797b7698db2bc14ccee78f5c80ac566fc996190a73ad80a5e987558474b20b96fa38f7d85b405f165ff72b7b163c5ad11b.js" integrity="sha512-sGop1CpO0WeHl44u7h6MeXt2mNsrwUzO549cgKxWb8mWGQpzrYCl6YdVhHSyC5b6OPfYW0BfFl/3K3sWPFrRGw=="></script> </section> <footer class="pt-8 max-w-prose print:hidden"> <div class="pt-8"> <hr class="border-dotted border-neutral-300 dark:border-neutral-600" /> <div class="flex justify-between pt-3"> <span> <a class="flex group mr-3" href="/posts/linux-%E5%88%9D%E5%AD%A6%E8%80%85%E5%B8%B8%E7%8A%AF%E7%9A%84-7-%E4%B8%AA%E9%94%99%E8%AF%AF/"> <span class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400" >←</span > <span class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400" >→</span > <span class="flex flex-col"> <span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500 text-sm" >Linux 初学者常犯的 7 个错误</span > <span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400 hidden lg:block"> <time datetime="2023-05-10 00:00:00 +0000 UTC">2023-05-10</time> </span> </span> </a> </span> <span> <a class="flex text-right group ml-3" href="/posts/2023-%E9%9D%A2%E5%90%91%E5%BC%80%E5%8F%91%E4%BA%BA%E5%91%98%E7%9A%84-7-%E5%A4%A7%E4%BB%A3%E7%A0%81%E5%85%B1%E4%BA%AB%E7%BD%91%E7%AB%99/"> <span class="flex flex-col"> <span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500 text-sm" >2023年开发人员必须知道的10大代码网站！</span > <span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400 hidden lg:block"> <time datetime="2023-05-07 00:00:00 +0000 UTC">2023-05-07</time> </span> </span> <span class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400" >→</span > <span class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400" >←</span > </a> </span> </div> </div> </footer> </article> <div id="top-scroller" class="pointer-events-none absolute top-[110vh] bottom-0 w-12 ltr:right-0 rtl:left-0"> <a href="#the-top" class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 mb-16 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400" aria-label="返回顶部" title="返回顶部"> ↑ </a> </div> </main><footer id="site-footer" class="py-10 print:hidden"> <nav class="flex flex-row pb-4 text-base font-medium text-neutral-500 dark:text-neutral-400"> <ul class="flex flex-col list-none sm:flex-row"> <li class="flex mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"> <a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2 flex items-center" href="/tags/" title="Tags"> Tags </a> </li> <li class="flex mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"> <a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2 flex items-center" href="/categories/" title="Categories"> Categories </a> </li> </ul> </nav> <div class="flex items-center justify-between"> <p class="text-sm text-neutral-500 dark:text-neutral-400"> Copyright © demo007x’blog 2023 🤔 </p> <p class="text-xs text-neutral-500 dark:text-neutral-400"> 由 <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href="https://blowfish.page/" target="_blank" rel="noopener noreferrer">Blowfish</a> 强力驱动 </p> </div> <script> mediumZoom(document.querySelectorAll("img:not(.nozoom)"), { margin: 24, background: 'rgba(0,0,0,0.5)', scrollOffset: 0, }) </script> <script type="text/javascript" src="/js/process.min.62060bb247f4de2b6dde45903668fefb68d792f365587605177b1227c0cf43588701edaca0cb40e2c8e2789bd5ce67c1d2a215b9fb258c3496a7cd25e7cb5fdf.js" integrity="sha512-YgYLskf03itt3kWQNmj++2jXkvNlWHYFF3sSJ8DPQ1iHAe2soMtA4sjieJvVzmfB0qIVufsljDSWp80l58tf3w=="></script> </footer><div id="search-wrapper" class="invisible fixed inset-0 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh]" data-url="https://fm126.top/" style="z-index:500" > <div id="search-modal" class="flex flex-col w-full max-w-3xl min-h-0 mx-auto border rounded-md shadow-lg top-20 border-neutral-200 bg-neutral dark:border-neutral-700 dark:bg-neutral-800" > <header class="relative z-10 flex items-center justify-between flex-none px-2"> <form class="flex items-center flex-auto min-w-0"> <div class="flex items-center justify-center w-8 h-8 text-neutral-400"> <span class="relative block icon"> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg> </span> </div> <input type="search" id="search-query" class="flex flex-auto h-12 mx-1 bg-transparent appearance-none focus:outline-dotted focus:outline-2 focus:outline-transparent" placeholder="搜索" tabindex="0" /> </form> <button id="close-search-button" class="flex items-center justify-center w-8 h-8 text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400" title="关闭 (Esc)" > <span class="relative block icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </span> </button> </header> <section class="flex-auto px-2 overflow-auto"> <ul id="search-results"> </ul> </section> </div> </div> </div> </body> <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?176ca1aa520e6c86bc948c319fe0b6f9"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </html>
