1.DOM(文档对象模型: document object mode)

- 1) document对象：指的是指向整个网页内容的一个对象
- 2）节点：Element类型对象，指向的是网页中的标签

2. 获取节点

• 1）通过id获取节点：getElementById()
  var p1node = document.getElementById('p1');
  console.log(p1node);
  p1node.innerText = 'Hello World';

• 2）通过class获取节点： getElementByClass(class值) - 返回节点数组
  var p2node = document.getElementsByClassName('p2');
  p2node[0].innerText = '百度一下';

• 3. 通过标签名获取节点：getElementByTagName(name值) - 返回节点数组

• 4）通过name属性值获取节点：getElementByName(name值) - 返回节点数组

• 5）获取子标签 node.children
  var div1node = document.getElementById('div1');
  var div1children = div1node.children;
  console.log(div1children);
  获取第一个子节点.firstElementChild
  获取最后一个子节点.lastElementChild
  获取父节点.parentElement

3.创建和添加节点

• 1）创建节点
  创建一个img标签
  imgnode = document.createElement('img');

• 2)添加节点
  父标签.appendChild(节点名)
  节点1.insertBefore(新节点，节点2)，在节点1中的节点2前面添加一个节点
  注意，一个节点不管添加几次，只有最后一次添加有效，因为节点只有一个，除非复制

4.拷贝/复制节点，并且可以随意更改

newimage = imgnode.cloneNode();

5. 删除节点

• 节点.remove() - 删除自身
• 父节点.removeChild(子节点) - 删除子标签

6. 替换节点

父节点.replaceChlid(新节点，旧节点)