个人网站是怎么样的,docker wordpress多个,分销系统软件,椒江做阿里巴巴网站的公司###1.前言 很多时候#xff0c;页面的dom元素是动态添加的#xff0c;而我们不知道具体是哪段js代码在操作这个dom元素#xff0c;所以需要进行断点#xff0c;对相应的dom元素进行断点监听#xff0c;这样才能找出相关的js代码。在浏览器的调试工具中#xff0c;切到ele…###1.前言 很多时候页面的dom元素是动态添加的而我们不知道具体是哪段js代码在操作这个dom元素所以需要进行断点对相应的dom元素进行断点监听这样才能找出相关的js代码。在浏览器的调试工具中切到elements一栏右键想要操作的dom元素在弹出的菜单中选中 Break on会弹出三个子选项 subtree modifications:当此dom元素子节点发生变化时触发断点 Attribute modifications:当此dom元素属性发生变化时触发断点 node removal:当此dom元素被移除时触发断点###2.监听dom元素子节点的改变为其设置断点 选中subtree modifications即可 这个改变包括 添加修改子元素/添加子元素/移除子元素/修改文本节点点击改变H3的内容添加h2标签删除h3标签我是H3在这个例子中为div#box元素设置html断点一旦子节点发生改变程序都会中断执行此时上面的3个按钮点击时都会触发断点并跳转到相应的代码位置###3.监听dom元素属性变化为其设置断点 选中Attribute modifications即可 属性的修改/添加/移除都会触发断点点击改变div#box的title属性添加class属性删除title属性我是H3function changeAttr() {document.querySelector(#box).setAttribute(title,新的title)}function addAttr() {document.querySelector(#box).setAttribute(class,newClass)}function removeAttr() {document.querySelector(#box).removeAttribute(title)}依次点击3个按钮程序会中断并跳转到相应的位置document.querySelector(#box).setAttribute(title,新的title)document.querySelector(#box).setAttribute(class,newClass)document.querySelector(#box).removeAttribute(title)###4.dom元素被移除时触发断点给h3标签设置断点在其被移除时触发断点删除h3标签我是H3function removeH3() {var h3 document.querySelector(h3)document.querySelector(#box).removeChild(h3)} 点击按钮移除h3标签时程序中断并跳转到相应的位置 document.querySelector(#box).removeChild(h3)
