整个页面可以看成文档节点，节点用node表示。页面里面全是节点，元素节点， 属性节点，文本节点(文字，空格，换行)，
节点：一定有节点类型，节点名称，节点值
节点类型的值： 元素节点为1，属性节点为2，文本节点为3
通过节点，可以更好的获取元素。逻辑全在代码里面
<body>
<div class="con">
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
</ul>
<ol>
<li class="item7"></li>
<li class="item8"></li>
<li class="item9"></li>
<li class="item10"></li>
</ol>
</div>js部分
<script>
//我想要获取ul下面的所有li
var ulele = document.querySelector("ul");
var lis = ulele.querySelectorAll("li"); //获取了4个li没毛病
//console.log(lis);
//假如获得了ul里面的li，那如何重新获得ul元素节点呢？
console.log(lis[1].parentNode); //获取的是离这个元素最近的爸爸，而不是爷爷
//获取ol下所有的li元素节点
var olele = document.querySelector("ol");
console.log(olele.childNodes); //[text, li.item7, text, li.item8, text, li.item9, text, li.item10, text] 得到的结果，为什么会有九个节点呢？
//因为childNodes获取的是所有的节点，包括元素节点，文本节点
//要想获取元素节点
for (var i = 0; i < olele.childNodes.length; i++) {
if (olele.childNodes[i].nodeType == 1) { //元素节点的节点类型值为1，属性节点的节点类性质为2，文本节点的节点类性质为2
console.log(olele.childNodes[i]);
}
}
//好麻烦呀
//别慌，有直接获取元素节点的操作
console.log("-----------------华丽的分割线----------------------");
console.log(olele.children); //元素.children直接获取元素节点
console.log("--------节点操作之第一个元素和最后一个元素---------");
//获取ul下的第一个元素
var firstulli = ulele.firstChild;
console.log(firstulli); //结果#text 什么？获取的竟然是文本节点？
console.log(ulele.lastChild); //结果#text 什么？获取的竟然是文本节点？
//办法其一:
console.log(ulele.firstElementChild); //直接获取元素节点，但是兼容性不好
console.log(ulele.lastElementChild);
console.log("---------------------实际开发中的做法-----------------------");
console.log(ulele.children[0]);
console.log(ulele.children[ulele.children.length - 1]);
</script>长话短说：
子节点.parentNode得到的是直接父元素
父元素.childNodes得到的是所有子节点，包括元素节点，文本节点，父元素.children得到的是元素节点
父元素.firstChild得到的是第一个节点，经常是文本节点，因为需要换行空格嘛，父元素.firstElementChild得到父元素的第一个元素节点，但兼容性不好
实际开发中做法：先用children得到所有元素节点，再用伪数组的索引来取得相应位置的元素
全面理解虚拟DOM，实现虚拟DOM
DOM是很慢的，其元素非常庞大，页面的性能问题鲜有由JS引起的，大部分都是由DOM操作引起的。虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。
HTML文档解析和DOM树的构建
浏览器解析HTML文档生成DOM树的过程,以下是一段HTML代码，以此为例来分析解析HTML文档的原理.解析HTML文档构建DOM树的理解过程可分为两个主要模块构成，即标签解析、DOM树构建
原生js获取DOM对象的几种方法
javascript获取DOM对象的多种方法：通过id获取 、通过class获取、通过标签名获取、通过name属性获取、通过querySelector获取、通过querySelectorAll获取等
js实现DOM遍历_遍历dom树节点方法
遍历DOM节点常用一般用节点的 childNodes, firstChild, lastChild, nodeType, nodeName, nodeValue属性。在获取节点nodeValue时要注意，元素节点的子文本节点的nodeValue才是元素节点中文本的内容。
如何编写自己的虚拟DOM
要构建自己的虚拟DOM，需要知道两件事。你甚至不需要深入 React 的源代码或者深入任何其他虚拟DOM实现的源代码，因为它们是如此庞大和复杂——但实际上，虚拟DOM的主要部分只需不到50行代码。
归纳DOM事件中各种阻止方法
事件冒泡： 即事件开始时由最具体的元素(文档中嵌套层数最深的那个点)接收,事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件.与此同时，我们还需要了解dom事件绑定处理的几种方式:
关于DOM操作是异步的还是同步的相关理解
先列出我的理解，然后再从具体的例子中说明：DOM操作本身应该是同步的（当然，我说的是单纯的DOM操作，不考虑ajax请求后渲染等）；DOM操作之后导致的渲染等是异步的（在DOM操作简单的情况下，是难以察觉的）
JavaScript DOM事件模型
早期由于浏览器厂商对于浏览器市场的争夺，各家浏览器厂商对同一功能的JavaScript的实现都不进相同，本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类。
vuejs2.0如何获取dom元素自定义属性值
设置定义属性值 :data-value=..， 2.直接获取 3.通过this.$refs.***获取 1.目标DOM定义ref值： 2.通过 【this.$refs.***.属性名】 获取相关属性的值： this.$refs.*** 获取到对应的元素 ...
整理常见 DOM 操作
框架用多了，你还记得那些操作 DOM 的纯 JS 语法吗？看看这篇文章，来回顾一下~ 操作 className，addClass给元素增加 class，使用 classList 属性
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!