在web前端开发工作中，会遇到各种各样需要改变dom的场景，目前已有的各种框架都可以帮助我们实现很多。比如MVVM框架。

但是也不是所有的问题都可以依靠框架。

作为一名前端开发，掌握浏览器原生的api还是很有必要的。有助于给已有框架的漏洞打补丁，来实现产品的需求。还可以为我们自己封装轮子提供基础知识。

一、获取元素

1.通过id获取

document.getElementById(id)
document.querySelector("#"+id)

2.通过class获取

document.getElementsByClassName(class)
document.querySelector("."+class)

3.通过标签名获取

document.getElementsByTagName("div")
document.querySelector("div")

4.通过name获取

// html
<div name="name1">1</div>
// js
document.getElementsByName("name1")
document.querySelector("div[name=‘name1’]")

5.通过元素其他属性获取

// html
<div key="value">1</div>
// js
document.querySelector("div[key=value]")

6.通过浏览器其他的api获取

document.documentElement // 获取html元素
document.body // 获取body元素

7.说明

// getElementById和querySelector是获取的是第一个匹配的元素
// getElementsByName获取的是NodeList集合
// querySelector如果改为querySelectorAll，则获取的是NodeList集合

二、设置或获取元素的属性

1.设置或获取元素的文本

let domObj // 获取的dom元素
domObj.innerText // 用来设置或获取元素的文本

2.设置或获取元素的其他属性

let domObj // 获取的dom元素
domObj.innerHTML// 用来设置或获取位于对象起始和结束标签内的HTML
domObj.getAttribute("a") // 获取该元素上面定义的属性a
domObj.setAttribute("a") // 设置该元素上面定义的属性a
domObj.style.setProperty(key,value) // 设置该元素key样式的值为value

三、创建元素

document.createElement("div")

四、父元素与子元素

let domObj // 获取的dom父元素

// 参数为node对象
let child = document.createElement("div") // 创建的dom子元素
domObj.appendChild(child) // 向父元素里添加子元素(参数仅限node对象)
domObj.removeChild(child) // 从父元素里移除子元素(参数仅限node对象)

// 参数为html字符串
let htmlStr="<div>1</div>"
// 'beforebegin': 在元素之前;
// 'afterbegin': 在元素的第一个子元素之前;
// 'beforeend': 在元素的最后一个子元素之后;
// afterend': 在元素之后
domObj.insertAdjacentHTML("beforeend",htmlStr) // 插入html片段（参数为html字符串）

五、删除元素

1.根据父元素删除子元素

let domObj // 获取的dom父元素
let child // 获取的dom子元素
domObj.innerHTML="" // 删除所有的子元素
domObj.removeChild(child) // 从父元素里移除子元素(参数仅限node对象)

2.删除元素自身

let domObj // 获取的dom元素
domObj.remove() // 删除该元素

六、其他

关于iframe的操作：iframe必知必会