javascript 高级程序设计 10-12 about shared

[ycshill]

DOM

Node类型

• 12种节点

  • Node.ELEMENT_NODE(1);
  • Node.ATTRIBUTE_NODE(2);
  • Node.TEXT_NODE(3);
  • Node.CDATA_SECTION_NODE(4);
  • Node.ENTITY_REFERENCE_NODE(5);
  • Node.ENTITY_NODE(6);
  • Node.PROCESSING_INSTRUCTION_NODE(7);
  • Node.COMMENT_NODE(8);
  • Node.DOCUMENT_NODE(9);
  • Node.DOCUMENT_TYPE_NODE(10);
  • Node.DOCUMENT_FRAGMENT_NODE(11);
  • Node.NOTATION_NODE(12)。

• 属性

  • nodeName
  • nodeValue

• 节点关系

  • ownerDocument ：指向文档节点；

  

• 操作节点

  • 添加节点someNode.appendChild(newNode)： 添加节点后，childNodes 的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。更新完成后，appendChild() 返回新增的节点
  • 添加节点-returnedNode = someNode.insertBefore(newNode, referNode) ： 返回插入节点
  • 替换节点：var returnedNode = someNode.replaceChild(newNode, oldNode) ： 在使用 replaceChild()插入一个节点时，该节点的所有关系指针都会从被它替换的节点复制过 来。尽管从技术上讲，被替换的节点仍然还在文档中，但它在文档中已经没有了自己的位置；
  • 移除节点：someNode.removeChild(oldNode): 通过 removeChild()移除的节点仍然为文档所有，只不过在 文档中已经没有了自己的位置。
  • 复制节点：myList.cloneNode(flag); flag 为true是深拷贝，false是浅拷贝；
  • normalize(): 找到了 空文本节点，则删除它;如果找到相邻的文本节点，则将它们合并为一个文本节点

[ycshill]

Document 类型

• 表示文档， 在浏览器中， document 对象是HTMLDocument 的一个实例，表示整个 HTML 页面，并且是window 对象的一个属性。
• 文档 的子节点
  • 其子节点可能是一个 DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或 Comment。
  • documentElement : 取得html的引用；
  • body
  • doctype : 取得对<!DOCTYPE>的引用
• 文档信息
• title
• url
• domain : 页面的域名，可以设置，但是必须包含在 url中。
• referrer : 来源页面的url
• 查找元素
  • getElementById()
  • getElementsByTagName()
  • getElementByName()
  • forms
  • images
  • links
  • nameItem
• DOM 一致性检测
  • 一般配合能力检测
  • var hasXmlDom = document.implementation.hasFeature("XML", "1.0")，两个参数一个是功能，一个是版本；
• 文档写入
  • write(), writeln()
  • open(),close() : 打开/挂关闭网页的输出流

[ycshill]

Element类型

• 属性
  • id、title、lang、dir、className
  • getAttribute/ setAttribute/removeAttribute: 获取和设置特性
• 创建
• createElement

[ycshill]

Text 类型

• appendData(text)
• deleteData(offset, count):从 offset 指定的位置开始删除 count 个字符。
• insertData(offset, text):在 offset 指定的位置插入 text。
• replaceData(offset, count, text):用 text 替换从 offset 指定的位置开始到 offset+count 为止处的文本。
• splitText(offset):从 offset 指定的位置将当前文本节点分成两个文本节点。
• substringData(offset, count):提取从 offset 指定的位置开始到 offset+count 为止
  处的字符串。
• createTextNode("Hello world!");

[ycshill]

Comment类型

• 注释在 DOM 中是通过 Comment 类型来表示的。
• 创建文本： document.createComment("A comment ")

[ycshill]

DOM操作

动态脚本

function loadScriptString(code){
var script = document.createElement("script"); script.type = "text/javascript";
try {
script.appendChild(document.createTextNode(code)); } catch (ex){
script.text = code; }
document.body.appendChild(script); }

动态加载样式

function loadStyles(url){
var link = document.createElement("link");
 link.rel = "stylesheet";
 link.type = "text/css";
 link.href = url;
 var head = document.getElementsByTagName("head")[0]; head.appendChild(link);
}

[ycshill]

DocumentFragment类型

• 就像react的fragment

var fragment = document.createDocumentFragment(); var ul = document.getElementById("myList");
var li = null;
for (var i=0; i < 3; i++){
li = document.createElement("li"); li.appendChild(document.createTextNode("Item " + (i+1))); fragment.appendChild(li);
} ul.appendChild(fragment);

[ycshill]

DOM的操作技术

动态添加脚本

function loadScriptString(code){
var script = document.createElement("script"); script.type = "text/javascript";
try {
script.appendChild(document.createTextNode(code)); } catch (ex){
script.text = code; }
document.body.appendChild(script); }
下面是调用这个函数的示例:
loadScriptString("function sayHi(){alert('hi');}");

动态样式

var style = document.createElement("style");
style.type = "text/css"; style.appendChild(document.createTextNode("body{background-color:red}")); var head = document.getElementsByTagName("head")[0]; head.appendChild(style);

操作表格

   var table = document.createElement('table');
   table.border = 1;
   table.width = '100%';

   var tbody = document.createElement('tbody');
   table.appendChild(tbody);

   tbody.insertRow(0);
   tbody.rows[0].insertCell(0);
   tbody.rows[0].cells[0].appendChild(document.createTextNode('cell 1,1'));

   document.body.appendChild(table);

nodeList

• 是动态的，每当文档结构发生变化，它们也会得到更新；

var divs = document.getElementsByTagName("div"), i,
len, div;
for (i=0, len=divs.length; i < len; i++){
div = document.createElement("div");
document.body.appendChild(div);

div.length 被存下来了，否则会无限循环

[ycshill]

DOM中的重点

一个浏览器是如何工作的

https://juejin.im/post/5de0e4dfe51d45359c14e1af
https://juejin.im/post/5de0e4dfe51d45359c14e1af

重排（回流）和重绘

https://xingorg1.github.io/xingorg1Note/webNote/js/performance-dom.html#_8%E3%80%81%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E4%BC%9A%E5%BC%95%E5%8F%91%E9%87%8D%E7%BB%98%EF%BC%9F
https://www.cnblogs.com/ziyoublog/p/9989797.html

[ycshill]

DOM 扩展

• 有些不懂？？？
  Selectors API(www.w3.org/TR/selectors-api/)是由 W3C 发起制定的一个标准，致力于让浏览器原 生支持 CSS 查询。所有实现这一功能的 JavaScript 库都会写一个基础的 CSS 解析器，然后再使用已有的 DOM 方法查询文档并找到匹配的节点。尽管库开发人员在不知疲倦地改进这一过程的性能，但到头来 都只能通过运行 JavaScript 代码来完成查询操作。而把这个功能变成原生 API 之后，解析和树查询操作 可以在浏览器内部通过编译后的代码来完成，极大地改善了性能。

API

• querySelector(param) : param 为一个css选择符，返回与该模式匹配的第一个元素或null；

• querySelectorAll(param) : 返回一个Nodelist 集合，底层实现则类似于一组元素 的快照，而非不断对文档进行搜索的动态查询；

• 忽略文本节点和注释的属性

  • childElementCount 返回子元素的个数
  • firstElementChild 指向第一个子元素
  • lastElementChild 指向最后一个子元素
  • previousElementSibling 指向上一个同辈元素
  • nextElementSibling 指向最后一个同辈元素

• classList

  • 返回一个class 的list集合
  • 包含4个方法
    • add(value) : 将给定字符串添加到列表中，如果有，则不添加；
    • contains(value)
    • remove(value)
    • toggle(value) : 如果列表中存在指定的值，就删除；否则，添加

• activeElement : 刚加载完成，指向 document.body 或者指向 已经获取焦点的元素

• hasFocus() : 确定文档是否获取焦点；

• readyState : 文档的加载状态

  • loading : 正在加载文档
  • complete : 已经加载完文档

• compatMode : 兼容模式

  • CSS1Compat : 标准模式
  • BackCompat ： 混杂模式

• charset : 文档中实际使用的字符集

• 自定义数据属性

  • 添加格式： "data-" 开头
  • 获取：通过 dataset 获取
  • 例子 ： <div data-set="test">1212</div> var test = div.dataset.test;

• 插入标记

  • innerHTML : 插入HTML 元素，不包含选中的元素
  • outerHTML : 插入HTML 元素，包含选中的元素
  • insertAdjacentHTML(pos , html) : 在指定位置插入元素；
    • pos 包含四个值
      • beforebegin : 在开始标记的前面
      • afterbegin : 在开始标记的后面
      • beforeend : 在结束标记的前面
      • afterend : 在结束标记的后面
  • 性能优化
    • 手工删除要替换元素的所有事件处理程序；
    • 减少操作的次数；

• scrollIntoView(param)

  • param 为true 则表示 调用元顶部与视口顶部尽可能的平齐；
  • param 为false 则表示 调用元素全部显示在视口中；

• contains

  • 是否包含某个元素 document.documentElement.contains(document.body)

• 插入文本

  • innerText
  • outerText

• 文档类型变化

  • var doctype = document.implementation.createDocumentType("html", "-//W3C//DTD HTML 4.01//EN",
    "http://www.w3.org/TR/html4/strict.dtd");
  • var doc = document.implementation.createDocument("http://www.w3.org/1999/xhtml", "html", doctype);
  • var htmldoc = document.implementation.createHTMLDocument("New Doc");

• isSameNode : div1.isSameNode(div2) 两个节点引用同一个对象

• isEqualNode : div1.isEqualNode(div2) : 两个节点有相同的类型（有相等的属性，而且attributes 和 childNodes 属性也相同 ）

• 设置数据/获取数据 ： document.body.setUserData("name", "Nicholas", function(){}); 要设置的键、实际的数据和处理函数；var value = document.body.getUserData("name");

• 访问样式

  • style 定义的一些属性和方法
    • cssText ：访问style 特性中的代码；
    • length : css的数量
    • parentRule
    • getPropertyCSSValue(propertyName) : 返回给定属性值的CSSValue
    • getPropertyPriority(propertyName):如果给定的属性使用了!important 设置，则返回
      "important";否则，返回空字符串；
    • getPropertyValue(propertyName):返回给定属性的字符串值；
    • item(index):返回给定位置的 CSS 属性的名称；
    • removeProperty(propertyName):从样式中删除给定属性。
    • setProperty(propertyName,value,priority):将给定属性设置为相应的值，并加上优先
      权标志("important"或者一个空字符串)。
  • 获取计算样式，只能查看
    • document.defaultView.getComputedStyle(node, null | 伪元素);
    • myDiv.currentStyle

• 样式表

  • 这些样式是从 或 <style> 中得到的
  • disabled:表示样式表是否**被禁用（（的布尔值。这个属性是可读/写的，将这个值设置为 true 可 以禁用样式表；
  • href:如果样式表是通过包含的，则是样式表的 URL;否则，是 null。
  • media:当前样式表支持的所有媒体类型的集合。
  • ownerNode:指向拥有当前样式表的节点的指针，link 或者是 style;
  • parentStyleSheet
  • title: ownerNode 中 title 属性的值。
  • type:表示样式表类型的字符串。对 CSS 样式表而言，这个字符串是"type/css"
  • cssRules:样式表中包含的样式规则的集合
  • ownerRule:如果样式表是通过@import 导入的，这个属性就是一个指针，指向表示导入的规
    则;否则，值为 null。IE 不支持这个属性。
  • deleteRule(index):删除 cssRules 集合中指定位置的规则。IE 不支持这个方法，但支持
    一个类似的 removeRule()方法
  • insertRule(rule,index):向 cssRules 集合中指定的位置插入 rule 字符串。IE 不支持这
    个方法，但支持一个类似的 addRule()方法。
  • 例子：
    • document.styleSheets

• css 规则

  • cssRules 对象
  • cssText:返回整条规则对应的文本
  • parentRule:如果当前规则是导入的规则，这个属性引用的就是导入规则;否则，这个值为 null。IE 不支持这个属性
  • parentStyleSheet
  • selectorText:返回当前规则的选择符文本
    -style:一个 CSSStyleDeclaration 对象，可以通过它设置和取得规则中特定的样式值
  • type:表示规则类型的常量值, 对于样式规则，这个值是 1。
  • 创建规则： sheet.insertRule("body { background-color: silver }", pos);
  • 删除规则： sheet.deleteRule(pos);

• 元素大小

  • 偏移量，主要是 （offsetWidth/offsetHeight）这两个值包含滚动条

    

  • 客户区大小

  

  • 滚动条

  

DOM遍历

• dom 遍历是 ** 深度优先遍历**；
  

• 两种形式
  • NodeIterator:
  • TreeWalker:
• 创建形式：
  • document.createNodeIterator(root，whatToShow, filter,entityReferenceExpansion)
  • document.createTreeWalker()
  • 参数说明：
  • root:想要作为搜索起点的树中的节点。
  • whatToShow:表示要访问哪些节点的数字代码。
  • filter:是一个 NodeFilter 对象，或者一个表示应该接受还是拒绝某种特定节点的函数。
  • entityReferenceExpansion:布尔值，表示是否要扩展实体引用。这个参数在 HTML 页面
    中没有用，因为其中的实体引用不能扩展。
  • whatToShow:
    • NodeFilter.SHOW_ALL:显示所有类型的节点。
    • NodeFilter.SHOW_ELEMENT:显示元素节点。
    • NodeFilter.SHOW_ATTRIBUTE:显示特性节点。由于 DOM 结构原因，实际上不能使用这个值。
    • NodeFilter.SHOW_TEXT:显示文本节点。
    • NodeFilter.SHOW_CDATA_SECTION:显示 CDATA 节点。对 HTML 页面没有用。
    • NodeFilter.SHOW_ENTITY_REFERENCE:显示实体引用节点。对 HTML 页面没有用。
    • NodeFilter.SHOW_ENTITYE:显示实体节点。对 HTML 页面没有用。
    • NodeFilter.SHOW_PROCESSING_INSTRUCTION:显示处理指令节点。对 HTML 页面没有用。
    • NodeFilter.SHOW_COMMENT:显示注释节点。
    • NodeFilter.SHOW_DOCUMENT:显示文档节点。
    • NodeFilter.SHOW_DOCUMENT_TYPE:显示文档类型节点。
    • NodeFilter.SHOW_DOCUMENT_FRAGMENT:显示文档片段节点。对 HTML 页面没有用。
    • NodeFilter.SHOW_NOTATION:显示符号节点。对 HTML 页面没有用。
  • 方法
  • nodeIterator 的方法：nextNode() 和 previousNode()
  • treeNode 的方法有：
    • parentNode()/ firstChild()/lastChild()/nextSiling()/previousSibling()
  • 例子：

var div = document.getElementById("div1"); var filter = function(node){
return node.tagName.toLowerCase() == "li"? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
};
var walker= document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, filter, false);
 var node = iterator.nextNode(); while (node !== null) {
alert(node.tagName);
} 

范围

• 选择DOM 中的一块区域，不必考虑节点的界限；
• 检测浏览器是否支持：

   var supportsRange = document.implementation.hasFeature("Range", "2.0");
   var alsoSupportsRange = (typeof document.createRange == "function");
  

• 创建 range 对象
  var range = document.createRange();
• range 实例的属性
  • startContainer : 选区中第一及节点的父节点；
  • startOffset : 在startcontainer 中起点的偏移量
  • endContainer: 选区中最后一个节点的父节点
  • commonAncestorContainer：startContainer 和 endContainer 共同的祖先节点；
• range 实例的方法
  • selectNode (node) ： 包含node
  • selectNodeContents(p1)：p1的内容；
  • setStartBefore(refNode)：将范围的起点设置在 refNode 之前
  • setStartAfter(refNode)
  • setEndBefore(refNode)
  • setEndAfter(refNode)
  • setStart(node, offset) : 一个参 照节点和一个偏移量值
  • setEnd(node, offset)
• 选中内容

<body>
  <p id="p1"><b>Hello</b> world!</p>
</body>

var p1 = document.getElementById("p1"); helloNode = p1.firstChild.firstChild; worldNode = p1.lastChild;
var range = document.createRange(); range.setStart(helloNode, 2); range.setEnd(worldNode, 3);

• 删除选中内容

• range.deleteContents()

• extractContents() : 并返回移除的内容

• 在范围内容中插入dom

  • insertNode(node)

• 折叠范围(合扇子)

  • collapse(param) :param为true就是折叠刀选中范围的开始位置，为false就是折叠到选中范围的末尾；
    

• 多个范围确定边界

  • compareBoundaryPoints(常量, range2):
  • 常量如下：
    • Range.START_TO_START：比较第一个范围和第二个范围的起点；
    • Range.START_TO_END:比较第一个范围的起点和第二个范围的终点;
    • Range.END_TO_END：比较第一个范围和第二个范围的终点;
    • Range.END_TO_START： 比较第一个范围的终点和第一个范围的起点。
  • 返回值
    • -1：第一个范围在第二个范围之前
    • 0 : 两个范围相等；
    • 1： 第一个范围在第二个范围之后；

• 复制DOM范围
  var newRange = range.cloneRange();

• 清理 DOM 范围

  • detach() : 从文档中分离
  • range = null : 接除引用

[ycshill]

后面的文章将迁移到个人博客 https://blog.csdn.net/tyutjavalily