DOM操作
DOM 节点的操控
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点。
HTML DOM 的方法是我们可以在节点（HTML 元素）上执行的动作。
如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。
严格地讲，我们这里的DOM节点是指Element，但是DOM节点实际上是Node，在HTML中，Node包括Element、Comment、CDATA_SECTION等很多种，以及根节点Document类型，但是，绝大多数时候我们只关心Element，也就是实际控制页面结构的Node，其他类型的Node忽略即可。根节点Document已经自动绑定为全局变量document。
我们可以通过HTML页面中的<script>标签来写一段js代码来触发操作DOM节点的事例。
<body>
<div id="box">
<div style="margin-bottom: 10px;border-bottom: 1px solid #eee;">事例</div>
<div style="display: flex;width: 100%;">
</div>
</div>
<script>
let data =[
{
"imgUrl": "https://img2.baidu.com/it/u=3293132716,3870482297&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
"title": "标题内容",
"context": "文本内容文本内容",
},
{
"imgUrl": "https://img2.baidu.com/it/u=3293132716,3870482297&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
"title": "标题内容",
"context": "文本内容文本内容",
},
{
"imgUrl": "https://img2.baidu.com/it/u=3293132716,3870482297&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
"title": "标题内容",
"context": "文本内容文本内容",
},
]
let box=document.getElementById('box') // 获取id为box的元素
let boxclass = document.createAttribute('class') // 创建一个属性
boxclass.value = 'boxclass' // 为属性设值
box.setAttributeNode(boxclass) // 元素设置属性
let boxbyclass = document.getElementsByClassName('boxclass')[0] // 获取class为boxclass的元素，这里需要用索引获取
for (let i =0;i<data.length;i++){ // 我们也可以用动态手法根据数据操作DOM
let itemBox = document.createElement('div') // 创建一个元素div
itemBox.style = 'margin-right: 10px;' // 设置这个元素div的style属性的值
itemBox.style.marginRight = '50px' // 当属性中有这个值之后才能通过 . 的方式来访问属性
let itemBoxImg = document.createElement('img') // 创建一个元素img
itemBoxImg.style="width:100px;height:100px;" // 设置这个元素img的style属性的值
itemBoxImg.src=data[i].imgUrl // 设置这个元素img的style属性的动态值
let itemBoxH1 = document.createElement('h1')
itemBoxH1.innerHTML = data[i].title
let itemBoxP = document.createElement('p')
itemBoxP.innerHTML = data[i].context
boxbyclass.children[1].appendChild(itemBox) // 这里boxbyclass下面已经写了两个div，这里可以通过children属性索引方式来获取想要的节点，把我们新创建的itemBox元素插入到boxbyclass里
itemBox.appendChild(itemBoxH1) // 在itemBox元素内插入我们的h1元素，这里不是指在元素内插入并排在末尾
itemBox.insertBefore(itemBoxImg, itemBoxH1) // 在h1元素前插入我们的img元素
itemBox.appendChild(itemBoxP) // 在itemBox元素内插入我们的p元素，并默认为末尾
}
</script>
</body>一、查找返回dome元素
document.getElementById(id)——通过元素 id 来查找元素
document.getElementsByTagName(name)——通过标签名来查找元素，返回一个数组
document.getElementsByClassName(name)——通过类名来查找元素，返回一个伪数组，哪怕只有一个元素也要通过索引来获取
二、改变DOM元素属性（element为元素）
element.innerHTML = new html content ——改变元素的 inner HTML，也就是标签里面的内容
element.attribute = new value——改变 HTML 元素的属性值
element.setAttribute(attribute, value)——改变 HTML 元素的属性值
element.style.color = new style——改变 HTML 元素的样式
三、增删改DOM元素（document也可以是某个元素，这样操作就是在该dom之中）
事例：(创建一个div标签)：document.createElement('div')
document.createElement(element)——创建 HTML 元素
document.removeChild(element)——删除 HTML 元素
document.appendChild(element)——在元素内添加一个元素，并默认排在末尾
document.replaceChild(element)——替换 HTML 元素
document.write(text)——写入 HTML 输出
四、属性操作（document也可以是某个元素，这样操作就是在该dom之中）
document.createAttribute('class')——创建一个属性
五、节点属性
parentNode——返回节点的父节点
childNodes——返回子节点集合，childNodes[i]
firstChild——返回节点的第一个字节点，普遍用法是访问该元素的文本节点
lastChild——返回节点的最后一个字节点
nextSibling——下一个节点
previousSibling——上一个节点
element属性：给高级浏览器使用，低版本用上面的节点属性
firstElementChild——返回最后一个子节点，普遍用法是访问该元素的文本节点
lastElementChile——返回节点最后一个字节点
nextElementSibling——下一个节点
previousElementSibling——上一个节点
每个节点都拥有包含着关于节点的某些信息如：
nodeName(节点名称)
nodeValue(节点值)
nodeType(节点类型)
以上就是对DOM常用操作的一个总结了，最好还是实践一次就能够更加明白了～
