使用原生的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);