JS之DOM元素的节点解析_节点类型中代表元素节点的数字-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46179838/article/details/108948423

本文详细探讨了JavaScript中DOM元素节点的相关知识，包括如何查看元素节点，使用querySelector和querySelectorAll，遍历节点树，节点的属性如nodeName、nodeValue、nodeType以及attributes，以及Node.hasChildNodes()方法。此外，还介绍了DOM结构树的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM （Document Object Model）——文档对象模型

一、对节点的一些了解

1、查看元素节点

document 代表整个文档	·	·	·
document.getElementsByTagName();	通过标签名的方式把你这个标签给选出来	标签选择器	此方法定义在docuement.prototype和Element.prototype上
document.getElementsByClassName();	返回文档中所有指定类名的元素集合，作为Nodelist对象	IE8和IE8以下版本中没有，可以多个class一起	在Document.prototype和ELement.prototype类中均有定义
document.getElementsByName();	只有部分标签name可生效（表单、表单元素、img、ifraem）		此方法定义在HTMLDocument.prototype上，即非HTML中的document不能使用（XML document，Element）
document.getElementsById();	返回对拥有指定Id的第一个对象的引用	元素Id在IE8以下的浏览，不区分id的大小写，而且也返回匹配name属性的元素	此方法定义在Document.prototype上，即Element节点上不能使用
document.querySelector();	选出第一个元素		在Document.prototype和ELement.prototype类中均有定义
document.querySelectorAll();	选出一组元素		在Document.prototype和ELement.prototype类中均有定义

querySelector和querySelectorAll是CSS选择器，在IE8之前不兼容，它们有一些缺点：实时性问题，当你已经选出元素之后，无论再怎么修改都与它无关

HTMLDocument.prototype定义了一些常用的属性，body、head分别指代HTML文档中的<body>、<head>标签

当你想选出body或者head标签时，可以直接在控制台写document.body或者document.head即可

Document.prototype上定义了documentElement属性，指代文档的根元素，在HTML文档中，他总是指代元素

当你想选出html标签时，可以直接在控制台写document.documentElement即可

2、遍历节点树

一个元素只有一个父级，有无数个子节点们（直系的）	·
parentNode	父节点
childNodes	子节点
firstChild / lastChild	第一个子节点 / 最后一个子节点
previousSibling / nextSibling	前一个兄弟节点 / 后一个兄弟节点

3、基于元素节点树的遍历

·	·	·
parentElement	返回的当前元素额父元素节点	（IE不兼容）
children	只返回当前元素的元素子节点
node.childElementCount === node.children.length	当前元素节点的子元素节点个数	（IE不兼容）
firstElementChild	返回的是第一个元素节点	（IE不兼容）
lastElementChild	返回的是最后一个元素节点	（IE不兼容）
nextElementSibling	返回后一个兄弟元素节点	（IE不兼容）
previousElementSibling	返回前一个兄弟元素节点	（IE不兼容）

4、节点的属性

（1） nodeName 元素的标签名，以大写形式表示，只读

（2） nodeValue 只有text节点和comment节点有，且展示它的文本内容，可读写

（3） nodeType 判断该节点的类型，只读取

eg：现在封装一个方法，要求返回div的直接子元素节点，但不允许用children

function retElementChild(node) {
   var temp = {
      length : 0,
      push : Array.prototype.push,
      splice : Array.prototypece
   },
   child = node.childNodes,
   len = child.length;
   for(var i = 0; i < len; i++) {
       if(child[i].nodeType === 1) {
           temp.push(child[i]);
       }
    }
    return temp;
}