Range: thuộc tính commonAncestorContainer

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Thuộc tính chỉ đọc Range.commonAncestorContainer trả về Node sâu nhất, tức nằm thấp nhất trong cây tài liệu, chứa cả hai điểm biên của Range. Điều này có nghĩa là nếu startContainer và endContainer cùng trỏ tới một nút, thì nút đó là common ancestor container.

Vì một Range không nhất thiết phải liên tục, và cũng có thể chỉ chọn một phần các nút, đây là một cách tiện dụng để tìm một Node bao quanh Range.

Thuộc tính này chỉ đọc. Để thay đổi ancestor container của một Node, hãy cân nhắc dùng các phương thức khác nhau để đặt vị trí bắt đầu và kết thúc của Range, chẳng hạn Range.setStart() và Range.setEnd().

<ul>
  <li>
    Strings
    <ul>
      <li>Cello</li>
      <li>
        Violin
        <ul>
          <li>First Chair</li>
          <li>Second Chair</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    Woodwinds
    <ul>
      <li>Clarinet</li>
      <li>Oboe</li>
    </ul>
  </li>
</ul>

CSS

Lớp .highlight được tạo bên dưới sử dụng một tập hợp CSS @keyframes để tạo hiệu ứng viền mờ dần.

css

.highlight {
  animation: highlight linear 1s;
}

@keyframes highlight {
  from {
    outline: 1px solid red;
  }
  to {
    outline: 1px solid transparent;
  }
}

body {
  padding: 1px;
}

JavaScript

document.addEventListener("pointerup", (e) => {
  const selection = window.getSelection();

  if (selection.type === "Range") {
    for (let i = 0; i < selection.rangeCount; i++) {
      const range = selection.getRangeAt(i);
      playAnimation(range.commonAncestorContainer);
    }
  }
});

function playAnimation(el) {
  if (el.nodeType === Node.TEXT_NODE) {
    el = el.parentNode;
  }

  el.classList.remove("highlight");
  setTimeout(() => {
    el.classList.add("highlight");
  }, 0);
}