js_DOM中获取节点的几种方法总结

已于 2022-11-12 00:54:32 修改
阅读量1.3k 收藏
点赞数
分类专栏： web前端 文章标签： javascript html 前端
于 2022-11-12 00:39:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/angrynouse/article/details/127815058
版权

DOM中获取元素节点的几种方法

0. 了解DOM

document 代表整个页面文档对象
document.title 文档标题，即当前网页的标题
document.documentElement 页面的HTML标签
document.body 页面的body标签
所谓的获取元素节点也是说获取元素节点对象，即通过js的方法来获取到节点并对其进行一些操作。

1. 通过id获取

document.getElementbyId("id名")

在这里插入图片描述

2. 通过标签名来获取

document.getElementsByTagName("标签名")
获取的是一个伪数组HTMLCollection形式，由页面上所有对应标签名的元素组成。

在这里插入图片描述

3. 通过class类名来获取(IE旧版本中不能用)

document.getElementsByTagName("类名")

在这里插入图片描述

说明：前三个方法都是过时的，需要兼容IE6、7、8才会用

4. 获取单个元素节点，只能获取匹配到的第一个元素节点

document.querySelector("选择器")

在这里插入图片描述
在这里插入图片描述

5. 获取多个元素节点，返回的是一个NodeList伪数组

document.querySelectorAll("选择器")

在这里插入图片描述

当获取的节点不存在时，返回值为如下所示：
在这里插入图片描述

况几
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript DOM 学习总结(五)
01-19
1、DOM简介。 　当页面加载时，浏览器会创建页面的文档对象模型（Document Object Model）。文档对象模型定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为...通常使用以下几种方法完成： 　通过元素设置的id找
javascript-获取parentNode-firstChild-lastChild的方法及案例
以后的23,725天，每一天都是精彩的，现在做，一切还来的及，相信自己！
10-27 1172
dom4.html window.onload = function() { //根据id获取指定的节点 var divNode=document.getElementById("xy"); //获取父节点 //"xy"的divNode.parentNode是body,divNode.parentNode.parentNode是html var pNode=di
JQUERY的父，子，兄弟节点查找方法
weixin_34387468的博客
08-22 76
为什么80%的码农都做不了架构师？>>> ...
【JavaScript】获取和操作 DOM 节点
浅陌繁星的博客
01-04 703
只是创建不会显示到页面上，要显示到页面上得使用下面的插入节点。// 父节点.replaceChild(换上节点, 换下节点)：把子节点插入到父节点中，并且放到指定一个节点的前面。：把子节点插入到父节点中，并且是在最后面的位置插入。：若删除的节点中有子节点会一并删除。// li渲染后清空文本域中的内容。// 在创建的li标签中添加按钮。// 判断文本域的内容是否为空。：将子节点从父节点中删除。：在父节点中，使用换上节点。// 给创建的按钮添加类名。// 给创建的按钮添加文本。：创建好的元素节点。
JavaScript获取SVG节点值
热门推荐
牧灵泉的崖巢
08-10 1万+
SVG 是 基于XML 来描述二维图形的语言。 SVG 的文本内容可以用一棵 DOM 树来描述，对 DOM 树不了解的朋友可以打开资源管理器，打个比方：本地磁盘就是根节点（树根）下面的文件夹就是节点，同级的文件夹之间称为兄弟节点，文件夹里还有文件夹，这个就叫子节点。
js中根据id获取节点,js获取id对应的组件
神经网络爱好者
12-03 304
element.属性 获取属性值;获取内置属性值element.getAttribute('属性’);主要获得自定义的属性值，我们程序员自定义 的属性值。（1）element.属性=‘值’ 例：div.id='test';(2)element.setAttribute('属性’，‘值’);主要针对自定义属性'class','footer');注意这里写的是class而不是className.
js--DOM中查找节点的方式
m0_74293254的博客
06-18 514
js--DOM中查找节点的方式
JS获取元素的九种方法、节点，以及在JS中动态增删改元素
m0_46181452的博客
09-09 1162
JS获取元素的九种方法、节点，以及在JS中动态增删改元素
浅谈JS获取元素的N种方法及其动静态讨论
12-07
实际前端开发工作中，我们经常会遇到要获取某些元素...也因此，JavaScript可以通过DOM API获取元素节点，方法有如下几种：其中querySelector()和querySelectorAll()为ES5的元素选择方法 1、getElementById()： 接收一个
Python xml、字典、json、类四种数据类型如何实现互相转换
12-17
之前都是直接拿sax，或dom等库去解析xml文件为Python的数据类型再去操作，比较繁琐，如今在写Django网站ajax操作时json的解析，发现这篇帖子对这几种数据类型的转换操作提供了另一种更简洁的方法，xmltodict和 ...
JavaScript笔记
09-28
注意：js中的方法可以直接写在代码中，不需要“类”包裹 使用方法：方法名()-->方法调用-->立即执行 2.js文件：网页外专门保存js脚本的文件--推荐 强调：HTML、CSS、JS都要使用UTF-8编码保存(window系统) ...
jquery插件使用方法大全
05-24
　代码 $("selector").load(url,data,function(response,status,xhr)) 该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success) 等价，不同的是它不是全局函数，并且它拥有隐式的回调函数。当...
（一）DOM 常用操作 —— “查找”节点
dcly32014的博客
12-11 497
在 DOM 树中，如果想要操作一个节点，那么首先要“查找”到这个节点。查找节点的方法由 Document接口定义，而该接口由 JavaScript 中的 document 对象实现，你必须熟记它们（各大浏览器对它们的支持情况）。 方法概览 getElementsById() getElementsByName() getElementsByTagName...
html文档查找元素的常用方法,Dom节点操作常用方法和获取文本内容
weixin_35762250的博客
06-03 976
1. 操作常用方法1.1 访问/获取节点document.getElementById(id);　　　　　　　　 　　//返回对拥有指定id的第一个对象进行访问document.getElementsByName(name);　　　　　　//返回带有指定名称的节点集合　　 注意拼写:Elementsdocument.getElementsByTagName(tagname); 　　//返回带有指定...
【DOM】DOM概述及DOM操作之如何查找元素_01
青春木鱼的博客
05-01 1933
DOM是一套专门操作网页内容的对象和函数的集合。今后只要想用JS程序操作网页内容，都必须使用DOM提供的对象和方法。DOM使JS有访问HTML的能力，能够实现对HTML中内容的操作。使用JS操作DOM时分为三个方面：DOM Core（核心）、HTML-DOM和CSS-DOM。
js中获取节点的方式
zcj的博客
11-02 843
1. 获取节点 1.1 根据类名获取节点 var x1=document.getElementsByClassName(“demo”); 1.2 根据标签名获取节点 var x2 = document.getElementsByTagName(“p”); console.log(x2[0]); 1.3 根据id获取节点 var x3 = document.getElementById(“demo1”); console.log(x3); 2. 获取父节点 var x5 = 节点.parentN
JavaScript中获取DOM节点的方法
weixin_52693727的博客
09-26 608
JavaScript中获取DOM节点的方法。
js 树结构中通过节点ID获取节点
ZXF805851154的博客
08-22 672
所以要在递归调用函数时将函数return，不然无法获取return值，且遍历不会停止。打印有值，但是在获取的时候是undefined，
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 434
步骤很详细，直接上教程……
请写出js中获取dom节点的方式
01-29
在 JavaScript 中，有几种常见的方法可以获取 DOM 节点： 1. 通过 `document.getElementById` 方法获取。这种方法可以获取页面中指定 `id` 的元素。例如： ```javascript const element = document.getElementById('myElement'); ``` 2. 通过 `document.querySelector` 方法获取。这种方法可以使用 CSS 选择器来获取页面中的元素。例如： ```javascript const element = document.querySelector('.myClass'); ``` 3. 通过 `document.getElementsByTagName` 方法获取。这种方法可以获取页面中所有指定标签名的元素。例如： ```javascript const elements = document.getElementsByTagName('p'); ``` 4. 通过 `document.getElementsByClassName` 方法获取。这种方法可以获取页面中所有指定类名的元素。例如： ```javascript const elements = document.getElementsByClassName('myClass'); ``` 还有一种方法是通过父元素的 `children` 属性获取其子元素。例如： ```javascript const parentElement = document.getElementById('myParent'); const childElements = parentElement.children; ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值