DOM常见操作

查找DOM节点

• getElementById()
• getElementsByTagName()
• getElementsByName()
• getElementsByClassName()
• querySelector()
• querySelectorAll()

前四种需要对应的参数，后两种可以使用任意CSS选择器作为参数。

前四种和后两种的主要区别：

• 返回的对象不同

举例说明：
假设HTML代码如下：

<ul id="div-ul">
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ul>

js代码如下：

let ulDiv = document.getElementsByTagName('li');
console.log(ulDiv); // HTMLCollection对象，HTMLCollection[3]0: li1: li2: lilength: 3__proto__: HTMLCollection
let aaa = document.querySelectorAll('li');
console.log(aaa); // NodeList对象，NodeList[3]0: li1: li2: lilength: 3__proto__: NodeList

HTMLCollection对象和NodeList对象：

• 相同点：

  • 都是对象

  • 都有length属性
    console.log(ulDiv.length); // 3
console.log(aaa.length); // 3

  • 都有item方法
    console.log(aaa.item(0)); // <li>a</li>
console.log(ulDiv.item(0)); // <li>a</li>

  • 都可以使用方括号语法访问元素
    console.log(ulDiv[0]); // NodeList,<li>a</li>
console.log(aaa[0]); // NodeList,<li>a</li>

  • 都可以通过转换为数组来使用数组方法，转换为数组可看类数组转换为数组

• 不同点
  

  

  • HTMLCollection对象有namedItem()方法，可以通过name访问元素，NodeList对象没有
  • nodeList对象有entries()、forEach()、keys()、values()方法

• 前四种返回的结果是实时的，后两种不是。若动态添加元素，前四种会主动更新，后两种不会。
  HTML代码如下：

<div></div>

js代码如下：

const element1 = document.querySelectorAll('div');
const element2 = document.getElementsByTagName('div');
console.log(element1.length); // 1
console.log(element2.length); // 1
const newElement = document.createElement('div');
document.body.appendChild(newElement);
console.log(element1.length); // 1
console.log(element2.length); // 2

• 由于前四种是实时集合，并不需要收集好所有信息，然而querySelectorAll()方法会立即收集所有信息并生成一个静态列表，这样性能没有前四种高。

节点关系操作

由于浏览器对文本节点的个数处理的不同，主要有两种节点关系操作方式。

• 包括文本节点（除了IE9及之前版本不会返回文本节点，其他浏览器都会将文本节点计算在内）
  
  • childNodes, 返回nodeList对象，获取子节点
  • firstChild，获取第一个子节点
  • lastChild，获取最后一个子节点
  • previousSibling，获取兄弟节点中前一个节点，没有则为null
  • nextSibling，获取兄弟节点中后一个节点，没有则为null
  • parentNode，获取父节点
  • hasChildNodes，判断是否有子节点
• 不包括文本节点
  
  • children，返回HTMLCollection对象，获取元素子节点
  • firstElementChild，获取第一个子节点
  • lastElementChild，获取最后一个子节点
  • previousElementSibling，获取兄弟节点中前一个节点，没有则为null
  • nextElementSibling，获取兄弟节点中后一个节点，没有则为null
  • childrenElementCount，获取元素节点个数

节点操作

• createElement，创建新元素
• createTextNode，创建新节点
• appendChild，节点末尾插入元素。若该元素存在，相当于将该元素移动到末尾。
• insertBefore，在某个元素前插入。
• replaceChild，替换元素
• removeChild，移除元素。
  
  • parentElement.removeChild(element); // 使用父元素删除
  • element.parentNode.removeChild(element); // 使用自身删除
• cloneNode，复制元素。参数为true，表示深度复制，子元素也会被克隆；参数为false，表示浅层复制。
• innerHTML，直接访问表示获取该元素内部HTML内容；设置值，则替换该元素内部全部元素
• outerHTML，直接访问表示获取该元素（包括自身）的HTML内容；设置值，则替换该元素内容（包括该元素）
• textContent，innerText
• createDocumentFragment，为了减少DOM操作，改善性能，可以先使用该方法添加，最后一次添加到页面

元素属性

常见属性

• nodeName，tagName。两者值一样，都是获取元素名称。只是后者更加语义化。
• id
• title
• className
• style，后面会详解

属性操作

• getAttribute()
• setAttribute()
• removeAttribute()
  缺点：
• 这几个方法会触发浏览器重绘。因此一般对没有相应的DOM属性的属性使用它们。
• 使用getAttribute访问style属性时返回的是CSS文本，而通过属性访问返回的是对象。onclick这样的事件处理程序也有相似缺点。

类操作

对于类操作有classList属性。它是DOMTokenList的实例。

常用的方法有：
- length属性，类名个数
- item()
- add()，添加类名
- contains()，判断是否包含类名
- remove()，删除类名
- toggle()，若该类名存在则删除，若不存在，则添加

增加CSS样式

使用style属性。

• CSSStyleDeclaration的实例。
• 对于属性名称，js中使用驼峰表示法。
• 只包含了直接定义在元素上的属性，不包含内联和外部样式。
• 若要获取所有样式叠加后的属性，可以使用计算属性。
  
  • document.defaultView.getComputedStyle(元素，伪元素（可为null）)
  • 同样返回CSSStyleDeclaration的实例

CSSStyleDeclaration:

<div style="border: 1px solid red; width: 200px; height: 300px; background-color: aqua" class="aaa bbb"></div>

• cssText，所有CSS代码。可以一次设置多个属性。

const element = document.getElementsByTagName('div')[0];
console.log(element.style.cssText);// border: 1px solid red; width: 200px; height: 300px; background-color: aqua;

• length，应用给CSS属性的数量

 console.log(element.style.length); // 20

• getPropertyPriority(propertyName)，如果给定属性使用！important设置，则返回“important”；否则返回空字符串。
• getPropertyValue(propertyName)，返回给定属性的字符串值
• item(index)，返回给定位置的CSS属性的名称
• removeProperty(propertyName)，删除给定属性

• setProperty(propertyName, value, priority)，priority为“important”或者空字符串