Professional JavaScript for We…-欢欢的记录

Professional JavaScript for Web Developers 第四版学习笔记 CHAPTER 16:DOM Levels 2 and 3

欢欢发表于 2021-8-28 08:30

DOM Changes 564
XML Namespaces 564
Changes to Node 566
Changes to Document 567
Changes to Element 567
Changes to NamedNodeMap 568
Other Changes 568
Changes to DocumentType 568
Changes to Document 569
Changes to Node 570
Changes to iframes 571
Styles 572
Accessing Element Styles 572
DOM Style Properties and Methods 573
Computed Styles 575
Working with Style Sheets 576
CSS Rules 577
Creating Rules 578
Deleting Rules 579
Element Dimensions 579
Offset Dimensions 579
Client Dimensions 581
Scroll Dimensions 582
Determining Element Dimensions 584
Traversals 584
NodeIterator 585
TreeWalker 588
Ranges 590
Ranges in the DOM 590
Simple Selection in DOM Ranges 591
Complex Selection in DOM Ranges 592
Interacting with DOM Range Content 593
Inserting DOM Range Content 596
Collapsing a DOM Range 597
Comparing DOM Ranges 597
Cloning DOM Ranges 598
Cleanup 598
Summary 599

这一章似曾相识，主要是介绍XML的拓展，下面这段由于语法优美，我还整段背诵过。

The interesting problem with a document such as this is what happens when a method is called on the document to interact with nodes in the document. When a new element is created, which namespace does it belong to? When querying for a specific tag name, what namespaces should be included in the results? DOM Level 2 Core answers these questions by providing namespace-specific versions of most DOM Level 1 methods.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example XHTML page</title>
</head>
<body>
<s:svg xmlns:s="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" style="width:100%; height:100%">
<s:rect x="0" y="0" width="100" height="100" style="fill:red" />
</s:svg>
</body>
</html>

------------------------------------------------------

let newNode = document.importNode(oldNode, true); // import node and all children
document.body.appendChild(newNode);

let parentWindow = document.defaultView || document.parentWindow;

let doc = document.implementation.createDocument("", "root", null);

let doctype = document.implementation.createDocumentType("html", "-// W3C// DTD XHTML 1.0 Strict// EN","http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd");

let doc = document.implementation.createDocument("http://www.w3.org/1999/xhtml","html", doctype);

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

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

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

contentDocument,contentWindow

--------------------------------------------------------

document.styleSheets

let sheet = document.styleSheets[0];
let rules = sheet.cssRules || sheet.rules; // get rules list
let rule = rules[0]; // get first rule
console.log(rule.selectorText); // "div.box"
console.log(rule.style.cssText); // complete CSS code
console.log(rule.style.backgroundColor); // "blue"
console.log(rule.style.width); // "100px"
console.log(rule.style.height); // "200px"

可以通过这个属性，对非行内的样式表进行精细化控制。

-------------------------------------------------

let filter = function(node) {
return node.tagName.toLowerCase() == "p" ?
NodeFilter.FILTER_ACCEPT :
NodeFilter.FILTER_SKIP;
};
let iterator = document.createNodeIterator(root, NodeFilter.SHOW_ELEMENT,
filter, false);

--------------------------------

let div = document.getElementById("div1");
let walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null, false);

walker.firstChild(); // go to <p>
walker.nextSibling(); // go to <ul>
let node = walker.firstChild(); // go to first <li>
while (node !== null) {
console.log(node.tagName);
node = walker.nextSibling();
}

-----------------------------------------------------------

setStart() ， setEnd()， deleteContents()， extractContents()，cloneContents()，insertNode()，surroundContents()，collapse()，collapsed，compareBoundaryPoints()，cloneRange()，detach()

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);