JS获取元素DOM操作

什么是DOM？

DOM编程就是用JS操作HTML或CSS， 但是HTML仅仅是个描述网页的纯文本文件， 本身没功能，仅仅起到描述作用，所以浏览器会先读HTML， 把它解析为JS可以理解的对象，JS操作的仅仅是解析后的HTML对象， 这些对象就统称为DOM（Document Object Model 文档对象模型。

一、获取节点

• 通过元素名称获取元素

  document.getElementsByTagName(标签名)

• 根据名称获取元素

  document.getElementsByName(name)

• 通过id获取元素

  document.getElementById(“idName”)
  document.querySelectorAll(“idName”)

• 通过class获取元素

  document.querySelectorAll(".className")
  document.getElementsByClassName(className)

• 通过CSS选择器来获取一个元素

  document.querySelector(选择器)

二、获取父子节点

• el.childNodes 获取子节点

• el.parentNodes 获取父节点

三、创建节点

• document.createElement(标签名)

• document.createTextNode(文字) 创建文字节点

四、操作元素内容

• el.innerText 元素中的文字
• el.innerHTML 元素中的HTML
• el.appendChild(Node) 追加子元素
• el.insertBefore 头部追加DOM元素

五、操作class

• 为DOM元素添加类

  el.classList.add(className)

• 删除类

  el.classList.remove(className);

• 判断是否有该类

  if(el.classList.contains(classNames))