首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

获取DOM节点的方法汇总

1.原生获取DOM节点的方法 1.1 通过顶层document节点获取: document.getElementById("ID") document.getElementsByName("Name")...document.querySelector("..."): 返回匹配的第一个节点 document.querySelectorAll("..."): 返回匹配的所有节点 2.jQuery 获取 DOM...(".B") 获取A节点所有为B的直接子节点 $("#A").find("*") 获取A节点所有后代节点 $("#A").find(".B") 获取A节点所有为B的后代节点 同胞 $("#A")....prev() 获取A节点的上一个兄弟节点 $("#A").prevAll() 获取A节点之前的所有兄弟节点 $("#A").prevUntil(".B") 获取A节点之前、B节点之后的所有兄弟节点 $...B节点 $("A B").last() 获取最后一个A节点的最后一个B节点 $(".A").eq(0) 获取所有A节点中的第一个A节点 $("A").filter("B") 获取A节点中的所有B节点 $

4K10
您找到你想要的搜索结果了吗?
是的
没有找到

js|jq获取兄弟节点,父节点,子节点

08.19自我总结 js|jq获取兄弟节点,父节点,子节点 一.js var parent = test.parentNode; // 父节点 var chils = test.childNodes;...(); // 返回#test里面的所有内容,包括节点和文本 $("#test").contents("#test1"); $("#test1").prev(); // 上一个兄弟节点 $("#test1...").prevAll(); // 之前所有兄弟节点 $("#test1").next(); // 下一个兄弟节点 $("#test1").nextAll(); // 之后所有兄弟节点 $("#test1...").siblings(); // 所有兄弟节点 $("#test1").siblings("#test2"); $("#test").find("#test1"); #元素筛选 // 以下方法都返回一个新的...// 选取ul li中匹配的最后一个元素 $("ul li").slice(1, 4); // 选取第2 ~ 4个元素 $("ul li").filter(":even"); // 选取ul li中所有奇数顺序的元素

15K10

树形结构已知子节点获取节点所有节点——任意目录树

JS 树形结构 根据子节点找到所有上级,比如element-tree,已知路由上的子结点id,如何回填的 展开目录树?...树的查找与遍历都非常简单,具体可以查看我之前写的:《讲透学烂二叉树(三):二叉树的遍历图解算法步骤及JS代码》或者:JS树结构操作:查找、遍历、筛选、树和列表相互转换 https://wintc.top.../article/20但是 如何根据子结点找所有节点的目录的呢?...        'children': []      }]  }]console.log(findParents(a,82))这样就可以查找满足任意前端组件 tree 的回填了转载本站文章《树形结构已知子节点获取节点所有节点...——任意目录/树》,请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/js/2022_0422_8797.html

2.9K10

javaScript 原生DOM节点操作(最实用的dom节点操作大全)

节点的分类 元素节点 属性节点 文本节点 节点的操作 元素节点操作 通过元素的id来获取相应的节点 document.getElementById(""); 通过元素的标签名来获取节点 document.getElementsByTagName...(""); 通过元素的类名来获取节点 document.getElementsByClassName(""); 通过元素的name属性来获取节点 document.getElementsByName("..."); 获取元素的所有节点 node.childNodes; 创建元素节点 document.createElement("tagName"); 往父节点最后添加子节点 fatherNode.append...简单讲,innerHTML可以在某种特定环境下重构某个元素节点DOM结构,而innerText只能修改文本值 总结 原生的DOM节点操作还是非常简单实用的,除了单词长了一点以外好像也没有什么明显的缺点...,当然当我们刚开始使用DOM节点操作的时候,还是会遇到一些坑的。

1.7K20

Js DOM

什么是DOM DOM,文档对象模型(Document Object Model)。 HTMLCollection 对象 注意:IE9及以上版本才支持!...,返回一个:document.querySelector() 根据选择器或标签获取所有元素,返回多个:document.querySelectorAll() <div id="wrap...<em>所有</em><em>节点</em>都有的属性: nodeName,元素<em>节点</em>的 nodeName 是标签名称(大写),属性<em>节点</em>的 nodeName 是属性名称,文本<em>节点</em>的 nodeName 永远是 #text,文档<em>节点</em>的 nodeName...<em>获取</em><em>所有</em>子<em>节点</em> - childNodes() <em>获取</em><em>所有</em>子<em>节点</em>(文本<em>节点</em>,属性<em>节点</em>,元素<em>节点</em>,注释<em>节点</em>等等),有多个 我是...console.log(cnode.lastChild); //#text 元素<em>节点</em> <em>获取</em><em>所有</em>元素<em>节点</em> - children() <em>获取</em><em>所有</em>元素<em>节点</em>

3.7K10

JavaScript 学习-32.HTML DOM 获取和修改属性节点

前言 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点...)) // p2 console.log(p2.getAttribute('class')) // text-center 获取属性节点的值 比如有一个p标签元素节点...点我看看 它有的属性节点是:id="p2"和class="text-center" 属性节点是键值对的,可以根据属性名称,获取对应的值...| | element.nodeName  | 获取节点名称         | | element.tagName | 获取标签名称      | | element.id| 获取 id 属性    ...修改元素属性节点的值跟前面获取属性方法一样,给属性重新复制即可 修改属性节点 <label

1.2K10
领券