一.DOM介绍
DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：
"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式
二.DOM节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：
- 整个文档是一个文档节点(document对象)
- 每个 HTML 元素是元素节点(element 对象)
- HTML 元素内的文本是文本节点(text对象)
- 每个 HTML 属性是属性节点(attribute对象)
- 注释是注释节点(comment对象)
画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。
节点(自身)属性:
- attributes - 节点（元素）的属性节点
- nodeType – 节点类型
- nodeValue – 节点值
- nodeName – 节点名称
- innerHTML - 节点（元素）的文本值
导航属性:
- parentNode - 节点（元素）的父节点 (推荐)
- firstChild – 节点下第一个子元素
- lastChild – 节点下最后一个子元素
- childNodes - 节点（元素）的子节点
推荐导航属性：
parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
下面的图片展示了节点树的一部分，以及节点之间的关系：
访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素：
页面查找：
- 通过使用 getElementById() 方法
- 通过使用 getElementsByClassName() 方法
- 通过使用 getElementsByName() 方法
- 通过使用 getElementsByTagName() 方法
- 注意带Elements关键字的方法 取得是一个数组 需要用[0]才能取出找到的元素
<body>
<div id="div1">
<div class="div2">i am div2</div>
<div name="zhangsan">i am div2</div>
<div id="div3">i am div2</div>
<p>hello p</p>
</div>
<script>
var div1=document.getElementById("div1");
var ele = div1.getElementsByTagName("p")[0];
console.log(ele);
console.log(ele.innerHTML);
ele.innerHTML="innerHTML"
console.log(ele.innerHTML);
//parentElement // 父节点标签元素
//children // 所有子标签
//firstElementChild // 第一个子标签元素
//lastElementChild // 最后一个子标签元素
//nextElementtSibling // 下一个兄弟标签元素
//previousElementSibling // 上一个兄弟标签元素
//innerHTML 提取所找到元素里面内容，包括标签，并且显示出来
//innerText 只提取所找到元素里面内容，不包括标签
var p_ele = ele.parentElement;
console.log(p_ele); //div1
console.log(p_ele.firstElementChild); //div2
var l_ele = p_ele.lastElementChild; //p
console.log(l_ele.innerHTML); //innerHTML
var name_ele = document.getElementsByName("zhangsan")[0];
console.log(name_ele); //name=zhangsan
console.log(name_ele.innerHTML); //i am div2
console.log(name_ele.previousElementSibling); //div2
console.log(name_ele.nextElementSibling); //div3
</script>
</body>
eg:
<div id="div1">
<div class="div2">i am div2</div>
<div name="zhangsan">i am div2</div>
<div id="div3">i am div2<p>pppp</p>></div>
<p>hello p</p>
</div>
<script>
var div1=document.getElementById("div1");
var ele = div1.getElementsByTagName("p")[0];
console.log(ele);
console.log(ele.innerHTML);
//ele.innerHTML="innerHTML"
console.log(ele.innerHTML);
//parentElement // 父节点标签元素
//children // 所有子标签
//firstElementChild // 第一个子标签元素
//lastElementChild // 最后一个子标签元素
// nextElementtSibling // 下一个兄弟标签元素
//previousElementSibling // 上一个兄弟标签元素
var p_ele = ele.parentElement;
console.log(p_ele); //div1
console.log(p_ele.firstElementChild); //div2
var l_ele = p_ele.lastElementChild; //p
console.log(l_ele.innerHTML); //innerHTML
var name_ele = document.getElementsByName("zhangsan")[0];
console.log(name_ele); //name=zhangsan
console.log(name_ele.innerHTML); //i am div2
console.log(name_ele.previousElementSibling); //div2
var div3_ele = name_ele.nextElementSibling; //div3
console.log(div3_ele.innerHTML); // i am div2<p>innerHTML</p>>
console.log(div3_ele.innerText); // i am div2 ppp
div3_ele.innerHTML="<span>div33333</span>";
console.log(div3_ele.innerHTML); //<span>div33333</span>
console.log(div3_ele.innerText); //div33333
div3_ele.innerText="333";
console.log(div3_ele.innerText); //333
</script
参考：
https://www.cnblogs.com/yuanchenqi/articles/5980312.html