const element = document.getElementById('myElement');

// 獲取HTML內(nèi)容
const content = element.innerHTML;
console.log(content); // 輸出元素內(nèi)的所有HTML字符串

// 設(shè)置HTML內(nèi)容
element.innerHTML = '<strong>新內(nèi)容</strong> <em>包含HTML標(biāo)簽</em>';

// 追加內(nèi)容
element.innerHTML += ' 追加的內(nèi)容';

// 獲取純文本內(nèi)容（忽略所有HTML標(biāo)簽）
const text = element.textContent;

// 設(shè)置純文本內(nèi)容（HTML標(biāo)簽會(huì)被轉(zhuǎn)義顯示）
element.textContent = '<strong>這段代碼會(huì)原樣顯示</strong>';

const text = element.innerText;

const input = document.querySelector('input[type="text"]');

// 獲取值
const inputValue = input.value;

// 設(shè)置值
input.value = '新的輸入值';

const textarea = document.querySelector('textarea');
textarea.value = '多行文本內(nèi)容';

const select = document.querySelector('select');

// 獲取選中值
const selectedValue = select.value;

// 設(shè)置選中值
select.value = 'option2';

// 獲取選中項(xiàng)
const selectedOption = select.options[select.selectedIndex];

const checkbox = document.querySelector('input[type="checkbox"]');

// 獲取選中狀態(tài)
const isChecked = checkbox.checked;

// 設(shè)置選中狀態(tài)
checkbox.checked = true;

const fragment = document.createDocumentFragment();

for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `項(xiàng)目 ${i}`;
  fragment.appendChild(li);
}

document.getElementById('list').appendChild(fragment);

const user = { name: '張三', age: 30 };

element.innerHTML = `
  <div class="user-card">
    <h2>${user.name}</h2>
    <p>年齡: ${user.age}</p>
    <p>注冊(cè)時(shí)間: ${new Date().toLocaleDateString()}</p>
  </div>
`;

element.insertAdjacentHTML('beforebegin', '<p>在元素前插入</p>');
element.insertAdjacentHTML('afterbegin', '<p>在元素內(nèi)開頭插入</p>');
element.insertAdjacentHTML('beforeend', '<p>在元素內(nèi)末尾插入</p>');
element.insertAdjacentHTML('afterend', '<p>在元素后插入</p>');

// 多次操作DOM
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  document.body.appendChild(div);
}

// 單次操作DOM
const container = document.createElement('div');
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  container.appendChild(div);
}
document.body.appendChild(container);

// 而不是為每個(gè)元素添加監(jiān)聽器
document.getElementById('list').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    e.target.textContent = '已點(diǎn)擊';
  }
});

function updateContent() {
  element.textContent = new Date().toLocaleTimeString();
  requestAnimationFrame(updateContent);
}

requestAnimationFrame(updateContent);

element.innerHTML = userProvidedContent; // 可能包含惡意腳本

// 使用textContent
element.textContent = userProvidedContent;

// 或轉(zhuǎn)義HTML
function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

element.innerHTML = escapeHtml(userProvidedContent);

const clean = DOMPurify.sanitize(userProvidedContent);
element.innerHTML = clean;

if (window.trustedTypes && window.trustedTypes.createPolicy) {
  const escapePolicy = trustedTypes.createPolicy('myEscapePolicy', {
    createHTML: string => string.replace(/</g, '&lt;')
  });
  element.innerHTML = escapePolicy.createHTML(userProvidedContent);
}

function MyComponent() {
  const [content, setContent] = useState('初始內(nèi)容');

  return (
    <div>
      <div dangerouslySetInnerHTML={{__html: sanitizedContent}} />
      <button onClick={() => setContent('新內(nèi)容')}>更新</button>
    </div>
  );
}

<template>
  <div v-html="sanitizedContent"></div>
  <button @click="content = '新內(nèi)容'">更新</button>
</template>

<script>
export default {
  data() {
    return {
      content: '初始內(nèi)容'
    }
  },
  computed: {
    sanitizedContent() {
      // 在這里實(shí)現(xiàn)凈化邏輯
      return this.content;
    }
  }
}
</script>