DOM（Document Object Model，\u6587\u6863\u5bf9\u8c61\u6a21\u578b）Document \u662f HTML\/XML \u6587\u6863\u5728\u5185\u5b58\u4e2d\u7684\u8868\u793a\u5f62\u5f0f，\u5b83\u662f\u6574\u4e2a DOM \u6811\u7684\u6839\u8282\u70b9，\u4e5f\u662f JavaScript \u64cd\u4f5c\u7f51\u9875\u5185\u5bb9\u7684\u4e3b\u8981\u5165\u53e3\u3002\u5f53\u6d4f\u89c8\u5668\u52a0\u8f7d\u4e00\u4e2a HTML \u9875\u9762\u65f6，\u4f1a\u89e3\u6790 HTML \u4ee3\u7801\u5e76\u6784\u5efa\u4e00\u4e2a DOM Document \u5bf9\u8c61，\u901a\u8fc7\u8fd9\u4e2a\u5bf9\u8c61，\u6211\u4eec\u53ef\u4ee5\u8bbf\u95ee\u3001\u4fee\u6539\u3001\u6dfb\u52a0\u6216\u5220\u9664\u9875\u9762\u4e0a\u7684\u4efb\u4f55\u5143\u7d20\u3002<\/p>\n
\/\/ \u83b7\u53d6\u6587\u6863\u6839\u5143\u7d20
\nconst rootElement = document.documentElement;
\nconsole.log('\u6839\u5143\u7d20\u6807\u7b7e\u540d:', rootElement.tagName); \/\/ \u8f93\u51fa: HTML<\/p>\n
\/\/ \u4fee\u6539\u6587\u6863\u6807\u9898
\ndocument.title = 'DOM Document \u5b66\u4e60\u9875\u9762';<\/p>\n
\/\/ \u83b7\u53d6 body \u5143\u7d20\u5e76\u4fee\u6539\u80cc\u666f\u8272
\ndocument.body.style.backgroundColor = '#f0f0f0';<\/p>\n
\/\/ \u901a\u8fc7 ID \u83b7\u53d6\u5143\u7d20\u5e76\u4fee\u6539\u5185\u5bb9
\nconst header = document.getElementById('main-header');
\nif (header) {
\n header.textContent = '\u6b22\u8fce\u5b66\u4e60 DOM Document';
\n header.style.color = '#333';
\n}<\/p>\n
\/\/ \u901a\u8fc7\u7c7b\u540d\u83b7\u53d6\u5143\u7d20\u96c6\u5408
\nconst paragraphs = document.getElementsByClassName('content');
\nfor (let i = 0; i < paragraphs.length; i++) {
\n paragraphs[i].style.fontSize = '16px';
\n paragraphs[i].style.lineHeight = '1.6';
\n}<\/p>\n
\/\/ \u901a\u8fc7\u6807\u7b7e\u540d\u83b7\u53d6\u5143\u7d20
\nconst allLinks = document.getElementsByTagName('a');
\nconsole.log(`\u6587\u6863\u4e2d\u5171\u6709 ${allLinks.length} \u4e2a\u94fe\u63a5`); <\/p>\n
\/\/ \u521b\u5efa\u65b0\u5143\u7d20
\nconst newDiv = document.createElement('div');
\nnewDiv.id = 'dynamic-content';
\nnewDiv.className = 'container';<\/p>\n
\/\/ \u521b\u5efa\u6587\u672c\u8282\u70b9
\nconst textNode = document.createTextNode('\u8fd9\u662f\u52a8\u6001\u521b\u5efa\u7684\u5185\u5bb9');<\/p>\n
\/\/ \u6dfb\u52a0\u6587\u672c\u5230 div
\nnewDiv.appendChild(textNode);<\/p>\n
\/\/ \u521b\u5efa\u66f4\u591a\u5185\u5bb9
\nconst paragraph = document.createElement('p');
\nparagraph.innerHTML = '\u4f7f\u7528 innerHTML \u5c5e\u6027\u53ef\u4ee5\u8bbe\u7f6e HTML \u5185\u5bb9';<\/p>\n
\/\/ \u5c06\u6bb5\u843d\u6dfb\u52a0\u5230 div
\nnewDiv.appendChild(paragraph);<\/p>\n
\/\/ \u521b\u5efa\u5217\u8868
\nconst list = document.createElement('ul');
\nconst items = ['\u7b2c\u4e00\u9879', '\u7b2c\u4e8c\u9879', '\u7b2c\u4e09\u9879'];<\/p>\n
items.forEach(itemText => {
\n const listItem = document.createElement('li');
\n listItem.textContent = itemText;
\n list.appendChild(listItem);
\n});<\/p>\n
newDiv.appendChild(list);<\/p>\n
\/\/ \u5c06\u65b0\u521b\u5efa\u7684 div \u6dfb\u52a0\u5230 body \u672b\u5c3e
\ndocument.body.appendChild(newDiv);<\/p>\n
\/\/ \u6216\u8005\u63d2\u5165\u5230\u7279\u5b9a\u4f4d\u7f6e
\nconst existingElement = document.getElementById('insert-before-me');
\nif (existingElement) {
\n document.body.insertBefore(newDiv, existingElement);
\n} <\/p>\n
\/\/ \u9009\u62e9\u7b2c\u4e00\u4e2a\u5339\u914d\u7684\u5143\u7d20
\nconst firstButton = document.querySelector('button');
\nconst firstInput = document.querySelector('input[type="text"]');
\nconst firstListItem = document.querySelector('ul li:first-child');<\/p>\n
\/\/ \u9009\u62e9\u6240\u6709\u5339\u914d\u7684\u5143\u7d20
\nconst allButtons = document.querySelectorAll('button');
\nconst allInputs = document.querySelectorAll('input');
\nconst allListItems = document.querySelectorAll('ul li');<\/p>\n
\/\/ \u590d\u6742\u9009\u62e9\u5668\u793a\u4f8b
\nconst specialDiv = document.querySelector('div.container > p.highlight');
\nconst evenRows = document.querySelectorAll('table tr:nth-child(even)');<\/p>\n
\/\/ \u904d\u5386 NodeList
\nallButtons.forEach((button, index) => {
\n button.addEventListener('click', () => {
\n console.log(`\u6309\u94ae ${index + 1} \u88ab\u70b9\u51fb`);
\n });
\n});<\/p>\n
\/\/ \u7edf\u8ba1\u5143\u7d20\u6570\u91cf
\nconsole.log(`\u6587\u6863\u4e2d\u6709 ${allButtons.length} \u4e2a\u6309\u94ae`);
\nconsole.log(`\u6587\u6863\u4e2d\u6709 ${allInputs.length} \u4e2a\u8f93\u5165\u6846`);
\nconsole.log(`\u6587\u6863\u4e2d\u6709 ${allListItems.length} \u4e2a\u5217\u8868\u9879`); <\/p>\n
\/\/ \u4e3a\u6309\u94ae\u6dfb\u52a0\u70b9\u51fb\u4e8b\u4ef6
\nconst actionButton = document.createElement('button');
\nactionButton.textContent = '\u70b9\u51fb\u6211';
\nactionButton.id = 'action-btn';<\/p>\n
actionButton.addEventListener('click', function() {
\n \/\/ \u521b\u5efa\u65b0\u5143\u7d20
\n const message = document.createElement('div');
\n message.className = 'message';
\n message.textContent = `\u6309\u94ae\u5728 ${new Date().toLocaleTimeString()} \u88ab\u70b9\u51fb`;
\n message.style.padding = '10px';
\n message.style.margin = '10px 0';
\n message.style.backgroundColor = '#e0f7fa';
\n message.style.borderRadius = '5px';<\/p>\n
\/\/ \u6dfb\u52a0\u5230\u6587\u6863
\n document.body.appendChild(message);<\/p>\n
\/\/ 3\u79d2\u540e\u79fb\u9664\u6d88\u606f
\n setTimeout(() => {
\n if (message.parentNode) {
\n message.parentNode.removeChild(message);
\n }
\n }, 3000);
\n});<\/p>\n
document.body.appendChild(actionButton);<\/p>\n
\/\/ \u8868\u5355\u5904\u7406\u793a\u4f8b
\nconst form = document.createElement('form');
\nform.id = 'user-form';<\/p>\n
const nameInput = document.createElement('input');
\nnameInput.type = 'text';
\nnameInput.placeholder = '\u8bf7\u8f93\u5165\u59d3\u540d';
\nnameInput.name = 'username';<\/p>\n
const emailInput = document.createElement('input');
\nemailInput.type = 'email';
\nemailInput.placeholder = '\u8bf7\u8f93\u5165\u90ae\u7bb1';
\nemailInput.name = 'email';<\/p>\n
const submitButton = document.createElement('button');
\nsubmitButton.type = 'submit';
\nsubmitButton.textContent = '\u63d0\u4ea4';<\/p>\n
form.appendChild(nameInput);
\nform.appendChild(document.createElement('br'));
\nform.appendChild(emailInput);
\nform.appendChild(document.createElement('br'));
\nform.appendChild(submitButton);<\/p>\n
form.addEventListener('submit', function(event) {
\n event.preventDefault(); \/\/ \u963b\u6b62\u8868\u5355\u9ed8\u8ba4\u63d0\u4ea4\u884c\u4e3a<\/p>\n
const formData = new FormData(this);
\n const data = Object.fromEntries(formData);<\/p>\n
console.log('\u8868\u5355\u6570\u636e:', data);<\/p>\n
\/\/ \u663e\u793a\u63d0\u4ea4\u7ed3\u679c
\n const resultDiv = document.createElement('div');
\n resultDiv.innerHTML = `<\/p>\n
\u63d0\u4ea4\u6210\u529f！
\n\u59d3\u540d: ${data.username || '\u672a\u586b\u5199'}
\n\u90ae\u7bb1: ${data.email || '\u672a\u586b\u5199'}<\/p>\n
`;<\/p>\n
document.body.appendChild(resultDiv);
\n});<\/p>\n
document.body.appendChild(form); <\/p>\n
\/\/ \u904d\u5386\u5143\u7d20\u7684\u6240\u6709\u5b50\u8282\u70b9
\nfunction traverseDOM(element, depth = 0) {
\n const indent = ' '.repeat(depth);
\n console.log(`${indent}${element.nodeName} – ${element.nodeType}`);<\/p>\n
\/\/ \u904d\u5386\u5b50\u8282\u70b9
\n element.childNodes.forEach(child => {
\n if (child.nodeType === Node.ELEMENT_NODE) {
\n traverseDOM(child, depth + 1);
\n } else if (child.nodeType === Node.TEXT_NODE && child.textContent.trim()) {
\n console.log(`${indent} Text: "${child.textContent.trim()}"`);
\n }
\n });
\n}<\/p>\n
\/\/ \u4ece body \u5f00\u59cb\u904d\u5386
\ntraverseDOM(document.body);<\/p>\n
\/\/ \u4fee\u6539\u5143\u7d20\u5c5e\u6027
\nconst elements = document.querySelectorAll('.editable');
\nelements.forEach(element => {
\n \/\/ \u6dfb\u52a0\u81ea\u5b9a\u4e49\u5c5e\u6027
\n element.setAttribute('data-modified', 'true');<\/p>\n
\/\/ \u4fee\u6539\u73b0\u6709\u5c5e\u6027
\n if (element.hasAttribute('title')) {
\n element.setAttribute('title', `\u4fee\u6539\u540e\u7684: ${element.getAttribute('title')}`);
\n }<\/p>\n
\/\/ \u79fb\u9664\u5c5e\u6027
\n if (element.hasAttribute('old-attr')) {
\n element.removeAttribute('old-attr');
\n }
\n});<\/p>\n
\/\/ \u514b\u9686\u5143\u7d20
\nconst original = document.getElementById('template');
\nif (original) {
\n const clone = original.cloneNode(true); \/\/ true \u8868\u793a\u6df1\u5ea6\u514b\u9686
\n clone.id = 'template-clone';
\n document.body.appendChild(clone);
\n} <\/p>\n
\/\/ \u4e0d\u597d\u7684\u505a\u6cd5：\u591a\u6b21\u4fee\u6539 DOM
\nconst list = document.getElementById('my-list');
\nfor (let i = 0; i < 100; i++) {
\n const item = document.createElement('li');
\n item.textContent = `\u9879\u76ee ${i}`;
\n list.appendChild(item); \/\/ \u6bcf\u6b21\u5faa\u73af\u90fd\u89e6\u53d1\u91cd\u6392
\n}<\/p>\n
\/\/ \u597d\u7684\u505a\u6cd5：\u4f7f\u7528\u6587\u6863\u7247\u6bb5
\nconst fragment = document.createDocumentFragment();
\nfor (let i = 0; i < 100; i++) {
\n const item = document.createElement('li');
\n item.textContent = `\u9879\u76ee ${i}`;
\n fragment.appendChild(item);
\n}
\nlist.appendChild(fragment); \/\/ \u53ea\u89e6\u53d1\u4e00\u6b21\u91cd\u6392 <\/p>\n
\/\/ \u4e0d\u597d\u7684\u505a\u6cd5：\u4e3a\u6bcf\u4e2a\u5143\u7d20\u5355\u72ec\u6dfb\u52a0\u4e8b\u4ef6\u76d1\u542c\u5668
\nconst items = document.querySelectorAll('.list-item');
\nitems.forEach(item => {
\n item.addEventListener('click', handleClick);
\n});<\/p>\n
\/\/ \u597d\u7684\u505a\u6cd5：\u4e8b\u4ef6\u59d4\u6258
\nconst listContainer = document.getElementById('list-container');
\nlistContainer.addEventListener('click', function(event) {
\n if (event.target.classList.contains('list-item')) {
\n handleClick(event);
\n }
\n});<\/p>\n
function handleClick(event) {
\n console.log('\u70b9\u51fb\u4e86:', event.target.textContent);
\n} <\/p>\n
\/\/ \u4e0d\u597d\u7684\u505a\u6cd5：\u91cd\u590d\u67e5\u8be2
\nfunction updateElements() {
\n document.querySelector('.item').style.color = 'red';
\n document.querySelector('.item').style.fontSize = '16px';
\n document.querySelector('.item').textContent = '\u66f4\u65b0\u5185\u5bb9';
\n}<\/p>\n
\/\/ \u597d\u7684\u505a\u6cd5：\u7f13\u5b58\u67e5\u8be2\u7ed3\u679c
\nfunction updateElementsOptimized() {
\n const item = document.querySelector('.item');
\n item.style.color = 'red';
\n item.style.fontSize = '16px';
\n item.textContent = '\u66f4\u65b0\u5185\u5bb9';
\n} <\/p>\n
\u867d\u7136\u73b0\u4ee3\u6d4f\u89c8\u5668\u90fd\u652f\u6301\u6807\u51c6\u7684 DOM Document API，\u4f46\u5728\u5904\u7406\u65e7\u6d4f\u89c8\u5668\u65f6\u9700\u8981\u6ce8\u610f\u517c\u5bb9\u6027\u95ee\u9898：<\/p>\n
\/\/ \u517c\u5bb9\u6027\u68c0\u67e5
\nif (document.querySelector && document.addEventListener) {
\n \/\/ \u73b0\u4ee3\u6d4f\u89c8\u5668\u652f\u6301\u7684\u7279\u6027
\n console.log('\u652f\u6301\u73b0\u4ee3 DOM API');
\n} else {
\n \/\/ \u964d\u7ea7\u65b9\u6848
\n console.log('\u4f7f\u7528\u4f20\u7edf DOM \u65b9\u6cd5');
\n}<\/p>\n
\/\/ \u6dfb\u52a0 class \u7684\u517c\u5bb9\u6027\u5199\u6cd5
\nfunction addClass(element, className) {
\n if (element.classList) {
\n element.classList.add(className);
\n } else {
\n element.className += ' ' + className;
\n }
\n}<\/p>\n
\/\/ \u4e8b\u4ef6\u76d1\u542c\u7684\u517c\u5bb9\u6027\u5199\u6cd5
\nfunction addEvent(element, event, handler) {
\n if (element.addEventListener) {
\n element.addEventListener(event, handler);
\n } else if (element.attachEvent) {
\n element.attachEvent('on' + event, handler);
\n } else {
\n element['on' + event] = handler;
\n }
\n} <\/p>\n
DOM Document \u662f\u524d\u7aef\u5f00\u53d1\u7684\u6838\u5fc3\u57fa\u7840，\u638c\u63e1\u5176 API \u548c\u6700\u4f73\u5b9e\u8df5\u5bf9\u4e8e\u6784\u5efa\u9ad8\u6548\u3001\u53ef\u7ef4\u62a4\u7684 Web \u5e94\u7528\u81f3\u5173\u91cd\u8981\u3002\u901a\u8fc7\u672c\u6587\u7684\u4ee3\u7801\u793a\u4f8b，\u4f60\u5e94\u8be5\u80fd\u591f：<\/p>\n
\u5728\u5b9e\u9645\u5f00\u53d1\u4e2d，\u5efa\u8bae\u7ed3\u5408\u73b0\u4ee3\u524d\u7aef\u6846\u67b6（\u5982 React\u3001Vue\u3001Angular）\u6765\u7ba1\u7406 DOM \u64cd\u4f5c，\u8fd9\u4e9b\u6846\u67b6\u63d0\u4f9b\u4e86\u66f4\u9ad8\u6548\u3001\u66f4\u58f0\u660e\u5f0f\u7684 DOM \u66f4\u65b0\u673a\u5236\u3002\u4f46\u5bf9\u4e8e\u7406\u89e3\u5e95\u5c42\u539f\u7406\u548c\u8fdb\u884c\u6846\u67b6\u65e0\u5173\u7684\u5f00\u53d1，\u6df1\u5165\u638c\u63e1\u539f\u751f DOM Document API \u4ecd\u7136\u662f\u6bcf\u4e2a\u524d\u7aef\u5f00\u53d1\u8005\u7684\u5fc5\u5907\u6280\u80fd\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
1. \u4ec0\u4e48\u662f DOM Document？
\nDOM（Document Object Model，\u6587\u6863\u5bf9\u8c61\u6a21\u578b）Document \u662f HTML\/XML \u6587\u6863\u5728\u5185\u5b58\u4e2d\u7684\u8868\u793a\u5f62\u5f0f，\u5b83\u662f\u6574\u4e2a DOM \u6811\u7684\u6839\u8282\u70b9，\u4e5f\u662f JavaScript \u64cd\u4f5c\u7f51\u9875\u5185\u5bb9\u7684\u4e3b\u8981\u5165\u53e3\u3002\u5f53\u6d4f\u89c8\u5668\u52a0\u8f7d\u4e00\u4e2a HTML \u9875\u9762\u65f6，\u4f1a\u89e3\u6790 HTML \u4ee3\u7801\u5e76\u6784\u5efa\u4e00\u4e2a DOM Document \u5bf9\u8c61，\u901a\u8fc7\u8fd9\u4e2a\u5bf9<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[722,187,190],"topic":[],"class_list":["post-87791","post","type-post","status-publish","format-standard","hentry","category-server","tag-ecmascript","tag-javascript","tag-190"],"yoast_head":"\n