Document: phương thức createTreeWalker()

Cú pháp

createTreeWalker(root)
createTreeWalker(root, whatToShow)
createTreeWalker(root, whatToShow, filter)

Tham số

root

Một Node đại diện cho gốc của đối tượng TreeWalker, đây là giá trị ban đầu của TreeWalker.currentNode.

whatToShow Optional

Một unsigned long đại diện cho một bitmask được tạo bằng cách kết hợp các hằng số của NodeFilter. Đây là một cách thuận tiện để lọc các loại nút cụ thể. Mặc định là 0xFFFFFFFF, đại diện cho hằng số NodeFilter.SHOW_ALL.

Hằng số	Giá trị số	Mô tả
NodeFilter.SHOW_ALL	0xFFFFFFFF	Hiển thị tất cả các nút.
NodeFilter.SHOW_ATTRIBUTE	0x2	Hiển thị các nút Attr.
NodeFilter.SHOW_CDATA_SECTION	0x8	Hiển thị các nút CDATASection.
NodeFilter.SHOW_COMMENT	0x80	Hiển thị các nút Comment.
NodeFilter.SHOW_DOCUMENT	0x100	Hiển thị các nút Document.
NodeFilter.SHOW_DOCUMENT_FRAGMENT	0x400	Hiển thị các nút DocumentFragment.
NodeFilter.SHOW_DOCUMENT_TYPE	0x200	Hiển thị các nút DocumentType.
NodeFilter.SHOW_ELEMENT	0x1	Hiển thị các nút Element.
NodeFilter.SHOW_ENTITY Deprecated	0x20	Legacy, không còn hiệu lực.
NodeFilter.SHOW_ENTITY_REFERENCE Deprecated	0x10	Legacy, không còn hiệu lực.
NodeFilter.SHOW_NOTATION Deprecated	0x800	Legacy, không còn hiệu lực.
NodeFilter.SHOW_PROCESSING_INSTRUCTION	0x40	Hiển thị các nút ProcessingInstruction.
NodeFilter.SHOW_TEXT	0x4	Hiển thị các nút Text.

Note: Hằng số NodeFilter.SHOW_ATTRIBUTE chỉ có hiệu lực khi root là một nút thuộc tính. Vì cha của bất kỳ nút Attr nào luôn là null, TreeWalker.nextNode() và TreeWalker.previousNode() sẽ không bao giờ trả về một nút Attr. Để duyệt các nút Attr, hãy sử dụng Element.attributes thay thế.

filter Optional

Một hàm callback hoặc một đối tượng có phương thức acceptNode(), trả về NodeFilter.FILTER_ACCEPT, NodeFilter.FILTER_REJECT hoặc NodeFilter.FILTER_SKIP. Hàm hoặc phương thức sẽ được gọi cho mỗi nút trong cây con dựa trên root được chấp nhận là được bao gồm bởi cờ whatToShow để xác định xem có bao gồm nó trong danh sách các nút có thể duyệt hay không:

• Nếu giá trị trả về là NodeFilter.FILTER_ACCEPT, nút này được bao gồm.
• Nếu giá trị trả về là NodeFilter.FILTER_REJECT, bất kỳ nút nào trong cây con dựa trên nút này sẽ không được bao gồm.
• Nếu giá trị trả về là NodeFilter.FILTER_SKIP, nút này không được bao gồm.

Giá trị trả về

Một đối tượng TreeWalker mới.

Ví dụ

Sử dụng whatToShow

Ví dụ này sử dụng whatToShow để chuyển đổi nội dung văn bản thành chữ hoa. Lưu ý rằng các nút văn bản của các phần tử con của phần tử #root cũng được duyệt mặc dù chúng không phải là các nút con của phần tử #root.

HTML

<div id="root">
  This is a text node.
  <span>And this is a <code>span</code> element.</span>
</div>

CSS

span {
  background-color: aqua;
}

JavaScript

const treeWalker = document.createTreeWalker(
  document.querySelector("#root"),
  NodeFilter.SHOW_TEXT,
);

while (treeWalker.nextNode()) {
  const node = treeWalker.currentNode;
  node.data = node.data.toUpperCase();
}

Kết quả

Sử dụng filter

Ví dụ này sử dụng filter để escape nội dung văn bản. Đối với bất kỳ nút văn bản nào, nội dung của nó sẽ được escape bằng encodeURI() nếu nó là phần tử con của một phần tử .escape nhưng không phải của bất kỳ phần tử .no-escape nào.

HTML

<div>
  <div>
    This is not escaped. <span class="escape">But this is escaped.</span>
  </div>
  <div class="escape">This is escaped.</div>
  <div class="no-escape">This is not escaped.</div>
</div>
<hr />
<div class="escape">
  <div>
    This is escaped. <span class="no-escape">But this is not escaped.</span>
  </div>
  <div class="no-escape">This is not escaped.</div>
</div>
<hr />
<div class="no-escape">
  <div>This is not escaped.</div>
  <div class="escape">This is not escaped.</div>
</div>

CSS

div {
  margin: 0.25em 0;
  padding: 0.25em;
}
span {
  display: inline-block;
}

.escape {
  border: dashed;
}
.no-escape {
  border: solid;
}

JavaScript

const treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  (node) =>
    node.classList.contains("no-escape")
      ? NodeFilter.FILTER_REJECT
      : node.closest(".escape")
        ? NodeFilter.FILTER_ACCEPT
        : NodeFilter.FILTER_SKIP,
);

while (treeWalker.nextNode()) {
  for (const node of treeWalker.currentNode.childNodes) {
    if (node.nodeType === Node.TEXT_NODE && /\S/.test(node.data)) {
      // Exclude whitespace-only text nodes
      node.data = encodeURI(node.data.replace(/\s+/g, " "));
    }
  }
}

Kết quả

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• TreeWalker: Giao diện liên quan