dom

JavaScript HTML DOM 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 HTML DOM 定义了 访问和操作 HTML 文档的标准 。 HTML DOM (文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 HTML DOM 模型被构造为 对象 的树： 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。 JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性（一般属性） JavaScript 能够改变页面中的所有 CSS 样式 JavaScript 能够对页面中的所有 事件做出反应（事件属性） 总结， <p style="color:red" title="nihao" onclick="fun（）“”>这里是p标签的内容</p> <img src="d1" onclick="fun1()"> 这里元素p和元素img中，style、title、src 均为该元素的一般属性，onclick等事件为特殊的事件属性

　　为什么react这么快呢 ？ 　　 因为react用了虚拟DOM； 　　但是每次虚拟DOM转真实DOM不也是很浪费性能吗 ？ 　　 nice，所以关键点在Diff算法这里，去对比新旧DOM树，而后通过补丁去更新到真实DOM上 ； 　　 这个比对不是也很浪费时间吗 ？ 　　 正常情况下，比较两个树形结构差异的算法的时间复杂度是O(N^3)，这个效率显然是无法接受的。 　　react通过总结DOM的实际使用场景提出了两个在绝大多数实践场景下都成立的假设，基于这两个假设，React实现了在O(N)时间复杂度内完成两棵虚拟DOM树的比较。 　　两个假设是： 　　　　 （1）如果两个元素的类型不同，那么它们将生成两棵不同的树； 　　　　（2）为列表中的元素设置key属性，用key标识对应的元素在多次； 　　 面对性能优化我们能做什么呢 ？ 　　　　 1、 使用生产环境版本的库； 　　　　 2、避免不必要的组件渲染； 　　　　 3、使用key； 　　 　　 　　 来源： https://www.cnblogs.com/webcabana/p/11236227.html

接口 nodeType常量 nodeType值 备注 Element Node.ELEMENT_NODE 1 元素节点 Text Node.TEXT_NODE 3 文本节点 Document Node.DOCUMENT_NODE 9 document Comment Node.COMMENT_NODE 8 注释的文本 DocumentFragment Node.DOCUMENT_FRAGMENT_NODE 11 document片断 Attr Node.ATTRIBUTE_NODE 2 节点属性 方法 描述 createAttribute() 用指定的名字创建新的Attr节点。 createComment() 用指定的字符串创建新的Comment节点。 createElement() 用指定的标记名创建新的Element节点。 createTextNode() 用指定的文本创建新的TextNode节点。 getElementById() 返回文档中具有指定id属性的Element节点。 getElementsByTagName() 返回文档中具有指定标记名的所有Element节点。 属性 描述 attributes 如果该节点是一个Element，则以NamedNodeMap形式返回该元素的属性。 childNodes 以Node[]的形式存放当前节点的子节点。如果没有子节点

一、DOM创建 DOM节点（Node）通常对应于一个标签，一个文本，或者一个HTML属性。DOM节点有一个 nodeType 属性用来表示当前元素的类型，它是一个整数： Element，元素 Attribute，属性 Text，文本 DOM节点创建最常用的便是document.createElement和 document.createTextNode 方法： var node1 = document.createElement('div');var node2 = document.createTextNode('hello world!'); 二、DOM查询 // 返回当前文档中第一个类名为 "myclass" 的元素 var el = document.querySelector(".myclass"); // 返回一个文档中所有的class为"note"或者 "alert"的div元素 var els = document.querySelectorAll("div.note, div.alert"); // 获取元素 var el = document.getElementById('xxx'); var els = document.getElementsByClassName('highlight'); var els = document

javascript中获取dom元素高度和宽度的方法如下： 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scrollWidth 网页正文全文高： document.body.scrollHeight 网页被卷去的高： document.body.scrollTop 网页被卷去的左： document.body.scrollLeft 对应的dom元素的宽高有以下几个常用的： 元素的实际高度：document.getElementById("div").offsetHeight 元素的实际宽度：document.getElementById("div").offsetWidth 元素的实际距离左边界的距离：document.getElementById("div").offsetLeft 元素的实际距离上边界的距离：document.getElementById("div").offsetTop 来源： https://www.cnblogs.com/guanzelin

原文：http://www.angularjs.cn/A137?utm_source=ourjs.com 目录： 引导之前 自动引导启动框架 手工引导启动框架 引导第1步：创建注入器 引导第2步：创建根作用域 引导第3步：编译DOM子树 编译器/$compile 指令/directive 指令的规范化 1.引导之前：库阶段 在示例中，我们定义了一个指令ez-duang， 它应该会展开成一个动画 显示出来。 AngularJS代码： angular.module("ezstuff",[]) .directive("ezDuang",function(){ return { restrict : "E", template : "<img src='http://ww4.sinaimg.cn/bmiddle/757eb2ffjw1eptcr4qobjg209205dthh.gif'>" }; }); html代码: 应该在下面看到一幅动画才对！ 但是，看起来没有什么动画显示出来。AngularJS似乎没有工作，为什么？ 有点像操作系统，AngularJs也有一个启动引导的概念。 当你在HTML文件中引入angular.min.js时，AngularJS只是建立了一个全局的 angular对象，这个对象有一些方法可供开发者调用，但应用的框架还没有建立。 在这个阶段

DOM树的增删改 DOM树是结构 所谓层级结构是指元素和元素之间的关系 父子，兄弟 解析器输出的树是由DOM元素和属性节点组成的 当我们说树中包含DOM节点时，意思就是这个树是由实现了DOM接口的元素组成。这些实现包含了其它一些浏览器内部所需的属性。 当各个节点组成之后像一棵树，就是DOM树。 元素属性的删改查（必须是标签上有的属性） 查看元素属性的值（getAttribute()） 首先要获取到一个元素，再用getAttribute（属性名）查看 <a href="http://www.baidu.com">百度一下</a> <script type="text/javascript"> var a=document.getElementsByTagName("a")[0]; console.log(a.getAttribute("href")); </script> 元素属性的删（removeAttribute()） <a href="http://www.baidu.com" class="aaaa">百度一下</a> <script type="text/javascript"> var a=document.getElementsByTagName("a")[0]; a.removeAttribute("class"); </script> 元素属性的改