<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app">
<div class="title">123</div>
</div>
<script>
/*
获取节点的方式
1. document.getElementById() //根据节点的id值来获取该节点
2. document.getElementByTagName() //根据节点的标签来获取该节点
3. document.getElementByName() //根据节点的属性值来获取该节点
4. document.getElementByClassName() //根据节点的类名来获取该节点
5. document.querySelectorAll() //根据元素标签获取节点 考虑兼容
*/
var app = document.getElementsByClassName("app")[0]
/*
从一个中心节点访问其所有直系或亲属节点
1，访问父节点 parentNode
2, 访问上一个兄弟节点 previousSibling
3，访问下一个兄弟节点 nextSibling
4，访问该节点的第一个属性节点 attributes[1]
5, 访问最后一个子节点 lastChild 或 childNodes[childNodes.length-1]
*/
//---------------------------------------------------------------------------
/*
获取属性
getAttribute("属性名") //返回属性值
getAttributeNode("属性名") //返回属性节点
*/
//---------------------------------------------------------------------------
/*
创建 （常用）
document.createElement() //创建元素节点
document.createTextNode() //创建文本节点
document.createAttribute() //创建属性节点
innerHTML
innerText
cloneNode() //克隆
*/
//---------------------------------------------------------------------------
/*
加入
appendChild() //追加到尾出
insertBefore() //将元素插入到某一元素的前面
用法： 父元素.insertBefore(要插入的新元素,新元素插入其前面的元素)
*/
//---------------------------------------------------------------------------
/*
删除
removeChild //删除子元素
removeAttributeNode //删除属性节点
*/
//---------------------------------------------------------------------------
/*
修改节点
删除再加入
修改样式
style.***=***
setAttribute("style","****")
修改文本
.innerHTML
.innerText
节点操作
.nodeValue
修改属性
.属性名=属性值
.setAttribute("属性名","属性值")
*/
//---------------------------------------------------------------------------
/*
其余常用的操作
style //修改css样式
setAttribute("属性名","属性值") // 设置属性
*/
</script>
</body>
</html>