Little Red Book Chapter 16: DOM2 and DOM3

let div = document.getElementById("div1"); 
let filter = function(node) { 
 return node.tagName.toLowerCase() == "li" ? 
 NodeFilter.FILTER_ACCEPT : 
 NodeFilter.FILTER_SKIP; 
}; 
let iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, 
 filter, false);
let node = iterator.nextNode(); 
while(node ! = =null) { 
 console.log(node.tagName); // Prints the label name
 node = iterator.nextNode(); 
}
Copy the code

In this case, traversal only outputs

The nextNode() and previousNode() methods jointly maintain the NodeIterator’s internal pointer to the DOM structure, so changes to the DOM structure are also reflected in the traversal.

TreeWalker

TreeWalker is an advanced version of NodeIterator. In addition to containing the same nextNode() and previousNode() methods, TreeWalker also adds the following methods to traverse the DOM structure in different directions.

•  parentNode(), traverses to the parentNode of the current node.
•  firstChild(), traversing to the firstChild of the current node.
•  lastChild(), traversing to the lastChild of the current node.
•  nextSibling(), traversing to the nextSibling of the current node.
•  previousSibling(), traversing to the last sibling of the current node.

TreeWalker object to call the document. CreateTreeWalker () method to create, this method takes with the document. The createNodeIterator () the same parameters: The root node as the starting point for traversal, the type of node to view, the node filter, and a Boolean value indicating whether to extend the entity reference. Because the two are similar, TreeWalker can often replace NodeIterator, for example:

let div = document.getElementById("div1"); 
let filter = function(node) { 
 return node.tagName.toLowerCase() == "li" ? 
 NodeFilter.FILTER_ACCEPT : 
 NodeFilter.FILTER_SKIP; 
};
let walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, 
 filter, false); 
let node = iterator.nextNode(); 
while(node ! = =null) { 
 console.log(node.tagName); // Prints the label name
 node = iterator.nextNode(); 
}
Copy the code

The NodeFilter can return nodefilter.filter_accept and nodefilter.filter_skip as well as nodefilter.filter_reject. When using NodeIterator, nodefilter_skip is the same as nodefilter.filter_reject. But with TreeWalker, nodefilter.filter_skip means to skip the node and access the next node in the subtree, while nodefilter.filter_reject means to skip the node and the entire subtree of the node.

For example, if the filter function in the previous example were changed to return nodefilter_reject (instead of nodefilter.filter_skip), it would result in traversal returning immediately without accessing any nodes. This is because the first element returned is

let div = document.getElementById("div1"); 
let walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null.false); 
walker.firstChild(); / / to < p >
walker.nextSibling(); / / to the < ul >
let node = walker.firstChild(); // go to first 

while(node ! = =null) { 
 console.log(node.tagName); 
 node = walker.nextSibling(); 
}
Copy the code

Because we know

Element, which is then approached via nextSibling()

Element, and then use firstChild() to reach the first
• Elements. Notice that the TreeWalker at this point only returns elements (this is because of the second argument passed to createTreeWalker()). Finally, you can access each using nextSibling()
• Element until there are no more elements, at which point the method returns NULL.

  The TreeWalker type also has an attribute named currentNode, which represents the last node returned during the traversal (regardless of the traversal method used). You can modify this property to influence the starting point of the subsequent traversal, as shown in the following example:

  let node = walker.nextNode(); 
  console.log(node === walker.currentNode); // true 
  walker.currentNode = document.body; // Modify the starting point
  Copy the code

  The TreeWalker type provides more flexibility to traverse the DOM than the NodeIterator.

  The scope of

  DOM range

  DOM2 defines a createRange() method on the Document type, exposed on the Document object. You can use this method to create a DOM scope object as follows:

  let range = document.createRange();
  Copy the code

  Like a node, this newly created scope object is associated with the document that created it and cannot be used in other documents. You can then use this scope to select a specific part of the document behind the scenes. Once you have created a scope and specified its location, you can perform some operations on the contents of the scope to achieve finer control over the underlying DOM tree.

  Each scope is an instance of type Range with corresponding properties and methods. The following properties provide information about the location of the scope in the document.

  •  startContainer, the node where the range starts (the parent of the first child in the selection).
  •  startOffset, the offset of the start of the range in startContainer. If startContainer is a text node, comment node, or CData block node, startOffset refers to the number of characters skipped before the start of the range; Otherwise, represents the index of the first node in the range.
  •  endContainer, the node where the range ends (the parent of the last child in the selection).
  •  endOffset, offset of the starting point of a range in startContainer (the same meaning as offset in startOffset).
  •  commonAncestorContainer, startContainer and endContainer are the deepest nodes in the documentation.

  These properties get values when the scope is placed at a specific location in the document.

  Simple choices

  The easiest way to select a part of a document by scope is to use the selectNode() or selectNodeContents() methods. Both methods take a node as an argument and add information about that node to the scope in which it is invoked. The selectNode() method selects the entire node, including its descendants, while selectNodeContents() selects only the descendants of the node.

  Suppose you have the following HTML:

  <! DOCTYPEhtml> 
  <html> 
   <body> 
   <p id="p1"><b>Hello</b> world!</p> 
   </body> 
  </html>
  Copy the code

  The following JavaScript code can access and create the corresponding scope:

  let range1 = document.createRange(), 
   range2 = document.createRange(), 
   p1 = document.getElementById("p1"); 
  range1.selectNode(p1); 
  range2.selectNodeContents(p1);
  Copy the code

  The two scopes in the example contain different parts of the document. Range1 contains

  Element and all of its descendants, while range2 contains the element, the text node “Hello”, and the text node “world!”

  When selectNode() is called, startContainer, endContainer, and commonAncestorContainer are all equal to the parent of the passed node. In this case, these attributes are equal to document.body. The startOffset property is equal to the index of the incoming node in its parent childNodes collection (in this case, startOffset is equal to 1, because the DOM compliance implementation treats Spaces as text nodes), EndOffset is equal to startOffset plus 1 (because only one node is selected).

  When selectNodeContents() is called, the startContainer, endContainer, and commonAncestor Container properties are the nodes passed in, in this case

  Elements. The startOffset property is always 0 because the range starts at the first child of the incoming node, and endOffset is equal to the number of children of the incoming node (node.child Nodes.length), which in this case is equal to 2.

  After selecting a node or descendant of a node as above, you can also call the corresponding method on the scope for finer control over the selection in the scope.

  • setStartBefore(refNode), set the starting point of the range torefNodeBefore, so thatrefNodeBecomes the first child of the selection. The startContainer property is set to refNode.parentNode and the startOffset property is set torefNodeIndex in the collection of its parent childNodes.
  • setStartAfter(refNode), set the starting point of the range torefNodeAnd then we’re going torefNodeThe next sibling becomes the first child of the selection by excluding it from the selection. The startContainer property is set to refNode.parentNode, and the startOffset property is set torefNodeIncrements the index in the collection of its parent childNodes by 1.
  • setEndBefore(refNode), set the end of the range torefNodeBefore, and thus willrefNodeExcluding the selection, making its previous sibling the last child of the selection. The endContainer property is set to refNode. parentNode, and the endOffset property is set torefNodeIndex in the collection of its parent childNodes.
  • setEndAfter(refNode), set the end of the range torefNodeAnd then, let’srefNodeBecomes the last child node of the selection. The endContainer property is set to refNode.parentNode, and the endOffset property is set torefNodeIncrements the index in the collection of its parent childNodes by 1.

  When these methods are called, all properties are automatically reassigned. However, it is also possible to modify the values of these attributes directly for complex selection.

  Complex choice

  To create complex scopes, use the setStart() and setEnd() methods. Both methods take two parameters: the reference node and the offset. For setStart(), the reference node becomes startContainer and the offset is assigned to startOffset. For setEnd(), the reference node becomes endContainer and the offset is assigned to the endOffset.

  With these two methods, you can simulate the behavior of selectNodes () and selectNodeContents(). Such as:

  let range1 = document.createRange(), 
   range2 = document.createRange(), 
   p1 = document.getElementById("p1"), 
   p1Index = -1, 
   i, 
   len; 
  for (i = 0, len = p1.parentNode.childNodes.length; i < len; i++) { 
   if (p1.parentNode.childNodes[i] === p1) { 
   p1Index = i; 
   break; 
   } 
  }
  range1.setStart(p1.parentNode, p1Index); 
  range1.setEnd(p1.parentNode, p1Index + 1); 
  range2.setStart(p1, 0); 
  range2.setEnd(p1, p1.childNodes.length);
  Copy the code

  Note that to select a node (using range1), you must first determine the index of the given node (P1) in its parent childNodes collection. To select the contents of the node (using range2), you don’t need to do this calculation because you can pass default values to setStart() and setEnd() directly. While you can simulate selectNodes () and selectNodeContents(), the real power of setStart() and setEnd() is to select parts of a node.

  Suppose we want to choose from the previous example by scope from “llo” in “Hello” to “world!” The “O” part of the. Quite simply, the first step is to get references to all relevant nodes, as shown in the following code:

  let p1 = document.getElementById("p1"), 
   helloNode = p1.firstChild.firstChild, 
   worldNode = p1.lastChild
  Copy the code

  The text “Hello” is actually

  Grandchild node, because it is a child node. To do this, use p1.firstChild, and use p1.firstChild.firstChild to get the text node “Hello”. The text node “World!” is

  The second (and last) child of the object, so it can be obtained using p1.lastChild. Then, create the scope and specify its boundaries as follows:

  let range = document.createRange(); 
  range.setStart(helloNode, 2); 
  range.setEnd(worldNode, 3);
  Copy the code

  Because the selection starts after the letter “e” in “Hello”, setStart() is passed helloNode and offset 2 (after “e”, “H” is 0). To set the end of the selection, we pass setEnd() worldNode and offset 3, the location of the first character that is not part of the selection, which is position 3 of “r” (position 0 is a space).

  Since helloNode and worldNode are text nodes, they become startContainer and endContainer for the scope, so startOffset and endOffset actually represent the location of the local character in each node. Not the location of the child node (as when the element node is passed in). And commonAncestorContainer is

  Element, which is the first ancestor node containing these two nodes.

  Of course, selecting only one part of the document is not particularly useful unless you can perform operations on the selected part.

  Operating range

  After the scope is created, the browser internally creates a document fragment node to contain the nodes in the scope selection. Is the content of the operation scope, the content in the selection must be well-formed. In the previous example, the scope cannot be represented in the DOM because it starts and ends inside the text node and is not an intact DOM structure. However, scopes can identify missing start and end tags, allowing you to reconstruct a valid DOM structure for subsequent operations.

  Using the scope in the previous example, the scope finds that a starting tag is missing from the selection, and dynamically fills in this tag in the background, along with the closing tag enclosing “He”. The result is to change the DOM to something like this:

  <p><b>He</b><b>llo</b> world!</p>
  Copy the code

  The first method is the easiest to understand and use: deleteContents(). As the name suggests, this method removes scoped nodes from the document. Here’s an example:

  let p1 = document.getElementById("p1"), 
   helloNode = p1.firstChild.firstChild, 
   worldNode = p1.lastChild, 
   range = document.createRange(); 
  range.setStart(helloNode, 2); 
  range.setEnd(worldNode, 3); 
  range.deleteContents();
  Copy the code

  After executing the above code, the HTML in the page would look like this:

  <p><b>He</b>rld!</p>
  Copy the code

  Because the scope selection process described earlier keeps the structure intact by modifying the underlying DOM structure, the DOM structure remains intact even after the scope is deleted.

  Another method, extractContents(), is similar to deleteContents() and also removes scoped selections from the document. The difference, however, is that the extractContents() method returns the document fragment corresponding to the scope. This allows you to insert the scoped content elsewhere in the document. Here’s an example:

  let p1 = document.getElementById("p1"), 
   helloNode = p1.firstChild.firstChild, 
   worldNode = p1.lastChild, 
   range = document.createRange();
  range.setStart(helloNode, 2); 
  range.setEnd(worldNode, 3); 
  let fragment = range.extractContents(); 
  p1.parentNode.appendChild(fragment);
  Copy the code

  This example extracts the document fragment of the scope and then adds it to the end of the document element. (Remember that when you pass a document fragment to appendChild(), only the subtree of the fragment is added, not the fragment itself.) The result should be the following HTML:

  <p><b>He</b>rld!</p> 
  <b>llo</b> wo
  Copy the code

  If you don’t want to remove the scope from the document, you can also use cloneContents() to create a copy and insert that copy elsewhere in the document. Such as:

  let p1 = document.getElementById("p1"), 
   helloNode = p1.firstChild.firstChild, 
   worldNode = p1.lastChild, 
   range = document.createRange(); 
  range.setStart(helloNode, 2); 
  range.setEnd(worldNode, 3); 
  let fragment = range.cloneContents(); 
  p1.parentNode.appendChild(fragment);
  Copy the code

  This method is similar to extractContents() in that they both return document fragments. The main difference is that the document fragment returned by cloneContents() contains copies of the nodes in the scope, rather than the actual nodes. After doing the above, the HTML page looks like this:

  <p><b>Hello</b> world!</p> 
  <b>llo</b> wo
  Copy the code

  The key thing to know at this point is that splitting a node to keep the structure intact only happens when the method above is called. Until the DOM is modified, the raw HTML remains the same.

  Scope of insert

  The previous section covered removing and copying a range. This section takes a look at inserting content into a range. Use the insertNode() method to insert a node at the beginning of a range selection. For example, suppose we want to insert the following HTML into the HTML from the previous example:

  <span style="color: red">Inserted text</span>
  Copy the code

  You can use the following code:

  let p1 = document.getElementById("p1"), 
   helloNode = p1.firstChild.firstChild, 
   worldNode = p1.lastChild, 
   range = document.createRange(); 
  range.setStart(helloNode, 2); 
  range.setEnd(worldNode, 3);
  
  let span = document.createElement("span"); 
  span.style.color = "red"; 
  span.appendChild(document.createTextNode("Inserted text")); 
  range.insertNode(span);
  Copy the code

  Running the above code yields the following HTML code:

  <p id="p1"><b>He<span style="color: red">Inserted text</span>llo</b> world</p>
  Copy the code

  Notice that it is inserted just before the “llo” in “Hello”, just before the scope selection. Also, note that the original HTML does not add or remove elements, because the method mentioned earlier is not used here. You can use this technique to insert useful information, such as a small icon next to an external link.

  In addition to inserting content into a scope, you can use the surroundContents() method to insert content that contains a scope. This method takes one parameter, the node that contains the content of the scope. When this method is called, the following is done in the background:

  (1) Extracting the contents of the scope;

  (2) Insert the given node at the position before the scope in the original document;

  (3) Add the content of the document fragment corresponding to the scope to the given node.

  This feature is good for highlighting certain keywords in a web page, such as:

  let p1 = document.getElementById("p1"), 
   helloNode = p1.firstChild.firstChild, 
   worldNode = p1.lastChild, 
   range = document.createRange();
  
  range.selectNode(helloNode); 
  let span = document.createElement("span"); 
  span.style.backgroundColor = "yellow"; 
  range.surroundContents(span);
  Copy the code

  Executing the code above highlights the text of the range selection on a yellow background. The resulting HTML looks like this:

  <p><b><span style="background-color:yellow">Hello</span></b> world!</p>
  Copy the code

  To insert elements, the scope must contain the full DOM structure. This operation will fail with an error if the range contains partially selected non-text points. Also, if the given node is of the Document, DocumentType, or DocumentFragment type, it will result in a throw error.

  The scope of folding

  If the scope does not select any part of the document, it is called collapsed. Collapsing ranges are a bit like text boxes: If there is text in a text box, you can highlight the entire text with your mouse. If you click again, the selection is removed and the cursor lands between two characters. When you fold a scope, the position is set to where the scope meets the document, either at the beginning or the end of the scope selection.

  Collapse ranges can be collapsed using the collapse() method, which accepts a single parameter: a Boolean value indicating which end of the range to collapse to. True folds to the beginning and false folds to the end. To determine whether an area has collapsed, the collapsed property can be detected:

  range.collapse(true); // Fold to the starting point
  console.log(range.collapsed); / / output true
  Copy the code

  Testing whether the scope is collapsed can help determine whether two nodes in the scope are adjacent. For example, there is the following HTML code:

  <p id="p1">Paragraph 1</p><p 
  id="p2">Paragraph 2</p>
  Copy the code

  If the structure of the tag is not known in advance (such as automatically generated tags), you can create a range like this:

  let p1 = document.getElementById("p1"), 
   p2 = document.getElementById("p2"), 
   range = document.createRange(); 
  range.setStartAfter(p1); 
  range.setStartBefore(p2); 
  console.log(range.collapsed); // true
  Copy the code

  In this case, the range created is collapsed because there is nothing after P1 and before P2.

  Scope of comparison

  If you have more than one scope, you can use the compareBoundaryPoints() method to determine whether there is a common boundary (starting or ending point) between the scopes. This method takes two parameters: the range to compare and a constant value that indicates how the comparison is performed. The constant parameters include:

  •  range.start_to_start (0), comparing the start of the two ranges;
  •  range.start_to_end (1), comparing the start of the first Range with the end of the second Range;
  •  range.end_to_end (2), comparing the ends of two ranges;
  •  range.end_to_start (3), comparing the end of the first Range with the beginning of the second Range.

  The compareBoundaryPoints() method returns -1 if the boundary point of the first range is in front of the boundary point of the second range, 0 if the boundary points of the two ranges are equal, and 1 if the boundary point of the first range is behind the boundary point of the second range. Consider the following example:

  let range1 = document.createRange(); 
  let range2 = document.createRange(); 
  let p1 = document.getElementById("p1"); 
  range1.selectNodeContents(p1); 
  range2.selectNodeContents(p1); 
  range2.setEndBefore(p1.lastChild); 
  console.log(range1.compareBoundaryPoints(Range.START_TO_START, range2)); / / 0
  console.log(range1.compareBoundaryPoints(Range.END_TO_END, range2));  / / 1
  Copy the code

  In this code, the starting points of the two ranges are equal because they are both the default values returned by selectNodeContents().

  Therefore, the method that compares the starting points of the two returns 0. However, because the end of range2 was modified using setEndBefore(), so

  The result is that the end of range1 is after the end of range2 (see Figure 16-11), resulting in the method returning 1.

  Copy the scope

  The cloneRange() method that calls the scope copies the scope. This method creates a copy of the scope on which it was called:

  let newRange = range.cloneRange();
  Copy the code

  The new scope contains the same attributes as the original scope, and modifying its boundary points does not affect the original scope.

  Clean up the

  When you’re done with the scope, it’s a good idea to call the detach() method to strip the scope from the document that created it. After detach() is called, the scope can be safely dereferenced so that the garbage collector can free up its memory. Here’s an example:

  range.detach(); // Strip the scope from the document
  range = null; // Dereference
  Copy the code

  These two steps are the most logical way to end the scope of use. The stripped range is no longer usable.