dom

1.需要将要转换成图片的区域div放置在body中，且需要display为block； 2.图片跨域的问题：将icon转换为base64 3.截图不全：新版本插件不稳定，建议 <script src="https://cdn.bootcss.com/html2canvas/0.5.0-alpha1/html2canvas.min.js"></script> 多尝试几个版本 document.querySelector("#slot").innerHTML = dom; document.querySelector("#share-module").style.display = "flex"; setTimeout(function(){ html2canvas(document.querySelector("#html2canvas"),{useCORS:true}).then(canvas => { document.querySelector("#shareImg").src=canvas.toDataURL(); document.querySelector("#slot").innerHTML = ""; }); },10); 此处的dom为要截图的区域div； 来源： https://www.cnblogs.com/changyaoself/p/12449745

在前台开发中，我们做的最多的操作之一便是遍历给定 DOM 节点的节点，并对相应的子节点做一些进一步的操作，如：节点排序，添加样式， ect 。在本地的 DOM 元素节点上存在这样两个属性 children 和 childNodes ，通过这两个属性我们都能完成一般性的子节点操作，由于这两个属性在名称上十分相似，我们通常困惑于到底该使用哪个属性，本文现就这两个属性的特点和相互之间的区别做简单的介绍。 Element . children 作用：返回给定元素节点的元素节点集合。 1. 非 W3C 标准 , 但是基本上所有的浏览器都实现了该属性，所以也可以称作是事实上的标准 2. 基本语法 var elCol = elemNode.children ; 3.. 返回值 类型： HTMLCollection , 包含当前元素的所有子元素节点（ Element Node ）的有序列表集合。如果没有子元素节点那么该集合的长度为 0; 4. 兼容性列表 Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari Basic support 1 3.5 9 (IE6-8 incl commend nodes) 10 4 注意的 IE9 之前的版本（ IE6/7/8 ）会列出注释节点 5. 例子： // 将 ul(#list)

NodeList 类数组对象 代表节点的集合 部分浏览器为NodeList加入了namedItem接口。 规范: http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-536297177 HTMLCollection 类数组对象 代表HTML元素的集合 可以使用namedItem接口，以id(优先)或name获取集合中的元素。 规范: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506 NodeList的[]操作符 同item接口，可以通过索引值获取元素。例如, nodelist[0]。 同namedItem接口，可以通过id或name获取集合中的元素。例如，nodelist['name']。 实时对象 实时对象的意思是，文档内容的变化会立即体现在对象上。 document.getElementsByName, document.getElementsByClassName, document.getElementsByTagName, document.getElementsByTagNameNS 返回的是实时对象 document.links, document.forms, document.images, document.scripts,

前面的话 　　变动(mutation)事件能在DOM中的某一部分发生变化时给出提示，这类事件非常有用，但都只能使用DOM2级事件处理程序，且由于浏览器兼容性不好，所以用的不广泛 删除节点 　　删除节点时，涉及到DOMNodeRemoved、DOMNodeRemovedFromDocument和DOMSubtreeModified这三个事件，下面将详细介绍 DOMNodeRemoved 　　在使用removeChild()或replacechild()从DOM中删除节点时，会触发DOMNodeRemoved事件。而event.relatedNode属性中包含着对目标节点父节点的引用。在这个事件触发时，节点尚未从其父节点删除，因此其parentNode属性仍然指向父节点。该事件会冒泡 　　[注意]IE8-浏览器不支持 <div id="box" style="height: 30px;width: 100px;"> <div id="inBox">1</div> </div> <button id="btn">删除子节点</button> <script> inBox.addEventListener('DOMNodeRemoved',function(e){ e = e || event; e.relatedNode.style.background = 'lightblue'; }

DOM： 通过 HTML DOM,使用 JavaScript访问 HTML 文档的所有元素。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model BOM： ECMAScript是JavaScript的核心，但如果要在web中使用JavaScript，那么BOM则无疑才是真正的核心。因为BOM提供了很多对象可以让JavaScript去操作浏览器。 浏览器对象模型（BOM）使javaScript有能力与浏览器对话 浏览对象模型（BOM）：尚无正式标准 由于浏览器几乎已经实现了javaScript交互性方面的相同方法和属性，因此常被认为是BOM的方法和属性 案例1： 修改和获取CSS样式 赠汪伦 李白乘舟将欲行 忽闻岸上踏歌声 桃花潭水深千尺 不及汪伦送我情 <input type="button" value="获取修改CSSY样式" onclick="click1()"/> <script type="text/javascript"> function click1(){ var p1=document.getElementsById("p1"); p1.style.color="red"; p1.style.fontSize="30px"; p1.style.backgroundColor="skyblue"; console.log(p1

原生JS对dom节点的操作包括：查找、创建、添加、删除、替换、插入、复制、移动等。 1、访问节点 document.getElementById("id");// 通过id查找 document.getElementByName("name");// 通过name查找 document.getElementsByClassName("class");// 通过class命名查找 document.getElementsByTagName("div");// 通过标签名查找 querySelector(); //要在较新的浏览器上才能使用 querySelectAll();//要在较新的浏览器上才能使用 2、创建节点 document.createElement();//创建元素 document.createDocumentFragment();//创建内存文档碎片 document.createTextNode();//创建文本节点 appendChild(node) //在父元素下追加none节点 3、创建完节点之后可以将创建好的节点添加进指定节点中 var ele = document.getElementById("my_div"); var newEle= document.createElement("div"); ele.appendChild(newEle); 4

Javascript 再探 event 事件。 我们知道浏览器中有很多的差异性，比如对于 浏览器中的 event 事件进行处理的方式， IE 明显的就和别的浏览器不一样。所以后来诞生了风靡前端的 jQuery 库。我原先以为 jQuery 库只是在 jQuery 对象得到层面对于一般的 javascript 代码进行了跨浏览器整合和优化。但是今天在用的时候也发现了，对于部分的 DOM 也进行了跨浏览器整合。下面就以我碰到的 event 做一个例子。 在 jQuery 中进行 event handle attachment 的时候。自然会有对应的 handle 处理函数。在 jQuery 中的 handle 处理函数中可以带入 event 参数，这里带入的 event 的参数的话可是 jQuery 进行了再次封装的了。而不再是原先的原生 dom event 了。但是 jQuery 封装 NB 的一点就体现在，虽然对此 dom 进行了二次封装，但是原则上还是和 DOM 标准制定的规则保证了高度一致性，比如 event.target 和 event.currentTarget 都和 DOM 标准中的规则一模一样。 除了这些原 DOM 有的属性外，当然 jQuery 也加入了自己库中的一些特性。最为典型的就是 event.delegateTarget 。官方的 API 解释为：