js Dom之节点操作

最新推荐文章于 2023-05-30 17:33:47 发布
最新推荐文章于 2023-05-30 17:33:47 发布
阅读量257 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzo12345/article/details/111649368
版权

目录

一、DOM元素节点操作

二、获取元素的子元素或子节点​  

三、遍历子元素或子节点​

四、元素的父元素和父节点

五、元素的子元素或子节点

六、动态创建dom元素​

七、克隆节点​

八、删除节点

 

一、DOM元素节点操作

二、获取元素的子元素或子节点

  • childElementCount 获取子元素的个数
  • children 获取子元素的集合
  • childNodes 获取子节点的集合

  

三、遍历子元素或子节点

四、元素的父元素和父节点

  • parentElement 元素的父元素
  • parentNode 元素的父节点

  

五、元素的子元素或子节点

  • firstChild 获取第一个子节点
  • firstElementChild 获取第一个子元素
  • lastChild 获取最后一个子节点
  • lastElementChild 获取最后一个子元素

六、动态创建dom元素

  • insertBefore() 将插入的节点添加到已有的节点之前

七、克隆节点

八、删除节点

被操作的年轻人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用jQuery向上遍历
谈谈IT
02-15 167
使用parent()，parents()和closest()表示向上遍历，其中parent()返回直接父节点，最多一个，parents()返回所有的祖先节点，结果可以有多个，函数可以加过滤条件。closest指包括自己和所有祖先节点中，满足条件的最近的节点，结果最多一个，该函数一般会加参数，不加参数时结果为自己。 <div id="parent2"> <div id="pare...
javascript向上向下遍历
linshichen的专栏
09-30 1003
function backToFar(parent) {         if(parent.length != 0){             parent.attr("checked", "true");             if ($(parent).attr("pid") != "undefined" && parent.length != 0) {          
jQuery对DOM元素的向上遍历
bug_404的博客
09-12 370
向上遍历 DOM 树 这些 jQuery 方法很有用，它们用于向上遍历 DOM 树： parent()：返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历。 parents()：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。 parentsUntil()：返回介于两个给定元素之间的所有祖先元素。 hello
javascript同级遍历_JavaScript中遍历的几种方法
weixin_28802499的博客
12-30 144
1.while循环while后面跟循环条件和执行语句，只要满足条件，就会一直执行里面的执行var i = 0while(i<10){console.log(i)i++}2.do...while循环与while相似，但是他会先执行一次，再做判断条件var i=0do{console,log(i)i++}while(i<10)3.for循环var arr = [0,1,2,3]for(le...
js之DOM元素遍历
dingbin1973的博客
05-30 220
对于元素间的空格，IE9之前的版本不会返回文本节点，而且他所有浏览器都会返回文本节点。这样就导致 使用childNodes和firstChild等属性时的行为不一致。从而有了Element Traversal API 为DOM元素添加额以下5个元素： chaildElementCount:返回子元素（不包括文本节点和注释）的个数 firstElementChild:指向第一个子元素...
JS实现的DOM插入节点操作示例
11-28
`insertBefore()`方法是JavaScript DOM中的一个重要函数，它允许我们在已有子节点的前面插入一个新的子节点。方法的基本语法如下： ```javascript node.insertBefore(newNode, refNode); ``` - `newNode`：表示要...
JavaScript HTML DOM元素 节点操作汇总
10-16
总之，JavaScript的DOM节点操作提供了强大的能力，使我们能够动态地更新页面内容，实现丰富的用户交互。通过熟练掌握这些基本操作，开发者可以轻松地创建动态、响应式的Web应用。在实际开发中，结合事件监听、CSS...
JS实现DOM删除节点操作示例
11-29
在JavaScript中，DOM...总结，JavaScript的DOM操作是网页动态效果和交互实现的关键，而`removeChild()`方法则是删除文档中特定节点的重要工具。通过熟练掌握这一方法，开发者可以创建出更加丰富和灵活的用户界面。
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
10-18
主要介绍了JS实现DOM节点插入操作之子节点与兄弟节点插入操作,涉及JavaScript节点的创建、添加简单操作技巧,需要的朋友可以参考下
JS——数组同级筛选
qq_43201350的博客
06-06 219
let list = [ { arr: { name: '12', age: 20, id:1 } }, { arr: { name: '12', age: 20, id:2 ...
树形结构的向下遍历和向上遍历
云想的博客
06-16 1296
树形结构，向下遍历，得到全部的id userId 为该数据的主键id parent_id为该数据的父id 方法一：数据库操作，创建自定义的递归方法（不推荐，自己弄的话无所谓，但是会给维护或者发布会有一定的麻烦，因为发布换数据库了，可能就没有这个自定义的函数，又需要写一次。） DROP FUNCTION IF EXISTS get_child_list; DELIMITER ;; CREATE FUNCTION get_child_list(areaId VARCHAR(250)) RETURNS VARCH
数据结构-从底向上层次遍历二叉树
LiuKe369的博客
07-29 1245
【题目来自灰灰考研】 二叉树采用二叉链表进行存储（如下所示），每个结点包含数据域Data，左孩子指针域left和右孩子指针域right。请设计算法给定一颗树，返回其节点值从底向上的层次序遍历（按从叶节点所在层到根节点所在的层遍历，然后逐层从左往右遍历）。 Typedef struct BitNode{    TElemType data;         struct BitNode *l...
Js遍历方法总结
最新发布
qq_48666244的博客
05-30 427
i < 5;i++) {// 输出：0，1，2，3，4。
javascript当中如何用children和firstElementChild做遍历
qq_43650923的博客
10-30 465
如何用children和firstElementChild做遍历 例 1.4 <HTML> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </HEAD> <BODY> <!--马克-to-win：像后面的很多XML文件，...
javascript节点遍历方法总结
caiyyu的博客
06-26 658
如题所示： <body> <div> <ul> <li></li> <li></li> <li></li> <li></li> ...
DOM对象
qq_58957340的博客
04-24 286
DOM是一个文档对象模型 可以通过改变DOM来改变文档内容 查看/修改/删除属性节点 getAttribute("属性名") setAttribute("属性名","属性值") removeAttribute(“属性名”) 节点对象.nodeName 获取节点名称 节点对象.tagName 获取标签名称 节点对象.nodeType 判断节点类型 元素节点 返回值为1 属性节点返回值为2 文本节点返回值为3 节点对象.nodeValue 获取节点值 查找节点 父找子..
html parent()属性,HTML DOM parentElement用法及代码示例
weixin_39621456的博客
06-04 2081
DOM parentElement属性用于返回特定子元素的父元素。这是一个只读属性。 parentElement和parentNode属性相似，唯一的区别是，如果父节点不是元素，则parentElement属性返回null。用法:node.parentElement返回值：它返回一个表示任何子节点的父节点的字符串；如果指定的节点不包含任何父节点，则返回null。范例1：HTML DOM paren...
【JavaScript 教程】DOM——ParentNode 接口，ChildNode 接口
油墨香^-^的博客
06-10 784
作者 | 阮一峰 节点对象除了继承 Node 接口以外，还会继承其他接口。ParentNode接口表示当前节点是一个父节点，提供一些处理子节点的方法。ChildNode接口表示当前节点是一个子节点，提供一些相关方法。 1、ParentNode 接口 如果当前节点是父节点，就会继承ParentNode接口。由于只有元素节点（element）、文档节点（document）和文档片段节点（documentFragment）拥有子节点，因此只有这三类节点会继承ParentNode接口。 1.1、Pa
DOM（文档对象模型）
weixin_45817998的博客
05-22 472
节点关系 父子 父节点 parentElement 所有子节点 children 第一个子节点 firstElementChild 最后个子节点 lastElementChild 兄弟 上一个兄弟 previousElementSibling 下一个兄弟 nextElementSibling 属性操作 getAttribute 获取属性 setAttribute 设置属性 removeAttribute 移除属性 节点信息 节点操作 创建节点 document.cre..
JavaScript DOM编程与节点操作
“尚硅谷_javascriptDOM编程.pptx”是一份关于JavaScript DOM编程的教程资料，由讲师佟刚讲解，主要涵盖了DOM的基本概念、结构以及常用的操作方法。 在JavaScript中，DOM（Document Object Model）是一种标准，用于...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值