本文介绍了JavaScript中DOM操作的相关知识，包括DOM节点的分类、获取方法，如元素节点、文本节点和属性节点。讲解了如何获取节点、节点属性，如nodeType、nodeName和nodeValue，并探讨了操作DOM节点的增删改查操作，以及获取元素的非行间样式和偏移量的方法。
DOM(下)
DOM 就是我们 html 结构中一个一个的节点构成的
不光我们的标签是一个节点，我们写的文本内容也是一个节点，注释，包括空格都是节点
DOM节点
DOM 的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点
什么是分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点(标签节点)
比如我们标签里面写的文字，那么就是文本节点
写在每一个标签上的属性，就是属性节点
元素节点
我们通过 getElementBy... 获取到的都是元素节点
属性节点
我们通过 getAttribute 获取的就是元素的属性节点
文本节点
我们通过 innerText 获取到的就是元素的文本节点
获取节点
childNodes：获取某一个节点下 所有的子一级节点
<body> <div> <p>hellop> div> <script> // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点 var oDiv = document.querySelector('div') console.log(oDiv.childNodes) /* NodeList(3) [text, p, text] 0: text 1: p 2: text length: 3 __proto__: NodeList */script>body>我们会发现，拿到以后是一个伪数组，里面有三个节点
一个 text：从
一直到中间有一个换行和一堆空格，这个是第一个节点，是一个文本节点
一个 p：这个 p 标签就是第二个节点，这个是一个元素节点
一个 text：从
一直到
这个时候就能看到我们有不同的节点类型了
children ：获取某一节点下所有的子一级 元素节点
<body> <div> <p>hellop> div> <script> // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点 var oDiv = document.querySelector('div') console.log(oDiv.children) /* HTMLCollection [p] 0: p length: 1 __proto__: HTMLCollection */script>body>-
我们发现只有一个节点了，因为 children 只要元素节点
div 下面又只有一个元素节点，就是 p
所以就只有一个，虽然只有一个，但是也是一个 伪数组
firstChild：获取某一节点下子一级的 第一个节点
<body> <div> <p>hellop> div> <script> // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点 var oDiv = document.querySelector('div') console.log(oDiv.firstChild) // #textscript>body>-
这个是只获取一个节点，不再是伪数组了
获取的是第一个
第一个就是
一直到的那个换行和空格，是个文本节点
lastChild：获取某一节点下子一级的 最后一个节点
<body> <div> <p>hellop> div> <script> // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点 var oDiv = document.querySelector('div') console.log(oDiv.lastChild) // #textscript>body>-
只获取一个节点，不再是伪数组</
最低0.47元/天 解锁文章
6814
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
