本文共 3788 字,大约阅读时间需要 12 分钟。
一 js中的Dom操作处理
一 获取元素
querySelector
的性能会比get系列的要高,因为返回的是nodeList的快照。querySelector
获取的是快照,所以当元素更新的时候,获取的快照不会更新。querySelector
系列是静态的,get
系列是动态的。document.getElementById('mybtn')
只有document才有document.querySelector('.mybtn') /// 返回第一个与选择器匹配的元素document.querySelectorAll('.mybtn') // 返回所有与选择器匹配的元素document.getElementsByClassName('mybtn') // 返回所有className 为mybtn的元素document.getElementsByTagName('div')document.getElementById('mybtn')document.getElementByName('mybtn') // 可以通过name获取表单(表单的id与label的for要保持一致。)document.getElementByTagName('*') // 可以获取页面中所有的元素
转载自知乎的一个demo,
因为 Demo 2 中的 lis 是一个动态的 Node List, 每一次调用 lis 都会重新对文档进行查询,导致无限循环的问题。而 Demo 1 中的 lis 是一个静态的 Node List,是一个 li 集合的快照,对文档的任何操作都不会对其产生影响。
作者:简生
链接: 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。// Demo 1var ul = document.querySelectorAll('ul')[0], lis = ul.querySelectorAll("li");for(var i = 0; i < lis.length ; i++){ ul.appendChild(document.createElement("li"));}// Demo 2var ul = document.getElementsByTagName('ul')[0], lis = ul.getElementsByTagName("li"); for(var i = 0; i < lis.length ; i++){ ul.appendChild(document.createElement("li")); }作者:简生链接:https://www.zhihu.com/question/24702250/answer/28695133来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
二 增删class,使用classList
element.classList.add
增加classelement.classList.remove
删除classelement.classList.containes
是否包含class,返回true或者falseelement.classList.toggle
切换classdiv.classList.replace("foo", "bar");
替换class三 直接修改整个class ,使用className
ele.className = 'foo goo do '
设置ele的class,也可以用这个属性去获取ele的classlet elm = document.getElementById('item');if(elm.className === 'active'){ elm.className = 'inactive';} else { elm.className = 'active';}
四 自定义数据属性
data-set
,获取自定义属性的方法,ele.dataset.name// 获取的方法ele.dataset.name ele.dataset.myCustomKeyele.dataset.id// 也可以直接定义ele.dataset.name = ‘katherine’ele.dataset.myCustomKey = ‘new value’ele.dataset.id = 'newID'
五 获取dom元素的属性的方法,获取某一个属性atrr的方法有哪些呢?
getAttribute(attr) setAttribute(attr,'new'),
的方法获取或者设置属性这两种方法的比较和对比
ele.style.color
获得某一个样式的值;而使用getAttribute 相关方法获取的style是字符串。var Odiv = document.getElementById('myDiv');// Odiv.id //myDivOdiv.className // test//Odiv.getAttribute('id') // myDivOdiv.getAttribute('class') .. //testOdiv.getAttribute('data-name') // myDiv
六 使用ele.tagName的时候要注意
七 节点与元素节点
传统的获取不同的节点的方法有如下
新的不包含文本节点的获取元素节点的方法,不包含空元素节点和文本节点
七 设置和获取 innerHTML innerText
相比于创建节点,再将节点append或者穿插到某一个节点处,innerHTML还是比较高效率的。
innerHTML
的时候,要注意尽量减少使用的次数,因为频繁使用innerHTML会造成性能问题。下面的例子就是,尽量少用innerHTML
for (var i = 0; i < length; i++) { ul.innerHTML += "
八 创建以及插入节点的相关方法。
✔注意: 如果使用appendChild
的时候,插入的元素已经是文档的节点,那么这个文档的节点就会从原来的位置偏移到新的位置去,即文档中的任何节点都不能同时出现在两个位置。
document.createElement('div') //创建一个div的节点。father.appendChild(newNode) //在father节点的最后添加new节点father.insertBefore(newNode,father.firstChild) // 将newnode插入到father的第一个子元素之前作者:Katherine的小世界 链接:https://www.jianshu.com/p/45cf20a11c2d 來源:简书 简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。