{"id":12213,"date":"2021-01-15T00:00:00","date_gmt":"2021-01-14T16:00:00","guid":{"rendered":"https:\/\/fgchen.com\/wpedu2\/2021\/01\/15\/javascript%e5%bf%ab%e9%80%9f%e5%85%a5%e9%96%80-dom-html-document-object-model\/"},"modified":"2026-03-30T14:39:23","modified_gmt":"2026-03-30T06:39:23","slug":"javascript%e5%bf%ab%e9%80%9f%e5%85%a5%e9%96%80-dom-html-document-object-model","status":"publish","type":"post","link":"https:\/\/fgchen.com\/wpedu\/2021\/01\/javascript%e5%bf%ab%e9%80%9f%e5%85%a5%e9%96%80-dom-html-document-object-model\/","title":{"rendered":"JavaScript\u5feb\u901f\u5165\u9580 – DOM (HTML Document Object Model)"},"content":{"rendered":"

DOM \u6587\u4ef6\u7269\u4ef6\u6a21\u578b<\/b><\/h1>\n\nDOM\u662fJavaScript\u5c07\u6574\u500bHTML\u6587\u4ef6\u8f49\u63db\u6210\u4e00\u500b\u4ee5document\u7269\u4ef6\u70ba\u6839\u7bc0\u9ede\u7684\u7269\u4ef6\u968e\u5c64\u6a21\u578b\u3002JavaScript\u900f\u904eDOM\u4f86\u64cd\u4f5cHTML\u6587\u4ef6\u5143\u7d20\u7684\u5167\u5bb9(\u5305\u542b\u683c\u5f0f)\uff0c\u4e5f\u5c31\u662f\u8aaa\uff0cJavaScript\u52d5\u614b\u5730\u900f\u904eDOM\u4f86\u8b8a\u66f4\u8207\u53d6\u5f97HTML\u5143\u7d20\u7684\u503c\u8207\u683c\u5f0f\uff0c\u4e5f\u53ef\u4ee5\u52d5\u614b\u5730\u5728DOM\u6a39\u4e2d\u522a\u9664\u8207\u52a0\u5165\u4e00\u500b\u7bc0\u9ede\u7269\u4ef6\uff0c\u9032\u800c\u8b8a\u66f4HTML\u6587\u4ef6\u7684\u5167\u5bb9\u3002\n\n\n\n \n\n

\u7bc0\u9ede\u5c6c\u6027\/Node Properties\u00a0<\/b><\/h2>\n\nattributes\u00a0<\/b>\n\nReturns a live collection of all attributes registered to and element\u00a0<\/span>\n\nbaseURI\u00a0<\/b>\n\nProvides the absolute base URL of an HTML element\u00a0<\/span>\n\nchildNodes\u00a0<\/b>\n\nGives a collection of an element\u2019s child nodes\u00a0<\/span>\n\nfirstChild\u00a0<\/b>\n\nReturns the first child node of an element\u00a0<\/span>\n\nlastChild\u00a0<\/b>\n\nThe last child node of an element\u00a0<\/span>\n\nnextSibling\u00a0<\/b>\n\nGives you the next node at the same node tree level\u00a0<\/span>\n\nnodeName\u00a0<\/b>\n\nReturns the name of a node\u00a0<\/span>\n\nnodeType\u00a0<\/b>\n\nReturns the type of a node\u00a0<\/span>\n\nnodeValue\u00a0<\/b>\n\nSets or returns the value of a node\u00a0<\/span>\n\nownerDocument\u00a0<\/b>\n\nThe top-level document object for this node\u00a0<\/span>\n\nparentNode\u00a0<\/b>\n\nReturns the parent node of an element\u00a0<\/span>\n\npreviousSibling\u00a0<\/b>\n\nReturns the node immediately preceding the current one\u00a0<\/span>\n\ntextContent\u00a0<\/b>\n\nSets or returns the textual content of a node and its descendants\u00a0<\/span>\n\n

\u7bc0\u9ede\u65b9\u6cd5\/Node Methods\u00a0<\/b><\/h2>\n\nappendChild()\u00a0<\/b>\n\nAdds a new child node to an element as the last child node\u00a0<\/span>\n\ncloneNode()\u00a0<\/b>\n\nClones an HTML element\u00a0<\/span>\n\ncompareDocumentPosition()\u00a0<\/b>\n\nCompares the document position of two elements\u00a0<\/span>\n\ngetFeature()\u00a0<\/b>\n\nReturns an object which implements the APIs of a specified feature\u00a0<\/span>\n\nhasAttributes()\u00a0<\/b>\n\nReturns true if an element has any attributes, otherwise false\u00a0<\/span>\n\nhasChildNodes()\u00a0<\/b>\n\nReturns true if an element has any child nodes, otherwise false\u00a0<\/span>\n\ninsertBefore()\u00a0<\/b>\n\nInserts a new child node before a specified, existing child node\u00a0<\/span>\n\nisDefaultNamespace()\u00a0<\/b>\n\nReturns true if a specified namespaceURI is the default, otherwise false\u00a0<\/span>\n\nisEqualNode()\u00a0<\/b>\n\nChecks if two elements are equal\u00a0<\/span>\n\nisSameNode()\u00a0<\/b>\n\nChecks if two elements are the same node\u00a0<\/span>\n\nisSupported()\u00a0<\/b>\n\nReturns true if a specified feature is supported on the element\u00a0<\/span>\n\nlookupNamespaceURI()\u00a0<\/b>\n\nReturns the namespaceURI associated with a given node\u00a0<\/span>\n\nlookupPrefix()\u00a0<\/b>\n\nReturns a DOMString containing the prefix for a given namespaceURI, if present\u00a0<\/span>\n\nnormalize()\u00a0<\/b>\n\nJoins adjacent text nodes and removes empty text nodes in an element\u00a0<\/span>\n\nremoveChild()\u00a0<\/b>\n\nRemoves a child node from an element\u00a0<\/span>\n\nreplaceChild()\u00a0<\/b>\n\nReplaces a child node in an element\u00a0<\/span>\n\n

\u5143\u7d20\u65b9\u6cd5\/Element Methods\u00a0<\/b><\/h2>\n\ngetAttribute()\u00a0<\/b>\n\n\u56de\u50b3\u4e00\u500b\u5143\u7d20\u7bc0\u9ede\u7684\u6307\u5b9a\u5c6c\u6027\u7684\u503c\u3002\u4f8b\uff1a<\/span>\n\n
\/\/\u53d6\u5f97HTML\u6587\u4ef6\u4e2d\u7b2c1\u500bH1\u6a19\u7c64\u5143\u7d20\u7684class\u5c6c\u6027\u503c\uff0c\u82e5HTML\u6587\u4ef6\u4e2d\u7b2c1\u500bH1\u6a19\u7c64\u5b9a\u7fa9\u5982\u4e0b\uff1a\n\/\/<H1 class=\"color font\">\n\/\/\u4e0b\u9762\u6558\u8ff0x\u503c\u70ba\"color font\"\nvar x = document.getElementsByTagName(\"H1\")[0].getAttribute(\"class\");\nconsole.log(x);\n\/\/\u8f38\u51fa \"color font\"\n<\/pre>\n\n \n\ngetAttributeNode()\u00a0<\/b>\n\nGets the specified attribute node\u00a0<\/span>\n\ngetElementsByTagName()\u00a0<\/b>\n\nProvides a collection of all child elements with the specified tag name\u00a0<\/span>\n\nhasAttribute()\u00a0<\/b>\n\nReturns true if an element has any attributes, otherwise false\u00a0<\/span>\n\nremoveAttribute()\u00a0<\/b>\n\nRemoves a specified attribute from an element\u00a0<\/span>\n\nremoveAttributeNode()\u00a0<\/b>\n\nTakes away a specified attribute node and returns the removed node\u00a0<\/span>\n\nsetAttribute()\u00a0<\/b>\n\nSets or changes the specified attribute to a specified value\u00a0<\/span>\n\nsetAttributeNode()\u00a0<\/b>\n\nSets or changes the specified attribute node\u00a0<\/span>\n\n ","protected":false},"excerpt":{"rendered":"
DOM \u6587\u4ef6\u7269\u4ef6\u6a21\u578b DOM\u662fJavaScript\u5c07\u6574\u500bHTML\u6587\u4ef6\u8f49\u63db\u6210\u4e00\u500b\u4ee5 … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[266],"tags":[],"class_list":["post-12213","post","type-post","status-publish","format-standard","hentry","category-266"],"_links":{"self":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/12213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/comments?post=12213"}],"version-history":[{"count":1,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/12213\/revisions"}],"predecessor-version":[{"id":13260,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/12213\/revisions\/13260"}],"wp:attachment":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/media?parent=12213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/categories?post=12213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/tags?post=12213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}