js根据document接口查找dom节点的方法

最新推荐文章于 2023-08-31 12:55:53 发布
原创 最新推荐文章于 2023-08-31 12:55:53 发布 · 362 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #ViewUI

本文详细介绍了如何使用JavaScript操作DOM元素，包括获取子节点、父节点、兄弟节点等基本操作，并区分了getElementById与getElementsByName及getElementsByTagName的区别。

 var b = a.childNodes;获取a的全部子节点；
 var c = a.parentNode;获取a的父节点；
 var d = a.nextSbiling;获取a的下一个兄弟节点、

 var e = a.previousSbiling;获取a的上一个兄弟节点
var f = a.firstChild;获取a的第一个子节点
 var g = a.lastChild;获取a的最后一个子节点

注意这个a是 对象类型 而不是  nodeList 类型 document.getElementById()  这个返回的是Element 对象

document.getElementsByName()  这个返回的是nodeList对象

document.getElmentsByTagName() 这个返回的是nodeList 对象

用js操作dom节点的一些方法
我的博客
05-11 812
在已有的子节点前插入一个新的子节点，也可以利用已知的子节点获取其父节点：existNode.parentNode.insertBefore(newNode,existNode);复制节点domNode。neborNode.previousElementSibling ：返回某个节点的上一个兄弟元素节点（不包括文本节点、注释节点）neborNode.previousSibling：返回某个节点的上一个兄弟节点（包括文本节点、注释节点）将某个子节点替换为另一个新节点，新节点可以是已存在的，也可以是新创建的。
JavaScript 节点操作 以及DOMDocument属性和方法
10-30
JavaScript中的节点操作和DOMDocument对象是Web开发中的基础概念，它们是处理和操作HTML或XML文档的核心工具。DOM（文档对象模型）是一种标准，它允许程序和脚本动态更新、添加、删除和改变任何HTML或XML文档的结构...
document 文挡对象
夏风鱼的专栏
11-30 695
document 文挡对象 - JavaScript脚本语言描述---------------------------------------------------------------------注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写    否则会提示你一个错误信息 "引用的元素为空或者不是对象"-----------------------------
第十二讲 dom对象（DOM对象、document对象的常用方法、节点、查找结点、 查看/修改/删除属性节点、创建和增加节点）
Fiki515的博客
04-24 1702
一、查看节点 getElementById( ) getElementsByName( ) getElementsByTagName( ) <body> <div id="box">hello box</div> </body> <script> var oDiv = document.getElementById("box"); //div元素对象 // var oDiv = document..
JavaScript零基础入门 8：JavaScript通过document获取节点元素
学Java，找哪吒
12-25 6177
???? Java学习路线配套文章：Java学习路线总结，搬砖工逆袭Java架构师（全网最强） ???? 基础推荐：Java基础教程系列 ???? 实战推荐：Spring Boot基础教程 ???? 简介：Java领域优质创作者????、优快云哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 目录一、document二、onload三、获取节点元素1、innerHTML2、getElemen
2021-05-29 DOM操作HTMl（访问、查找节点的方法）
Shao_lei的博客
05-29 263
首先建立一个表格（用于下面节点的查找），如下 HTML部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal
52-(DOM)查询子节点
我们的目标是星辰大海！
08-31 144
52-(DOM)查询子节点
JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】
12-11
总之，理解并熟练掌握DOM节点操作对于任何JavaScript开发者来说都是至关重要的，无论是在简单的页面交互还是复杂的Web应用程序中，这些基本操作都是构建动态用户界面的基础。通过DOM，我们可以实现诸如响应式设计、...
grail:通过 CSS 选择器查找 DOM 节点的简单 JavaScript 库
07-11
一个简单的 JavaScript 库，用于通过 CSS 选择器查找 DOM 节点。 例子 grail . find ( '#abc' ) ; grail . find ( 'div.alpha' ) ; grail . findAll ( 'div' , document . body ) ; grail . findAll ( '.alpha' ) ;...
JS访问DOM节点方法详解
10-21
在JavaScript中，有多种方法可以访问这些DOM节点。本文将详细介绍这些方法，并通过实例加以解释。 首先，我们来谈谈`getElementById()`方法。这个方法通过一个元素的ID来获取节点，是访问特定DOM元素最直接的方法之...
javascript（15）——使用document获取结点以及结点的一些方法
木子 旭的博客
01-19 1697
1.document获取结点的三种方式 document.getElementsByTagName('h1')//通过标签名字 document.getElementById('p1'));//通过标签的id属性 document.getElementsByClassName('p2');//通过标签的class名字 2.结点的一些方法和变量 给其赋值的时候需要引号包裹，作为字符串进行赋值 var father = document.getElementById('father'); var childr
jquery获取第一个子节点_js jquery 获取元素(父节点,子节点,兄弟节点)
weixin_39822147的博客
12-22 4129
一,js 获取元素(父节点,子节点,兄弟节点)var test = document.getElementById("test");var parent = test.parentNode; // 父节点var chils = test.childNodes; // 全部子节点var first = test.firstChild; // 第一个子节点var last = test.lastChi...
JavaScript文档对象模型document对象查找Html元素(2)
qq_45308912的博客
11-07 952
1.document对象查找Html元素 以下表格是获取Html元素的常用方法： （1.）getElementById方法：返回值是元素对象，如果没有符合的条件对象，则返回为null； （2.）getElementsByTagName: 返回值是数组对象，如果没有符合条件的对象，则返回为空数组 （3.）getElementsByName: 返回的是指定标签名的元素对象集合，如果无符合条件的对象，则返回为空数组。 （4.）getElementsByClassName: 返回值为指定类名的元素集合，元素集合中
通过DOM API 查找节点
weixin_33743248的博客
05-23 374
在上一篇的分享当中，我们简单介绍了BOM 与DOM，也了解到JavaScript 是怎么通过它们提供的方法来与浏览器进行沟通。 当一个网页被载入到浏览器时，浏览器会首先分析这个HTML 文档，然后会依照这份HTML 的内容解析成DOM (Document Object Model，即文件对象模型)。 而DOM 是W3C 制定的一个规范，它是独立于平台与语言的标准。换言之，只要遵守这样的规范，不管是...
dom 节点查找
weixin_30460489的博客
04-29 100
题目描述 查找两个节点的最近的一个共同父节点，可以包括节点自身。 输入描述: oNode1 和 oNode2 在同一文档中，且不会为相同的节点。 代码： 1 //方法一 2 //oNode.contains（oNode2）: 父节点oNode（或自己）包含子节点oNode2，返回true 3 //这个方法比递归的方法效率要高 4 function com...
JS基础-04 (DOM doc/事件/元素/查询/应用)
m0_51509441的博客
03-03 249
DOM doc/事件/元素/查询/应用, 多个练习, 包括DOM常用方法, 对节点增删改, 对CSS操作, 对记录增删, 切换图片页面对Dom的基础应用
DOM获取节点的API
qq_35370002的博客
05-23 555
文档对象模型 DOM ????‍♂️：老师，今天要讲的这个DOM是啥呀？ ????‍????：DOM的意思是文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让JS操作HTML元素而制定的一个规范。 ????‍♂️：懂了，既然是规范，肯定提供了一些API(方法)让我们操作DOM元素吧 ????‍????：是的，接下来我们着重讲讲如何获取DOM节点。 DOM节点的获取 通过id名获取 方式一： <div id="box"></div&g
JavaScript DOM 基础：节点查找与节点操作
QIANDXX的博客
04-14 1031
DOM概念 文档对象模型（Document Object Model），它定义了访问和处理HTML文档的标准方法。 HTML文档中的每个成分都是一个节点。HTML文档中的所有节点组成了一个文档树（节点树）。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续延伸枝条，直到处于这棵树最低级别的所有文本节点为止。 学习DOM，就是学习一些操作页面元素的API（方法）。下图表示一个文档树。 DOM的组成 DOM 是由节点组成的。 DOM 的节点类型 描述 元
（一）DOM 常用操作 —— “查找”节点
dcly32014的博客
12-11 670
在 DOM 树中，如果想要操作一个节点，那么首先要“查找”到这个节点。查找节点的方法由 Document接口定义，而该接口由 JavaScript 中的 document 对象实现，你必须熟记它们（各大浏览器对它们的支持情况）。 方法概览 getElementsById() getElementsByName() getElementsByTagName...
深入理解JavaScript DOMDocument对象与节点操作
"这篇文档主要介绍了JavaScript中的节点操作和DOMDocument对象的重要属性及方法，强调了在使用过程中注意大小写的准确性。DOMDocument是处理XML文档的核心对象，而XMLHTTP则是进行异步请求的关键组件。" 在...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值