JS dom2 and dom3

《JavaScript Advanced programming 》 Reading notes

DOM1 The main definition of level is HTML and XML Bottom structure of .DOM2 and DOM3 Level introduces more interaction capabilities based on this structure .

Node.isEqualNode(otherNode)

Receive a node parameter . Judge whether two nodes are equal . Same node , It means referring to the same object ; The nodes are equal , It means that the node type is the same , Have equal properties , and attributes and childNodes equal .

let div1 = document.createElement("div");
div1.setAttribute("class", "box");

let div2 = document.createElement("div");
div2.setAttribute("class", "box");

console.log(div1.isEqualNode(div2));    // true

HTMLIFrameElement.contentDocument

This attribute contains document Object pointer .

var iframeDocument = document.getElementsByTagName("iframe")[0].contentDocument;

iframeDocument.body.style.backgroundColor = "blue";

style

3 There are ways to define ： External style sheets 、 Document style sheets and element specific styles .

Access element styles

HTMLElement.style

style The attribute is CSSStyleDeclaration Instance of type . These attributes are in js In the form of hump size , except float yes js Reserved words , use cssFloat.

let myDiv = document.getElementById("myDiv");
//  Set up 
myDiv.style.backgroundColor = "red";
//  obtain 
console.log(myDiv.style.backgroundColor);

1. DOM Style properties and methods

• cssText, contain style Attribute CSS Code
• length, Applied to the element CSS Attribute quantity
• parentRule, Express CSS The information of CSSRule object
• getPropertyPriority(propertyName), If CSS attribute properName Used !important Then return to “!important”, Otherwise, an empty string is returned
• getProperty(propertyName), Return properties propertyName The string value of
• item(index), The return index is index Of CSS Property name
• removeProperty(propertyName), Remove attributes from the style CSS attribute propertyName
• setProperty(propertyName, value, priority), Set up CSS attribute propertyName The value of is value,priority yes “important” Or empty string

2. Computational style getComputedStyle

Contains style information that also affects elements inherited from other style overlays . Receive two parameters ： To get the element and pseudo element string of the calculation style . Return to one CSSStyleDeclaration object .

document.defaultView.getComputedStyle(myDiv, null);

Operation style sheet

document.styleSheets

Read-only property , Returns a CSSStyleSheet（ Express CSS Style sheets ） An array of objects .

CSSStyleSheet Properties and methods ：

• StyleSheet.disabled, return Boolean (en-US) Indicates whether the current style sheet is available .
• StyleSheet.href, read-only , return DOMString Represents the location of the style sheet .
• StyleSheet.media, read-only , A collection of supported media types
• StyleSheet.ownerNode (en-US) read-only , return Node Associate this style sheet with the current document .
• StyleSheet.parentStyleSheet (en-US) read-only , return StyleSheet If any ; return null without .
• StyleSheet.title read-only , return ownerNode Of title attribute
• StyleSheet.type (en-US) read-only , return DOMString Represents the language of the current stylesheet
• cssRules The collection of style rules contained in the current style sheet
• ownerRule If the stylesheet uses @import Imported , Then point to the import rule ; Otherwise null
• deleteRule(index) Delete... In the specified location cssRules The rules in the
• insertRule(rule, index) In the specified location item cssRule Insert rule in

Element size

1. Offset dimension

All the visual space occupied by elements on the screen

• offsetHeight
• offsetLeft
• offsetTop
• offsetWeight
• offsetParent Returns the nearest positioned parent element to the child element

 2. Client size

The space occupied by the element content and its inner margin

• clientWidth
• clientHeight

3. Rolling dimensions  

Element content scrolling distance information

• scrollHeight
• scrollLeft
• scrollTop
• scrollWidth

4. Determine element size

Element.getBoundingClientRect()： Return to one DOMRect object , It provides the size of the element and its position relative to the viewport .

Traverse

NodeIterator

Represents a traversal DOM Iterators for members of the node list in the subtree . Nodes will return in the order of documents .

let nodeIterator = document.createNodeIterator(root, whatToShow, filter);

• root, As a node traversing the root node
• whatToShow, Numerical code , Indicates which nodes should be accessed
• filter,NodeFilter Objects will function , Indicates whether to receive or skip a specific node

whatToShow Parameter is a bit mask ：

NodeFilter.SHOW_ALL	Show all nodes
NodeFilter.SHOW_ELEMENT	Element nodes
NodeFilter.SHOW_ATTRIBUTE	Attribute node
NodeFilter.SHOW_TEXT	Text node
NodeFilter.SHOW_CDATA_SECTION	CData Block node
NodeFilter.SHOW_DOCUMENT_FRAGMENT	Entity reference node
NodeFilter.SHOW_ENTITY	Entity nodes
NodeFilter.SHOW_PROCESSING_INSTRUCTION	Processing instruction node
NodeFilter.SHOW_COMMENT	Comment node
NodeFilter.SHOW_DOCUMENT	Document nodes
NodeFilter.SHOW_DOCUMENT_TYPE	Document type node
NodeFilter.SHOW_DOCUMENT_FRAGMENT	Document fragment node
NodeFilter.SHOW_NOTATION	Token node

These values except NodeFilter.SHOW_ALL outside , Can be combined . such as ：

let whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;

filter Parameters can be used to define a NodeFilter Object or a function as a node filter . The following implementation only accepts <p> Element filter ：

// NodeFilter  object 
let filter = {
    //  There's only one way 
    acceptNode(node) {
        return node.tagName.toLowerCase() == "p" ? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_SKIP;
    }
};

//  Function form 
let filter2 = funciton(node) {
    return node.tagName.toLowerCase() == "p" ? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_SKIP;
};

NodeIterator Method

• nextNode() stay DOM Take a step forward in the depth first way in the subtree
• previousNode() Step back in traversal

let div = document.getElementById("div1");
let iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, null, false);
let node = iterator.nextNode();
while(node !== null) {
    console.log(node.tagName);
    node = iterator.nextNode();
}

TreeWalker

yes NodeIterator The advanced version of . adopt createTreeWalker() Method creation , The parameters are the same as above . Method ：

• parentNode()
• firstChild()
• lastChild()
• nextSibling()
• previousSibling()
• nextNode()
• previousNode()

Node filters （filter） In addition, we have added NodeFilter.FILTER_REJECT, Indicates that the node and the entire subtree of the node are skipped .NodeFilter.FILTER_SKIP Indicates skipping nodes , Access the next node in the subtree .

There is one named currentNode attribute , Represents the last node returned during traversal .

Range

range = document.createRange();