Learning the seventh day (2019-11-20)

Chapter 12 DOM2 and DOM3

DOM2 and DOM3 into many modules are separately described a highly specific subset of the DOM.

A, DOM changes

And Level 3 Level DOM2 object is to extend the DOM API, in order to meet all requirements of the XML operations, while providing better error detection capabilities and characteristics of handling. In a sense, for this purpose to a large extent it implies support for namespace. These changes are mainly in the following areas:

For changes in the XML namespace, type the following changes have been for the namespace:

1. Node Type

2. Document Type

3. Element Type

4. NamedNodeMap Type

In other parts of the DOM "DOM2 core level," also have been some changes. These changes nothing to do with XML namespaces, but more inclined to ensure the reliability and integrity of the API, are:

1. DocumentType type of change

2. Document the type of change

3. Node types of changes

4. Change of frame

Second, the style

There are three styles defined in HTML: through the <link /> element contains an external style sheet file, using <style /> element defines an inline style, and the style definitions using the style characteristics for a particular element. "DOM2 level styles" module provides a set of API around these three mechanisms to apply the style. To determine whether your browser supports the ability DOM2 CSS class definition, you can use the following code.

var supportsDOM2CSS = document.implementation.hasFeature("CSS", "2.0");

var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2", "2.0");

Style changes mainly reflected in the following aspects:

1, the access pattern elements (including): DOM style attributes and methods, the calculated pattern;

2, the operation style sheet;

3, with the style HTML elements related to how to determine the size of page elements.

Third, traversal

"And the DOM2 traversal stage" and the auxiliary module defines a completion-type sequence for two traverse the DOM structure: NodeIterator and the TreeWalker (based on depth-first search).

Use the following code can detect browser support for DOM2 level traversal capabilities.

1 var supportsTraversals = document.implementation.hasFeature("Traversal", "2.0");
2 var supportsNodeIterator = (typeof document.createNodeIterator == "function"); 
3 var supportsTreeWalker = (typeof document.createTreeWalker == "function");

1, NodeIterator

The two main methods are nextNode NodeIterator type () and previousNode (), using substantially as follows:

An example in the following HTML fragment,

<p><b>Hello</b> world!</p>

<ul>

</ul> </div>

If you want to traverse all the elements <div> element, you can use the following code:

1 var div = document.getElementById("div1");
2 var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, null, false);
3 var node = iterator.nextNode();
4 while (node !== null) {     
5      alert(node.tagName);        //输出标签名     
6      node = iterator.nextNode();
7 }

2、TreeWalker

TreeWalker is a more advanced version of NodeIterator. TreeWalker true power of being able to move in any direction in the DOM structure. Use TreeWalker traverse the DOM tree for the HTML fragment above, even without filter definitions, may acquire all <li> element, as shown in the code below.

1 var div = document.getElementById("div1");
2 var walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null, false); 
3 walker.firstChild(); //转到<p>
4 walker.nextSibling(); // 转到<ul> 
5 var node = walker.firstChild(); //转到第一个<li>
6 while (node !== null) {
7     alert(node.tagName);
8     node = walker.nextSibling();
9 }

Fourth, the scope

1, a range select a particular portion of the DOM structure, and then perform a corresponding operation means.

In the following HTML code as an example.

<! DOCTYPE HTML>
<HTML>
<body>
! <The p-the above mentioned id = "p1"> <b> the Hello </ b> world </ the p->
</ body>
</ HTML>
We can use the following code to create the range:

1 var range1 = document.createRange();
2 var range2 = document.createRange();
3 var p1 = document.getElementById("p1");
4 range1.selectNode(p1);
5 range2.selectNodeContents(p1);

2, the range of selection can be used to delete certain parts of the document, while maintaining good structural document format, or a copy of the corresponding section of the document.

3, IE8 and earlier versions do not support "DOM2 traversal level and scope" module, but it offers a specific range of text objects, it can be used to complete a simple text-based range of operation. IE9 fully supports DOM traversal.

Learning the seventh day (2019-11-20)

Guess you like