Javascript DOM

1. 什么是DOM

DOM 全称是 Document Object Model，也就是文档对象模型。DOM 就是针对 HTML 和 XML 提供的一个API。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。我们可以把一个HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如

这些标签都看做一个对象，每个对象都叫做一个节点（node），节点可以理解为 DOM 中所有 Object 的父类。

2. DOM 有什么用

通过 DOM 操作HTML元素，你可以改变网页。比如我们现在要更改网页标题，可以直接键入代码：document.title = 'How to learn javascript'
这个 API 使得在网页被下载到浏览器之后改变网页的内容成为可能。

1.你可以使用 Javascript 语言来操作 DOM 以改变网页。
2.为了改变网页，你必须告诉 Javascript 改变哪一个节点。这就是操作 DOM。
3.改变网页，实际就是操作DOM对节点进行增删改查。

3. DOM元素的增删改查

3.1 添加元素
Document.createElement() // 创建元素
语法：

  let element = document.createElement(tagName[, options])

Document.createTextNode() // 创建一个新的文本节点
语法：

   var text = document.createTextNode(data)`

Document.createAttribute() // 创建并返回一个新的属性节点
语法：

  attribute = document.createAttribute(name)

Document.createComment() // 创建并返回一个注释节点
语法：

  var commentNode = document.createComment(data)

Document.createDocumentFragment() // 创建一个新的空的文档片段
语法：

  var docFragment = document.createDocumentFragment()

Node.appendChild() // 将一个节点添加到指定父节点的子节点列表末尾
语法：

 var child = node.appendChild(child)

Element.classList.add() // 添加指定的类值class
语法：

elementNodeReference.classList.add( String [, String] )

Document.write()
Document.writeIn() // 将文本字符串写入打开的文档流
语法：

  document.write(markup)
  document.writeIn(line)

document.write()和writeIn()的区别是前者没有换行，而后者有换行
3.2 删除元素
Element.removeAttribute() // 从元素中删除指定的属性
语法：

 element.removeAttribute(attrName)

Element.removeChild(）// 删除子元素
语法：

var oldChild = node.removeChild(child);
  OR
  element.removeChild(child);

ChildNode.remove() // 删除元素
语法：

  elementNodeReference.remove()

Child.parentNode.removeChild(child) // 不确定父元素时可这样删除子元素
示例：

 if (node.parentNode) {
  //判断node是否在DOM树中
    node.parentNode.removeChild(node);
  }

Element.classList.remove() // 移除元素中一个或多个类名
语法：

elementNodeReference.classList.remove( String [,String] )

3.3 修改元素
Node.innerText // 修改元素文本内容
语法：

  Node.innerHTML =new content

Element.innerHTML // 设置或获取描述元素后代的HTML语句
语法：

const content = element.innerHTML;
  // 返回时，内容包含描述所有元素后代的序列化HTML代码。
  element.innerHTML = markup;
    // 除所有元素的子节点，解析内容字符串，并将生成的节点分配给元素的子元素。

node.cloneNode() // 拷贝元素(包括所有属性和值)

3.4 查找元素
attribute.getAttribute() // 返回元素的指定属性值
语法：

 let attribute = element.getAttribute(attributeName)

Document.getElementsByClassName() // 返回一个节点列表（数组），包含了所有拥有指定 class 的子元素
语法：

  var elements = document.getElementsByClassName(names); // or:
  var elements = rootElement.getElementsByClassName(names);

Document.getElementsByName() // 返回带有指定名称的对象集合
语法：

 elements = document.getElementsByName(name)

Document.getElementsByTagName() // 返回带有指定标签名的对象集合
语法：

  var elements = document.getElementsByTagName(name)

Document.getElementById() // 返回对拥有指定 id 的第一个对象的引用
语法：

  element = document.getElementById(id)

Document.querySelector() // 返回文档中匹配指定的CSS选择器的第一元素
语法及示例：

 element = document.querySelector(selectors) // 语法
  //example
  document.querySelector("#demo") // 获取文档中ID为demo的元素

Document.querySelectorAll() // 返回与指定的选择器组匹配的文档中的元素列表
语法：

 elementList = document.querySelectorAll(selectors)

DOM 和 HTML是一回事吗？

就像有些菜鸡把JQuery和Javascript的本质搞混一样（…反正不是我，虽然我也菜），DOM和HTML也完全不是一回事。

DOM是一个API，DOM是一个API，DOM是一个API（重要的话讲三遍）；

HTML(Hyper Text Markup Language)则是一种标记语言，HTML在DOM的模型标准中被视为对象。

DOM只提供编程接口，却无法实际操作HTML里面的内容。它是一个门，或者说是沟通用的桥梁。

但是，前端工程师，一般在浏览器端操作HTML。每个Web浏览器都会使用DOM，所以页面可以被脚本语言访问。而所有的浏览器都是以Javascript作为默认的脚本语言。所以HTML在浏览器端基本上可以直接通过DOM模型来操作，通过script标签载入或者直接插入Javascript脚本，通过DOM直接操作浏览器端的HTML文件。正是这种无缝融合，导致DOM和HTML的概念很容易混淆。

DOM 和 JAVASCRIPT什么关系？

Javascript可以通过DOM直接访问和操作网页文档的内容，一开始，DOM是为方便Javascript操作设计的API。但其实发展到后来，他们是两个独立的个体。而且Javascript不是唯一可以使用DOM的编程语言，比如python也可以访问DOM。所以DOM不是提供给Javascript的API，也不是Javascript里的API。但JavaScript可以通过DOM访问和操作HTML和XML文档内容。