JavaScript 中 Node类型(属性)

最新推荐文章于 2024-07-31 16:33:32 发布
最新推荐文章于 2024-07-31 16:33:32 发布
阅读量114 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/C20001206/article/details/131523852
版权
本文详细介绍了DOM中的Node接口，包括节点类型的分类如文档节点、元素节点等，以及Node接口的常见属性如nodeType、nodeName、nodeValue、textContent、nextSibling、previousSibling、parentNode和parentElement等。这些属性帮助开发者在JavaScript中操作和遍历DOM树，例如获取节点名称、文本内容、相邻节点以及父节点等信息。
摘要由CSDN通过智能技术生成

目录

Node类型概念：

2.Node类型的属性:

        1.nodeType属性返回一个整数值，表示节点的类型，常用节点类型如下：

        2.node.Name属性:

        3.nodeValue(可读可写)

        4.textContent属性

        5.nextSibling

        6.previousSibling

        7.parentNode

        8.parentElement

        9.firstChild和lastChild

        10.childNodes

Node类型概念：

        DOM Level 1 描述了名为 Node 的接口，这个接口是所有 DOM 节点类型都必须实现的。Node 接口在 JavaScript中被实现为 Node 类型，在除 IE之外的所有浏览器中都可以直接访问这个类型。在 JavaScript中，所有节点类型都继承 Node 类型，因此所有类型都共享相同的基本属性和方法。

2.Node类型的属性:

        1.nodeType属性返回一个整数值，表示节点的类型，常用节点类型如下：

节点类型   值对应常量
文档节点（document9Node.DOCUMENT_NODE
元素节点（element）1Node.ELEMENT_NODE
属性节点（attr）2Node.ATTRIBUTE_NODE
文本节点（text）3 Node.TEXT_NODE
文档类型节点（DocumentType）10Node.DOCUMENT_TYPE_NODE
注释节点（Comment）8Node.COMMENT_NODE
档片断节点（DocumentFragment11Node.DOCUMENT_FRAGMENT_NODE

        2.node.Name属性:

                作用:返回节点的名称
                语法: 节点.Name
                返回值: 该节点的大写

代码模块展示：

<body>
    <div id="one"></div>
    <script>
        // 获取DOM元素
        const one = document.querySelector('#one')
        // nodeName 属性返回节点的名称 (大写)
        console.log(one.nodeName)  // DIV

    </script>
</body>

        3.nodeValue(可读可写)

                作用: nodeValue属性返回一个字符串，表示当前节点本身的文本值，该属性可读写只有文本节点（text）、注释节点（comment）和属性节点（attr）有文本值.
                语法: 节点.nodeValue
                返回值: 读取到的内容字符串 

代码模块展示：

<body>
    <div id="one">hello world</div>
    <script>
        // 获取DOM元素
        const one = document.querySelector('#one')
        // nodeValue属性返回一个字符串，表示当前节点本身的文本值，该属性可读写只有文本节点（text）、注释节点（comment）和属性节点（attr）有文本值.
        // 读:
        console.log(one.nodeValue) // null
        console.log(one.firstChild.nodeValue) // hello world
        // 写
        one.firstChild.nodeValue = 'nihao'
        console.log(one.firstChild.nodeValue) // nihao
        

    </script>
</body>

        4.textContent属性

                作用: textContent属性返回当前节点和它的所有后代节点的文本内容
                语法: 节点.textContent
                返回值: 当前节点和它的所有后代节点的文本内容

代码模块展示：

<body>
    <div id="one">
        hello world
        <div class="child">nihao</div>
    </div>
    <script>
        // 获取DOM元素
        const one = document.querySelector('#one')
        // textContent
        // textContent 属性返回当前节点和它的后代节点的文本内容
        console.log(one.textContent)
        // 结果:
        // hello world
        // nihao
        // textContent 返回的值包括空格和回车

    </script>
</body>

        5.nextSibling

                作用: 返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null
                注意: 可能会获取到“空格”或“回车”这样的文本节点
                语法: 节点.nextSibling
                返回值: 紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null

代码模块展示：

<body>
    <div id="one"><div id="two">niaho</div><div class="child">nihao</div></div>
    <span></span>
    <script>
        // 获取DOM元素
        const two = document.querySelector('#two')
        const one = document.querySelector('#one')
        const span = document.querySelector('span')
        const child = document.querySelector('.child')
        // nextSibling
        // nextSibling 属性返回紧跟在当前节点后面的同级节点,如果家节点后面没有同级节点,则返回null
        // 注意:nextSibling 也会取到"空格" 或 "回车" 这样的文本节点
        console.log(two.nextSibling) // <div class="child">nihao</div>
        // 当后面时回车时 则会获取到 \n
        console.log(one.nextSibling) // \n

        
    </script>
</body>

​

        6.previousSibling

                作用: previousSibling属性返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回null
                注意: 可能会获取到“空格”或“回车”这样的文本节点
                语法: 节点.previousSibling
                返回值: 当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回null

代码模块展示：

<body>
    <div id="one"><div id="two">niaho</div><div class="child">nihao</div></div>
    <span></span>
    <script>
        // 获取DOM元素
        const two = document.querySelector('#two')
        const one = document.querySelector('#one')
        const span = document.querySelector('span')
        const child = document.querySelector('.child')
       
        // previousSibling
        // previousSibling属性返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回null
        // 注意:previousSibling 也会取到"空格" 或 "回车" 这样的文本节点
        console.log(two.previousSibling) // null
        // 当后面时回车时 则会获取到 \n
        console.log(one.previousSibling) // "\n      "
        console.log(child.previousSibling) // <div id="two">niaho</div>



    </script>
</body>

        7.parentNode

                作用: 返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：元素节点(element)、文档节点(document)和文档片段节点
                语法: 节点.parentNode()
                返回值: 返回当前节点的父节点

代码模块展示：

<body>
    <div id="one">
        hello world
        <div class="child">nihao</div>
    </div>
    <script>
        // 获取DOM元素
        const one = document.querySelector('#one')
        const child = document.querySelector('.child')
        // parentNode
        // parentNode 属性 返回当前节点的父节点,对于一个节点来说
        // 父节点的三种类型: 元素节点(element)、 文档节点(document) 和 文档片段节点(documentfragment)
        console.log(child.parentNode) // <div id="one">...</div>
        console.log(one.parentNode) // <body>...</body>
        console.log(document.parentNode)  // null
     

    </script>
</body>

        8.parentElement

                作用: parentElement属性返回当前节点的父元素节点。如果当前节点没有父节点，或者父节点类型不是元素节点，则返回null
                语法: 节点.parentElement
                返回值: 返回当前节点的父元素节点。如果当前节点没有父节点，或者父节点类型不是元素节点，则返回null

代码模块展示：

<body>
    <div id="one">
        hello world
        <div class="child">nihao</div>
    </div>
    <script>
        // 获取DOM元素
        const one = document.querySelector('#one')
        const child = document.querySelector('.child')
        
        
        // parentElement
        // parentElement 属性返回当前节点的父元素节点。如果当前节点没有父节点，或者父节点类型不是元素节点，则返回null
        console.log(child.parentElement)  // <div id="one">...</div>
        console.log(one.parentElement)  // <body>...</body>
        console.log(document.parentElement)  // null

    </script>
</body>

        9.firstChild和lastChild

            作用: firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null，last则返回最后一个子节点。
            注意: 可能会获取到“空格”或“回车”这样的文本节点
            语法: 节点.firstChild / 节点.lastChild
            返回值: 当前节点的第一个子节点，如果当前节点没有子节点，则返回null，last则返回最后一个子节点。

代码模块展示：

<body>
    <div id="one">
        hello world
        <div class="child">nihao</div>
        <div class="child">nihao</div>
    </div>
    <div id="two"></div>
    <script>
        // 获取DOM元素
        const one = document.querySelector('#one')
        const child = document.querySelector('.child')
        const two = document.querySelector('#two')
        // firstChild 和 lastChild
        // firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null，
        // lastChild属性返回当前节点的最后一个子节点,如果当前节点没有子节点，则返回null，
        // 注意: 空格 回车 也会获取到
        console.log(one.firstChild)  // "hello world"
        console.log(one.lastChild) // \n
        console.log(two.lastChild)  // null
    </script>
</body>

        10.childNodes

                作用: childNodes属性返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有子节点
                注意: 会获取到“空格”或“回车”这样的文本节点
                语法: 节点.childNodes
                返回值: 返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有子节点

代码模块展示：

<body>
    <div id="one">
        hello world
        <div class="child">nihao</div>
        <div class="child">nihao</div>
    </div>
    <div id="two"></div>
    <script>
        // 获取DOM元素
        const one = document.querySelector('#one')
        const child = document.querySelector('.child')
        const two = document.querySelector('#two')
        // childNodes
        // childNodes属性返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有子节点
        // 注意:包括空格和回车
        console.log(one.childNodes)  //NodeList(5) [text, div.child, text, div.child, text]
        // 其中第一个text为:  "\n        hello world\n        "
        // 其中第三个text为: "\n        "
        // 最后一个text为:  "\n    "

        


    </script>
</body>


      

C20001206
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript中获取选中对象的类型
10-30
在JavaScript中，获取选中对象的类型是一项常见的需求，特别是在处理用户交互或者进行DOM操作时。这个过程涉及到浏览器的选区API以及对不同类型的选中内容的理解。在本文中，我们将详细探讨如何在JavaScript中检查...
总结Node.js中的一些错误类型
12-23
Node.js中的错误主要分为四类：标准JavaScript错误、系统错误、自定义错误和断言错误。下面将详细阐述这些错误类型及其处理方法。 1. 标准JavaScript错误： 标准JavaScript错误包括EvalError、SyntaxError、...
JavaScript的Node属性
m0_73278382的博客
01-04 1099
1.elem.setAttribute("id","cba")将属性id更改为cba（)4.elem.classList.contains(class)检查给定类，返回ture/false。3.elem.classList.toggle(class)如果不存在就添加类，存在则移除这个类。2.elem.classList.remove(class):添加/移除类。1.elem.classList.add(class):添加一个类。其中id,class,title为标准属性。
JS 之Node节点的 属性、方法 &获取
热门推荐
xiongfeng
10-22 2万+
JS Node节点的常见属性和方法使用 & 如何获取相应节点和值 一、节点的常用属性和方法 （一）通过具体的元素节点调用如下方法和属性 《1》getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点 《2》appendChild(oNode) 方法给标签对象添加子节点。oNode是要添加的子节点。 《3》removeChild(oNode) removeChild方法删除子节
你不知道的javascript之node类型详解
程序员秋风的博客
04-22 1223
前段时间有做过一个关于节点操作的排序问题， http://blog.csdn.net/blueblueskyhua/article/details/68929578 今天就node类型，进行详细的讲解。首先看下他的兼容性。 node共有12类型。 类型详情可以参考http://www.w3school.com.cn/jsref/prop_node_nodetype.asp 1.no
JavaScript与node.js简单介绍
every place is the center of the universe
02-20 1302
1.数据类型 基本（值）类型：string number(任意数字) boolean undefined null 对象（引用）类型：Object(任意对象) Function(可执行对象) Array（数值对象） 2.判断 typeof返回数据类型的字符串表达 可以判断undefined/数值/字符串/布尔值，不可以判断 null object array instanceof:判断对象具体类型 === 判断undefinied、null var a; typeof a === 'undefined'
DOM ----Node类型常用的属性和方法
前端小愤青
09-04 1973
版权声明：本文为博主原创文章，若文章中有错误请联系博主改正，请不要恶意留言(不喜欢请绕道)。欢迎大家转载，转载时请注明原文地址:https://blog.csdn.net/qq_37674616/article/details/82357068 目录 Node类型 属性 nodeType nodeName nodeValue childNodes parentNode fir...
JS--JavaScript节点Node概述、节点类型、nodeType详解
吴声子夜歌的博客
09-25 2461
节点Node概述 DOM 1.0定义了Node接口，该接口为DOM的所有节点类型定义了原始类型。JavaScript实现了这个接口，定义所有节点类型必须继承Node类型。作为Node的子类或孙类，都拥有Node的基本属性和方法。 节点类型 DOM规定：整个文档是一个文档节点，每个标签是一个元素节点，元素包含的文本是文本节点，元素的属性是一个属性节点，注释属于注释节点，如此等待。 每个节点都有一个n...
JavaScript node(结点)
ximingx
11-27 1345
JavaScript 结点的操作
JavaScript 获取Node节点的几种方式
追寻心的步伐
01-22 1134
根据class名拿取类数组，里面封装了所有符合条件的元素节点。根据标签名拿取类数组，里面封装了所有符合条件的元素节点。属性拿取类数组，里面封装了所有符合条件的元素节点。//获取第一个子节点的nodeValue。根据唯一的id属性拿取一个元素节点。//打印元素节点的节点类型和节点名。nodeValue就是嵌套的文本。nodeValue就是属性值。//获取第一个子节点的超文本。//获取第一个子节点的文本。nodeValue不可用。nodeValue不可用。nodeValue不可用。获取元素的最后一个子节点。
Javascript中DOM常用方法和属性总结
qq_2511276124的博客
12-09 1850
文档对象模型 (DOM)将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM 模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点 (node)，每个节点都包含着对象 (objects)。DOM 的方法 (methods) 让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。
详谈javascript中DOM的基本属性
01-19
结构和内容属性 nodeType 所有的节点都有类型，节点总共有以下的12种类型。 代码如下: interface Node { // NodeType const unsigned short ELEMENT_NODE = 1; const unsigned short ATTRIBUTE_NODE = 2; const...
JavaScript中文文档
02-06
变量在JavaScript中是动态类型的，可以存储不同类型的数据，如字符串、数字、布尔值等。数据类型包括基本类型（如上述的字符串、数字、布尔）和引用类型（如对象和数组）。控制结构用于决定程序执行的流程，例如`if....
node-annotation:JavaScript注释
05-20
目的是为JavaScript添加注释支持，您可以在其中基于文件的注释将命令与您的类，方法或属性相关联。 ＃＃这个怎么运作 为了使lib在此版本中正常工作，您需要像下面的示例一样编写注释： /** * annotationName...
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 897
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 222
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 289
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【Vue3】自定义组件
又言又语
07-30 441
本文介绍 Vue3 中如何自定义组件。页面组件：用于构建独立页面，通常存放在src/pages或src/views目录下。功能组件：将页面中一些独立的功能封装成独立组件，譬如：分页组件、日期时间组件等。功能组件通常存放在目录下。本文主要说明如何自定义功能组件。
RN高级interview
最新发布
流星雨的博客
07-31 480
RN高级interview
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值