js中Dom操作的个人总结

一 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 集合的快照，对文档的任何操作都不会对其产生影响。

作者：简生
链接：https://www.zhihu.com/question/24702250/answer/28695133
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

// Demo 1
var ul = document.querySelectorAll('ul')[0],
    lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
    ul.appendChild(document.createElement("li"));
}

// Demo 2
var 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增加class
• element.classList.remove删除class
• element.classList.containes是否包含class，返回true或者false
• element.classList.toggle切换class
• div.classList.replace("foo", "bar"); 替换class

三 直接修改整个class ，使用className

• ele.className = 'foo goo do '设置ele的class,也可以用这个属性去获取ele的class

let elm = document.getElementById('item');

if(elm.className === 'active'){
    elm.className = 'inactive';
} else {
    elm.className = 'active';
}

四 自定义数据属性

• data-set,获取自定义属性的方法，ele.dataset.name
• 主要用在跟踪连接上会有用处，可以设置相应的自定义属性，进行跟踪连接。

<div id="myDiv" data-name="myDiv" data-id="myId"
       data-my-custom-key="This is the value"></div>

// 获取的方法
ele.dataset.name 
ele.dataset.myCustomKey
ele.dataset.id

// 也可以直接定义
ele.dataset.name  = ‘katherine’
ele.dataset.myCustomKey = ‘new value’
ele.dataset.id = 'newID'

五 获取dom元素的属性的方法，获取某一个属性atrr的方法有哪些呢？

• ele.attr 设置获取获取元素的属性,但是不能设置或者获取自定义属性
• getAttribute(attr) setAttribute(attr,'new'),的方法获取或者设置属性

这两种方法的比较和对比

• ele.attr 不能设置或者获取自定义属性,使用getAttribute相关方法则可以设置或者获取自定义属性。
• 当使用ele.style 得到的是一个style的对象值，所以可以通过ele.style.color获得某一个样式的值；而使用getAttribute 相关方法获取的style是字符串。
• 使用ele.attri获取class的时候，是使用ele.className.而使用getAttribute方法的时候，是直接使用ele.getAttribute('class')

<div id="myDiv" data-name="myDiv" data-id="myId" class='test'
       data-my-custom-key="This is the value"></div>

var Odiv = document.getElementById('myDiv');
// 
Odiv.id   //myDiv
Odiv.className // test


//
Odiv.getAttribute('id')  // myDiv
Odiv.getAttribute('class')  .. //test
Odiv.getAttribute('data-name')   // myDiv

六 使用ele.tagName的时候要注意

• 使用ele.tagName会返回该元素的标签名，但是要比较的话，最好是用ele.tagName.toLowerCase === 'div'去比较和使用最好。

七 节点与元素节点

传统的获取不同的节点的方法有如下

• ele.childNodes // 返回某一个元素的所有子节点,包括文本节点
• ele.previousSibling // 返回同级的前面的兄弟元素
• ele.nextSibling // 返回同级的后面的兄弟元素
• ele.firstChild // 返回第一个子元素
• ele.lastChild //返回最后一个子元素

新的不包含文本节点的获取元素节点的方法，不包含空元素节点和文本节点

• ele.childElementCount // 返回某一个元素的所有子节点的个数
• ele.previousElementSibling // 返回同级的前面的兄弟元素
• ele.nextElementSibling // 返回同级的后面的兄弟元素
• ele.firstElementChild // 返回第一个子元素
• ele.lastElementChild //返回最后一个子元素

七 设置和获取 innerHTML innerText

相比于创建节点，再将节点append或者穿插到某一个节点处，innerHTML还是比较高效率的。

• 当设置了一个元素的innerHTML和innerText之后，之前的内部元素都会被清除，重新覆盖。
• 使用innerHTML的时候，要注意尽量减少使用的次数，因为频繁使用innerHTML会造成性能问题。

下面的例子就是，尽量少用innerHTML

for (var i = 0; i < length; i++) {
 ul.innerHTML += "<li>" + values[i] + "</li>"; 
}
// 高效率的做法应该是这样子
var newHtml = ''
for (var i = 0; i < length; i++) {
 newHtml += "<li>" + values[i] + "</li>"; 
}
ul.innerHTML = newHtml;

八 创建以及插入节点的相关方法。

✔注意： 如果使用appendChild的时候，插入的元素已经是文档的节点，那么这个文档的节点就会从原来的位置偏移到新的位置去，即文档中的任何节点都不能同时出现在两个位置。

document.createElement('div')   //创建一个div的节点。
father.appendChild(newNode)   //在father节点的最后添加new节点
father.insertBefore(newNode,father.firstChild)  // 将newnode插入到father的第一个子元素之前

作者：Katherine的小世界
链接：https://www.jianshu.com/p/45cf20a11c2d
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。