使用原生的JavaScript操作DOM

使用原生的JavaScript操作DOM

步骤:获取元素->添加(创建)元素->删除元素->更改元素

1.获取元素方法:
a、通过ID获取（getElementById）
b、通过name属性（getElementsByName）
c、通过标签名（getElementsByTagName）
d、通过类名（getElementsByClassName）
e、通过CSS选择器获取（querySelector、querySelectorAll）

注:querySelector()和querySelectorAll()。
前者返回匹配的第一个元素，后者返回匹配的元素数组
 

var domById  = document.getElementById('id');
var domByName  = document.getElementsByName('inputName');
var domTagName  = document.getElementsByTagName('div');
var domByClassName = document.getElementsByClassName('className');

2.插入(创建)元素
a.使用insertAdjacentHTML()。是html元素的方法。可以向指定位置插入指定的html内容。
  element.insertAdjacentHTML(position, text);
  参数:position
   beforebegin: element之前（兄弟元素）
   afterbegin:element之内（第一个子元素之前）
   beforeend:element之内（最后一个子元素之后）
   afterend: element之后（兄弟元素）
  参数:text
    字符串形式的html内容
    divElement.insertAdjacentHTML('beforeend','<p>6</p>') ;
b.使用createElement创建元素
    document.createElement("div");
3.删除元素
a.可以直接删除某个节点 (Node.remove())
b.删除某个节点的子节点 (Node.removeChild(child))

4.修改元素
a.修改元素主要使用元素（Element）的innerHTML和innerText属性。
b.用来获取或者设置包含在Element内部的html或者xml内容。
   Element.innerHTML
  HTMLElement.innerText

let container = document.createElement("div");
let container.innerHTML = `
      <p>Name: ${name}</p>
      <p>Age: ${age}</p>
      <p>Gender: ${gender}</p>
    `;
document.body.appendChild(container);