dom

节点应用 获取页面上的元素diva var diva=document.querySelector("#diva"); console.log(diva.childNodes);获取子节点 console.log(diva.children);获取子元素 console.log(diva.parentNode);获取父节点 console.log(diva.parentElement);获取父元素 console.log(diva.firstChild);获取第一个子节点 console.log(diva.firstElementChild);获取第一个子元素 console.log(diva.lastChild);获取最后一个子节点 console.log(diva.lastElementChild);获取最后一个子元素 console.log(diva.nextSibling);获取下一个兄弟节点 console.log(diva.nextElementSibling)获取下一个兄弟元素 console.log(diva.previousSibling);获取上一个兄弟节点 console.log(diva.previousElementSibling);获取上一个兄弟元素 来源： https://www.cnblogs.com/qq951753/p/12651173.html

前言 我们今天直接进入事件相关的学习，因为近期可能会改到里面的代码 就zepto来说，我认为最重要的就是选择器与事件相关了，随着浏览器升级，选择器简单了，而事件相关仍然是核心，今天我们就来学习学习 zepto事件处理部分篇幅不大，不到400行，前面篇幅也很小，所以真的很适合移动开发 变量定义 1 var $$ = $.zepto.qsa,2 handlers = {}, _zid = 1,3 specialEvents = {},4 hover = {5 mouseenter: 'mouseover',6 mouseleave: 'mouseout'7 } 事件部分首先定义了几个变量，$$为zepto选择器的方法，暂时不管他（据观察，好像也没有地方用到了，所以无意义） handlers为一个对象，与_zid息息相关，暂时不知道干什么的（据猜测两个应该是保存函数句柄，为removeEvent做准备） hover应该会同时触发两个事件才会触发，我们这里先不管，继续往下看 这里提供一个zid飞方法，该方法用于保证-zid的唯一性 1 function zid(element) {2 return element._zid || (element._zid = _zid++)3 } 算了，我们这里还是用一个实际点的方法跟进来吧，首先说一个关键的 $.Event(type,

前言 我们移动端基本使用zepto了，而我也从一个小白变成稍微靠谱一点的前端了，最近居然经常要改到zepto源码 但是，我对zepto不太熟悉，其实前端水准还是不够，所以便私下偷偷学习下吧，别被发现了 核心方法$() 我们使用这个方法一般有几个用途（我这里只说我自己用到过的），这里根据使用度排个序： ① 选择器/$(selector) 将返回一个包装过的dom集合对象（有很多选择器） ② html字符串/$(domStr) 仍然返回一个包装过的dom对象，他会将字符串初始化为我们的dom结构 PS：新增了一个方法可以直接赋予dom结构属性，我们这里不关注 ③ 函数/$(function(){}) 我基本没这么用过，他实在文档加载结束后执行 暂时不管这些东西吧。我们这里来一个个看看他们的实现： 1 $('div') 2 //=> all DIV elements on the page 3 $('#foo') 4 //=> element with ID "foo" 5 6 // create element: 7 $("<p>Hello</p>") 8 //=> the new P element 9 // create element with attributes:10 $("<p />",11 {12 text: "Hello",13 id: "greeting",14

Dom的操作流程 　　1. 找到标签。 　　2. 操作标签。 查找标签 1. 直接查找document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 2. 间接查找parentNode 　　// 父节点 childNodes 　　 // 所有子节点 firstChild 　　 // 第一个子节点 lastChild 　　 // 最后一个子节点 nextSibling 　　// 下一个兄弟节点 previousSibling 　　// 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素

背景 在开发IM的项目过程中，经常会有出现一些需要计算DOM高度，然后超出若干行隐藏等需求。很多时候，需要计算高度的DOM元素都是动态生成的，我们无法在数据渲染前获取到它的高度。 但是，如果我们需要获取到这段在内存中未渲染的动态文本，也能够通过如下几个方法。 技术方案 根据前端的基本常识，在内存中未渲染的DOM元素是无法获取到高度的，因此我们有两个方向来解决这个难题： 通过字数对行数进行估算 将元素渲染后进行高度测算 实现方案 以下的实现方案将根据上面所选择的技术方案来进行实现。 通过字数进行估算 方案 此方案无需多言，就是通过字数和每一行能够容下的字的个数进行估算等。在项目最开始时，我采用的就是这个方案。具体实现代码太过简单，因此也不在此添加了。 优点 此方案实现简单，基本不需要任何成本，适用于只有等宽文字的情况下。 缺点 这个方案缺点也比较明显，基本无法用于纯文本之外的任何情况。如果字体为非等宽字体或者存在 \n 之类的换行符或者是 \t 之类的制表符时，估算的准确度也会大大下降。 在DOM渲染后进行操作 方案 顾名思义，此方案就是先不考虑DOM元素行数逻辑，直接将所有的DOM节点全部渲染到页面中，渲染完成后再对进行后续逻辑判断。获取高度后页面行数计算将在后面统一讲解。 优点 此方案通过直接在实际场景的页面上渲染后进行高度计算，因此计算精准，不存在任何偏差。同时

什么是虚拟dom 用一个对象来描述dom结构，这个对象就是虚拟dom。 为什么要用虚拟dom 因为操作dom 需要耗费性能，dom上有上百个属性和方法。计算出Virtual DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面可以减少dom操作、 h方法就是根据dom的类型，属性，子节点、文本。产生一个虚拟dom h.js里有createElement接受参数：type,props,...children，createElement，把key从props里取出来之后，里调用vNode(type,key,props,children),vNode返回一个对象。 render（vnode,container）方法将虚拟节点变为真实节点。看看什么类型，文本 元素 属性比对，比较老属性和新属性的差异，算出最新的，赋给dom上。 怎么比对？ 如果type、key不一样，直接replaceChild，新节点替换掉老节点。 type、key一样，都是文本类型，直接修改textContent type、key一样，都是节点类型，比对props,根据新节点的属性更新老节点的属性，对比children ,(老节点有，新节点没有-》删除老节点的innerHtml;老节点没有，新节点有-》给新节点的添加子节点；老节点有，新节点有-》updataChildren

JavaScript DOM 鼠标拖拽 在前端页面交互中，鼠标拖拽是一个体验良好的功能，实现鼠标拖拽需要了解鼠标行为坐标系和涉及到的许多兼容性写法。本文介绍鼠标位置的获取和、拽功能的实现以及拖拽函数的封装 鼠标行为坐标系 鼠标行为触发事件时，事件对象上会有一些属性提供鼠标的位置信息 属性 功能 兼容性 clientX/Y 鼠标相对可视区域的坐标 / x/y 与 clientX/Y 功能相同 firefox 低版本不支持 pageX/Y 鼠标相对整个文档的坐标 兼容 IE9 及以上 layerX/Y 与 pageX/Y 功能相同 IE10 及以下同 clientX/Y screenX/Y 鼠标位置相对屏幕坐标 / offsetX/Y 鼠标位置相对块元素的坐标(包含边框) safari 不包含边框 获取鼠标相对整个文档的坐标：pageX/Y 兼容性差，需要进行封装 鼠标相对整个文档的坐标 = 鼠标相对可视区域的坐标 + 滚动条滚动距离 - 文档偏移 document.documentElement.clientTop 获取文档偏移，在 IE 一些版本中为 undefined function pagePos(ev) { var sTop = getScrollOffset().top, sLeft = getScrollOffset().left, cTop = document

　　归纳总结Java解析XML主要有四中方式，分别是DOM、SAX、JDOM和DOM4J。其中DOM和SAX是官方包自带，另外两个JDOM和DOM4J是第三方包。 一、此篇测试代码用到的XML情况 。 1、XML内容展示 1 <?xml version="1.0" encoding="UTF-8"?> 2 <class> 3 <people> 4 <name>Jack</name> 5 <age>19</age> 6 <sex>male</sex> 7 <job>student</job> 8 </people> 9 <people> 10 <name>Merry</name> 11 <age>26</age> 12 <sex>female</sex> 13 <job>teacher</job> 14 </people> 15 </class> 2、所在项目位置 二、几种方式 1、DOM方式代码及运行结果，已省略类名及main函数代码。 1 import org.w3c.dom.Document; 2 import org.w3c.dom.Element; 3 import org.w3c.dom.Node; 4 import org.w3c.dom.NodeList; 5 import org.xml.sax.SAXException; 6 import javax.xml

HTML DOM - 事件 HTML DOM 允许 JavaScript 对 HTML 事件作出反应。 对事件作出反应 当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。 如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中： onclick=JavaScript HTML 事件的例子： 当用户点击鼠标时 当网页已加载时 当图片已加载时 当鼠标移动到元素上时 当输入字段被改变时 当 HTML 表单被提交时 当用户触发按键时 在本例中，当用户点击时，会改变 <h1> 元素的内容： 实例 <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1> 在本例中，会从事件处理程序中调用函数： 实例 <script> function changetext(id){ id.innerHTML="Ooops!"; } </script> </head> <body> <h1 onclick="changetext(this)">点击文本!</h1> HTML 事件属性 如需向 HTML 元素分配事件，您可以使用事件属性。 实例 向 button 元素分配一个 onclick 事件： <button onclick="displayDate()">点我</button> 在上面的例子中

什么是虚拟dom 用js模拟一颗dom树,放在浏览器内存中 .当你要变更时,虚拟dom 使用diff算法进行新旧虚拟dom的比较,将变更放到变更队列中 , 反应到实际的dom树,减少了dom操作. 虚拟DOM将DOM树转换成一个JS对象树, diff算法逐层比较,删除,添加操作 ,但是,如果有多个相同的元素,可能会浪费性能,所以,react和vue-for 引入key值进行区分 . 优点： 保证性能下限 ： 框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作，它的一些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限； 无需手动操作 DOM ： 我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率； 跨平台 ： 虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、weex 开发等等。 缺点: 无法进行极致优化： 虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，