js获取一个元素节点的子节点的方法（包括非文本节点）

最新推荐文章于 2023-01-04 22:54:41 发布
VIP文章 最新推荐文章于 2023-01-04 22:54:41 发布
阅读量8.1k 收藏 2
点赞数 1
分类专栏： JavaScript 文章标签： web前端 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web_hua/article/details/77871056
版权

先来简单复习一下：

1.文档中每个元素、属性、文字、注释、都被看做一个节点对象。

当网页被加载进了内存时，浏览器会为网页创建一个document对象，所有节点都是document对象的子节点。

Node：所有节点对象的父节点

nodeType：节点的类型    元素节点---》1

 属性节点---》2

 文本节点---》3

nodeName：节点的名称  元素节点---》返回全大写标签名

 文本节点---》返回#text

nodeValue：节点的值       元素节点---》null

最低0.47元/天 解锁文章
orange-life
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js获取多个tagname的节点数组
12-12
功能需要，写了个获取多个tagname节点集合的小方法。类似于jQuery的$(‘iput,select,textarea’,’#form’)的效果，返回是按节点在原有文档流中的顺序返回的。... //获取指定父元素的子节点 var all=pa
前端js——获取元素的各级节点、子节点、父级节点
qq_41141657的博客
03-11 4157
获得元素的各级节点 对象.parentNode 获得父节点 对象.childNodes 获得子节点集合 对象.firstChild 获得第一个节点的引用 对象.lastChild 获得最后一个节点的引用 对象.nextSibling 获得上一个兄弟节点的引用 对象.previousSibling 获得上一个兄弟节点的引用 HTML：添加需要的id名 <div id="box1"&g...
【JavaScript】获取和操作 DOM 节点
浅陌繁星的博客
01-04 702
只是创建不会显示到页面上，要显示到页面上得使用下面的插入节点。// 父节点.replaceChild(换上节点, 换下节点)：把子节点插入到父节点中，并且放到指定一个节点的前面。：把子节点插入到父节点中，并且是在最后面的位置插入。：若删除的节点中有子节点会一并删除。// li渲染后清空文本域中的内容。// 在创建的li标签中添加按钮。// 判断文本域的内容是否为空。：将子节点从父节点中删除。：在父节点中，使用换上节点。// 给创建的按钮添加类名。// 给创建的按钮添加文本。：创建好的元素节点。
Web基础——JavaScript之获取节点和元素对象
威威的博客
01-12 2437
目录通过节点关系查找节点通过节点关系查找节点示例获取节点对象的信息获取元素对象的属性 通过节点关系查找节点 document.all 获取文档中所有的标签节点 从一个节点出发开始查找： parentNode 获取当前元素的父节点。 childNodes 获取当前元素的所有下一级子元素。 firstChild 获取当前节点的第一个子节点。 lastChild 获取当前节点的最后一个子节点。 nextSibling 获取当前节点的下一个节点。（兄节点） previousSibling 获取当前
DOM查询-获取元素节点---获取元素节点子节点---获取元素节点父节点
Paranoid_truggle的博客
07-26 370
获取元素节点 1.getElementById() 通过id属性获取一个元素节点对象 2.getElementsByTagName() 通过标签名获取一组元素节点对象 3.getElementsByName() 通过name属性获取一组元素节点对象 查询所有的li对象 getElementsByTagName()可以根据标签名来获取一组元素节点对象 这个方法会给我们返回一个类数组对象，所有查询的元素都会封装到对象中 即使查询到的元素只有一个，也会封装到数组中返回 var btn02=document.get
DOM获取元素节点的子节点
qq_43383255的博客
09-12 5933
getElementsByTagName()，返回当前节点的指定边签名后代节点。 childNodes属性,当前节点的所有子节点(其中IE8及以下浏览器不会把空白处当成一个节点)。 children属性，获取当前元素的所有子元素。 firstChild属性，当前节点的第一个子节点。 lastChild属性，表示当前节点的最后一个子节点 innerText属性，可以获得元素内部的文本内容，没有标签。 innerHTML属性，与innerText类似，不过显示时会存在标签。 ...
JS获取元素节点和子节点的三种方法(dom查询)
Frank---7的博客
05-17 4661
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <...
JS获取子节点、父节点和兄弟节点的若干种方式
热门推荐
laok_的博客
07-22 26万+
一、js获取子节点的方式1.通过获取dom方式直接获取子节点其中test的父标签id的值，div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。var a = document.getElementById("test").getElementsByTagName("div"); 2.通过childNodes获取子节点使用child
js 找出当前元素所包含的最后一个元素节点（不是文本节点）
liuboman的博客
12-06 7674
elem.lastChild只能确保找出的是当前元素的最后一个节点，不能保证这个节点是元素节点还是文本节点。 为了确保找出的节点是当前元素的最后一个元素节点，可以如下写： var elemChildren=elem.getElementByTagName("*"): if(elementChilder.length var elem=elemChildren[elemChildren.le
jquery实现点击TreeView文本父节点展开/折叠子节点
12-11
心想这个应该是很常见的功能吧，特意google了一下，发现大部分是将的不是js实现的，有些js实现的写的麻烦，干脆自己写一个吧，应该不难的。首先思路是，，让文本点击的时候执行左边‘+’号的事件，查看源码看到，‘+...
javascript读取文本节点方法小结
01-19
获取元素节点的子节点 1，获取id的所有子节点 var cityNode=document.getElemnetById() 2,利用元素节点的childNodes 方法可以获得指定元素节点的所有子节点 alert（cityNode.childNodes.length） 注：基本不用 3....
get-text-nodes:获取子文本节点
03-14
获取子文本节点 安装 yarn add get-text-nodes 档案文件 dist/ ├─ index.js ( UMD ) ├─ index.min.js ( UMD, compressed ) ├─ index.mjs ( ES Module ) └─ index.min.mjs ( ES Module, compressed ) 用法 &...
jQuery与JavaScript节点创建方法的对比
11-26
节点是DOM结构的基础，根据DOM规范，节点是一个很宽泛的概念，包含元素、属性、文本、文档和注释。但在实际开发中，要动态创建内容，主要操作的节点包括元素、属性和文本。 1、需求：创建一个h1 标签，把它作为div...
表单提交的两种方式
web_hua的博客
09-07 3189
表单的中如何获取input等控件的属性值     先获取控件              Document.getElements*******              表单名.控件名              Value 如何判断单选框和多选框是否选中？     根据checked属性如果选中返回true,否则返回false 如何提交表单，以及验证方式     两种方式：   
JSON.parse()与JSON.stringify()方法的使用与区别
web_hua的博客
10-10 691
一、JSON.parse() parse用于从一个字符串中解析出json对象 二、JSON.stringify()可以将一个对象解析出字符串 var obj='{"name":"前端开发","price":1000,"subject":"php"}'; // 定义了一个字符串 console.log(JSON.parse(obj)); //给字符串转换为了实
clientX、screenX、pageX、offsetX、layerX
web_hua的博客
10-15 303
e.pageX——参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动 e.layerX——鼠标位置相对当前坐标系的border左上角开始的坐标 e.offsetX——鼠标位置相对当前坐标系的border左上角开始的坐标 e.clientX——鼠标位置相对可视区域的坐标 e.screenX——鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原
关于js原型和继承的方法复习
web_hua的博客
09-02 218
1.首先我们先来看几个概念。 封装：将描述同一个东西的属性和方法，定义在一个对象中。 继承：父对象中的属性和方法，子对象可以直接使用。 多态：同一个对象，在不同情况下，呈现不同的状态。 2.如何定义构造函数？     function  构造函数名(参数...){ this.属性名=属性参数; //此步骤表示在当前正在创建的对象中添加一个属性名，并且赋值 ... this.方法名
springboot(酒店管理系统)
最新发布
04-25
开发语言：Java JDK版本：JDK1.8（或11） 服务器：tomcat 数据库：mysql 5.6/5.7（或8.0） 数据库工具：Navicat 开发软件：idea 依赖管理包：Maven 代码+数据库保证完整可用，可提供远程调试并指导运行服务（额外付费）～ 如果对系统的中的某些部分感到不合适可提供修改服务，比如题目、界面、功能等等... 声明： 1.项目已经调试过，完美运行 2.需要远程帮忙部署项目，需要额外付费 3.本项目有演示视频，如果需要观看，请联系我 4.调试过程中可帮忙安装IDEA，eclipse，MySQL，JDK，Tomcat等软件 重点： 需要其他Java源码联系我，更多源码任你选，你想要的源码我都有！ 需要加v19306446185
js获取元素所有子节点
05-05
你可以使用 JavaScript 中的 `childNodes` 属性来获取元素的所有子节点，包括文本节点、注释节点和元素节点。下面是一个示例代码： ```html <div id="parent"> <p>这是一个段落</p> <ul> <li>列表项1</li> <li>列表项2</li> </ul> 一些文本节点 </div> ``` ```javascript const parent = document.getElementById('parent'); const childNodes = parent.childNodes; console.log(childNodes); ``` 输出结果如下： ``` NodeList(7) [text, p, text, ul, text, text, undefined] ``` 可以看到，`childNodes` 返回一个 `NodeList` 对象，其中包含了所有子节点。需要注意的是，`NodeList` 对象是类似数组的对象，可以通过索引访问其中的元素。但是，它并不是一个真正的数组，因此不能使用数组的方法和属性。如果需要将 `NodeList` 转换成真正的数组，可以使用 `Array.from()` 方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值