dom

每个载入浏览器的HTML文档都会生成一个Document对象 Document对象使我们可以从脚本中对HTML中的所有元素进行访问 DOM实际上是以面向对象方式描述的对象模型，它将文档建模为一个个对象，以树状的结构组织（本文称之为“文档树”，树中的对象称为“节点”）。 每个文档包含1个document节点，0个或1个doctype节点以及0个或多个元素节点等。document节点是文档树的根节点。 如对于HTML文档，DOM 是这样规定的： 整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点 节点与文档内容是一一对应的关系，节点之间有层次关系。 来源： https://www.cnblogs.com/frontendnotes/p/6417264.html

DOM0 DOM2 DOM3 DOM是什么 W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 DOM 定义了访问 HTML 和 XML 文档的标准： W3C DOM 标准被分为 3 个不同的部分： 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 DOM 是 Document Object Model（文档对象模型）的缩写。 DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。 DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）： 通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。 浏览器兼容 所有浏览器都支持DOM。各浏览器有不同程度的支持。 DOM0 当阅读与DOM有关的材料时，可能会遇到参考0级DOM的情况。需要注意的是并没有标准被称为0级DOM，它仅是DOM历史上一个参考点（0级DOM被认 为是在Internet Explorer 4.0 与Netscape Navigator4.0支持的最早的DHTML）。 DOM1 1级DOM在1998年10月份成为W3C的提议，由

1.DOM操作 DOM操作分为三类： DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById() HTML-DOM：用于处理HTML文档，如document.forms CSS-DOM：用于操作CSS，如element.style.color="green" 提示：JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持 2.jQuery中的DOM操作 jQuery对JavaScript中的DOM操作进行了封装 样式操作 内容及Value值操作 节点操作 节点属性操作 节点遍历 CSS-DOM操作 使用jquery操作样式 jquery.css("background","red"); jquery.css({"background":"red","font-size":"25px"}); 追加样式 $(selector).addClass(class); 或 $(selector).addClass(class1 class2 … classN); 移除样式 $(selector).removeClass("class") ; 或 $(selector).removeClass("class1 class2 … classN ") ; 3.html( ) 和text( )方法的区别 4.表单元素 一种：

使用 attributes 属性遍历元素特性 // 迭代元素的每一个特性，将它们构造成 name = value 的字符串形式 function outputAttributes (element) { const pairs = [] let attrName let attrValue for (let i = 0, len = element.attributes.length; i < len; i++) { attrName = element.attributes[i].nodeName attrValue = element.attributes[i].nodeValue pairs.push(`${attrName}=${attrValue}`) } return pairs.join(" ") } 使用 classList 属性来操作类名 <div class="bd user disabled">...</div> 这个 <div> 元素一共有三个类名。要从中删除一个类名，需要把这三个类名拆开，删除不想要的那个，然后再把其他类名拼成一个新字符串。请看下面的例子： // div.className = 'bd user disabled' let classNames = div.className.split(/\s+/) let pos = -1 for

1，getElementsByTagName("li")；获取到的是标签数组； 2，querySelector("传入选择器名称")；选择器有三类（标签选择器，ID选择器，类选择器；"#ID";".class"），若获取的元素不止一个，则只会返回满足条件的第一个元素。 3，querySelectorAll（）：获取到满足条件的所有元素（数组）。 4，（旧的版本添加新样式的方法）className：为元素添加指定名称的样式，可添加多个样式，但元素原本样式会被覆盖。 5，classList：返回当前元素的所有样式列表（数组）。 6，add（）：为元素添加指定名称的样式，该方法一次只能添加一个样式。 7，remove（）：该方法为为元素移除指定名称的样式。 8，toggle（）：切换元素的样式； 9，contains（）：判断元素是否包含指定名称的样式，返回true或false。 10，classList.item(0):获取该元素添加的样式。 注意：add（）方法不会覆盖原有样式。 来源： https://www.cnblogs.com/sangsha/p/11512865.html

When building a web app, sometimes we need to approach it top-down. Modern browser devtools allow us to set breakpoints not only on the JS code but also on the DOM as well, so we can easily pin down which lines of code are to be executed deep inside the code base, by pausing the execution based on DOM changes. In this lesson, we will learn how to set and remove DOM breakpoints in Chrome DevTools. If you want to find out which part of code updating the DOM, you can use "subtree modifications": Next time when code try to udpate the DOM, it will pause execution, and open the debugger. To remove

一、Zepto核心模块架构 Zepto核心模块架构图 该图展示了Zepto核心模块架构代码的组织方式。主要分为私有变量、函数和暴露给用户的所有api。 Zepto核心模块架构代码 该图展示了Zepto的核心模块架构代码，忽略了所有实现的细节。 var Zepto = (function() { // 私有变量($和zepto不是私有变量，它们会被暴露出去) var undefined, emptyArray = [], filter = emptyArray.filter, slice = emptyArray.slice, $, zepto = {}; // 私有函数 function likeArray() {} // Z类 function Z() {} // 构建Z对象的主要函数 zepto.matches = function() {}; zepto.fragment = function() {}; zepto.Z = function() { return new Z(dom, selector) }; zepto.isZ = function() { return object instanceof zepto.Z }; zepto.init = function() {}; zepto.qsa = function() {}; // Z对象的共享方法 $.fn =