大家好，这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号，欢迎大家订阅关注。在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
一、节点
1、节点的概念
页面中的所有内容，包括标签，属性，文本（文字，空格，回车，换行等），也就是说页面的所有内容都可以叫做节点。
2、节点相关的属性
2.1、节点分类
标签节点：比如 div 标签，p 标签等。
属性节点：比如 class，value 等。
文本节点：比如闭合标签中的文本内容。
2.2、节点属性
nodeType：节点的类型，它的值有 1,2,3 三种。
? 标签节点：值为 1
? 属性节点：值为 2
? 文本节点：值为 3
nodeName：节点的名字
? 标签节点：大写的标签名字
? 属性节点：小写的属性名字
? 文本节点：#text
nodeValue：节点的值
? 标签节点：null
? 属性节点：属性的值
? 文本节点：文本内容
3、获取相关节点
3.1、获取父节点和父元素
父节点只能是标签，不能是属性节点和文本节点，所以父节点也是父元素。
<body> ???<div id="dv"> ???????<p id="pid"></p> ???????<span></span> ???</div> ???<script src="common.js"></script> ???<script> ???????var dvObj = my$("pid"); ???????console.log(dvObj.parentNode); ???????console.log(dvObj.parentElement); ???</script></body>parentNode：获取元素的父节点。
parentElement：获取元素的父元素。
3.2、获取子节点和子元素
<body> ???<div id="dv"> ???????<p id="pid">p标签</p> ???????<span>span标签</span> ???????<ul> ???????????<li>li标签</li> ???????????<li>li标签</li> ???????????<li>li标签</li> ???????????<li>li标签</li> ???????????<li>li标签</li> ???????</ul> ???</div> ???<script src="common.js"></script> ???<script> ???????var dvObj = my$("dv"); ???????// 获取子节点 ???????console.log(dvObj.childNodes); // 7个 ???????// 获取子元素 ???????console.log(dvObj.children); ??// 3个 ???</script></body>childNodes：获取所有子节点（包括标签，属性，节点）
children：获取所有子元素（仅包括标签）
3.3、通过属性的名字获取属性节点
<body> ???<div id="dv"> ???????<p id="pid">p标签</p> ???????<span>span标签</span> ???????<ul> ???????????<li>li标签</li> ???????????<li>li标签</li> ???????????<li>li标签</li> ???????????<li>li标签</li> ???????????<li>li标签</li> ???????</ul> ???</div> ???<script src="common.js"></script> ???<script> ???????var dvObj = my$("dv"); ??????????console.log(dvObj.getAttributeNode("id")); // id="dv" ???</script></body>getAttributeNode：可以获取属性节点。
3.4、获取节点和元素的12行代码
<body> ???<div id="dv"> ???????<p id="pid">p标签</p> ???????<span>span标签</span> ???????<ul id="uu">海 ???????????<li>li标签</li>内 ???????????<li>li标签</li>存 ???????????<li id="three">li标签</li>知己 ???????????<li>li标签</li>天涯 ???????????<li>li标签</li>若比邻 ???????</ul> ???</div> ???<script src="common.js"></script> ???<script> ???????var ulObj = my$("uu"); ???????// 父节点 ???????console.log(ulObj.parentNode); ???????// 父元素 ???????console.log(ulObj.parentElement); ???????// 子节点 ???????console.log(ulObj.childNodes); ???????// 子元素 ???????console.log(ulObj.children);// ------------------------------------------------ ???????// 第一个子节点 ???????console.log(ulObj.firstChild); ???????// 第一个子元素 ???????console.log(ulObj.firstElementChild); ???????// 最后一个子节点 ???????console.log(ulObj.lastChild); ???????// 最后一个子元素 ???????console.log(ulObj.lastElementChild); ???????// 某个元素的前一个兄弟节点 ???????console.log(my$("three").previousSibling); ???????// 某个元素的前一个兄弟元素 ???????console.log(my$("three").previousElementSibling); ???????// 某个元素的后一个兄弟节点 ???????console.log(my$("three").nextSibling); ???????// 某个元素的后一个星弟元素 ???????console.log(my$("three").nextElementSibling); ???</script></body>1、以上前四个，chrome, firefox, IE8 都支持
2、后面八个，chrome，firefox支持，IE8下，所有获取节点的操作都获取的是元素，所有获取元素的操作都是 undefined。
3.5、总结
- 获取父子节点和元素的操作，chrome, firefox, IE8 都支持；
- 获取特殊子节点或者子元素和兄弟节点和元素操作，IE8 中所有的节点操作都是元素操作，所有的元素操作都是 undefined。
4、通过节点操作元素
通过节点操作元素的背景颜色
// 通过节点设置p标签的背景颜色为蓝色<body> ???<input type="button" value="变色" id="btn"> ???<div id="dv"> ???????<p>p标签</p> ???????<span>span标签</span> ???????<p>p标签</p> ???????<span>span标签</span> ???????<p>p标签</p> ???</div> ???<script src="common.js"></script> ???<script> ???????my$("btn").onclick = function () { ???????????var dvObj = my$("dv"); ???????????var nodes = dvObj.childNodes; ???????????for(var i=0; i<nodes.length; i++) { ???????????????if((nodes[i].nodeType === 1) && (nodes[i].nodeName === "P")) { ???????????????????nodes[i].style.backgroundColor = "blue"; ???????????????} ???????????} ???????}; ???????????</script></body>通过节点属性来区分节点和元素。
5、封装节点兼容代码
<body> ???<input type="button" value="变色" id="btn"> ???<ul id="uu"> ???????<li>复仇者联盟1</li> ???????<li>复仇者联盟2</li> ???????<li>复仇者联盟3</li> ???????<li id="ii">复仇者联盟4</li> ???????<li>复仇者联盟5</li> ???????<li>复仇者联盟6</li> ???????<li>复仇者联盟7</li> ???????<li>复仇者联盟8</li> ???</ul> ???<script src="common.js"></script> ???<script> ???????// 获取任意一个父元素的第一个子元素 ????????function getFirstElement(element) { ???????????if(element.firstElementChild) { ???????????????return element.firstElementChild; ???????????} else { // 主要考虑到多个文本节点的影响 ???????????????var node = element.firstChild; ???????????????while((node) && (node.nodeType !== 1)) { ???????????????????node = node.nextSibling; ???????????????} ???????????????return node; ???????????} ???????} ??????????????// 获取任意一个父元素的最后一个子元素 ??????????????function getLastElement(element) { ???????????if(element.lastElementChild) { ???????????????return element.lastElementChild; ???????????} else { // 主要考虑到多个文本节点的影响 ???????????????var node = element.lastChild; ???????????????while((node) && (node.nodeType !== 1)) { ???????????????????node = node.previousSibling; ???????????????} ???????????????return node; ???????????} ???????} ????????// 获取任意一个元素的前一个兄弟元素 ???????????function getPreviousElement(element) { ???????????if(element.previousElementSibling) { ???????????????return element.previousElementSibling; ???????????} else { // 主要考虑到多个文本节点的影响 ???????????????var node = element.previousSibling; ???????????????while((node) && (node.nodeType !== 1)) { ???????????????????node = node.previousSibling; ???????????????} ???????????????return node; ???????????} ???????} ????????// 获取任意一个元素的后一个兄弟元素 ???????????????function getNextElement(element) { ???????????if(element.nextElementSibling) { ???????????????return element.nextElementSibling; ???????????} else { // 主要考虑到多个文本节点的影响 ???????????????var node = element.nextSibling; ???????????????while((node) && (node.nodeType !== 1)) { ???????????????????node = node.nextSibling; ???????????????} ???????????????return node; ???????????} ???????} ????????// 测试 ???????console.log(getFirstElement(my$("uu")).innerText); ???????console.log(getLastElement(my$("uu")).innerText); ???????console.log(getPreviousElement(my$("ii")).innerText); ???????console.log(getNextElement(my$("ii")).innerText); ???</script></body>主要是兼容chrome 和 IE8 之间的差异，其次以获取任意一个父元素的第一个子元素为例，之所以不在 else 里面直接使用
return element.firstChild;主要考虑到标签之间可能有多个文本节点的影响。
从零开始学 Web 之 DOM（四）节点
原文地址：https://www.cnblogs.com/lvonve/p/9204518.html