获取DOM对象的方法

最新推荐文章于 2023-04-12 13:34:32 发布
最新推荐文章于 2023-04-12 13:34:32 发布
阅读量589 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45766103/article/details/110187805
版权

1.通过id查找对象，返回一个对象

document.getElementById('id名')

2.通过标签名查找对象集合，即使返回0个或者1个，也是返回一个对象集合

document.getElementByTagName('标签名')

3.通过类名查找对象集合，即使返回0个或者1个，也是返回一个对象集合

document.getElementByClassName('类名')

4.通过CSS选择器查找对象
（1）querySelector(‘css选择器’) 只查找一个对象
（2）querySelectorAll(‘css选择器’) 查找对象集合
5.节点方式查找对象
（1）DOM树：DOM结构像树一样，从文档document逐步展开
每个元素都可以看做是树的一个节点
每个元素都有以下关系：根节点、父节点、子节点、兄弟节点
（2）查找节点
父节点：parentNode
第一级所有子节点：children
第一个子节点：firstElementChild
最后一个子节点：lastElementChild
前一个兄弟节点：previousElementSibling
后一个兄弟节点：nextElementSibling

欣欣向荣的小博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
获取dom对象(页面元素)的几种方法。
m0_48541096的博客
05-02 586
1.获取dom对象(页面元素) // 1）querySelector...选择方法 // var li1 = document.querySelector("li:nth-child(3)"); // var li1 = document.querySelector(".li1"); // var lis = document.querySelectorAll("li"); // con...
获取DOM对象的几种扩展及简写
12-07
参照prototype.js中getElementsByClassName的思想，扩展出几种在DEOM操作中可经常用到的获取对象的方法，使用获取对象变得更方便、更精确了： document.getElementsByClassName = function(className,oBox) { //...
获取DOM对象的五种方式
微风的博客
08-15 2590
#获取DOM对象的五种方式 ##一，通过ID获取DOM对象 ``` varxx=document.getElementById（'xx'） ``` ##二.通过签名获取DOM对象 ``` varxx=document.getElementsByTagId（'xx'） ``` ##三.通过类名获取DOM对象（获取的） ``` varxx=document.getElementsByClassName('xx') ``` ##...
javascript三种获取dom对象的方法
yuzuodeyunwcj的专栏
01-22 742
1、getElementById() getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。 function getValue() { var x=document.getElementById("myHeader") alert(x.innerHTML) } This is a header Click on the h
javascript之DOM操作
weixin_34343308的博客
08-15 198
javascript之DOM操作 一、document.getElementById()根据Id获取元素节点 <divid="div1"> <pid="p1">...
JavaScript获取DOM对象的几种方式
weixin_30530339的博客
11-14 153
1.getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用 2.getElementsByName() 方法可返回带有指定名称的对象的集合 3.getElementsByTagName() 方法可返回带有指定标签名的对象的集合 4.getElementsByClassName() 方法可返回带有指定类名的对象的集合 5.document.querySel...
JavaScript实现获取dom中class的方法
12-09
本文实例讲述了JavaScript实现获取dom中class的方法。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></...
jquery获取iframe中的dom对象(两种方法)
10-27
本文为大家详细介绍下父窗口中操作iframe、在子窗口中操作父窗口，获取iframe内的dom对象有两种方法，感兴趣的朋友可以了解下哈，希望对大家有所帮助
jQuery对象与DOM对象转换方法详解
01-21
本文实例分析了jQuery对象与DOM对象的转换方法。分享给大家供大家参考，具体如下： ...jQuery对象的索引保存的是dom对象，所以可以通过索引将经jQuery对象转化为dom对象（实际上是获取保存在jQuery对象中的
jQuery对象和DOM对象之间相互转换的方法介绍
01-19
jQuery对象不能使用DOM中的方法，但是如果对jQuery对象所提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不实用DOM对象的时候，有以下两种处理方法。jQuery提供了两种方法将一个jQuery对象转换成DOm对象，即...
【API】获取DOM对象
weixin_51664510的博客
04-12 81
【API】获取DOM对象
【JavaScript】- 获取DOM对象
m0_55960697的博客
03-26 968
1. 根据CSS选择器来获取DOM元素 (重点) 文档对象模型Document引用的**querySelector()**方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。 如果找不到匹配项，则返回null。 语法： elment = document.querySelector('css选择器') 如： <button id= 'do' class= 'in'></button> `document.querySelector:` d
获取dom页面文档对象的5种方法~js篇
qq_64970126的博客
04-17 2343
1、通过ID获取： document.getElementById( ‘ID名’); 2、通过标签名获取：getElementsByTagName(‘指定的标签’）； 3、通过标签名获取某个标签准确的子元素：’明确的变量‘.getElenentsTagName(‘指定的标签’); 4、h5新增获取元素方法 5、获取特殊元素( body , html )获取body元素
Javascript-获取DOM元素的五种方法
Ass12454548的博客
01-15 3909
简介本文主要介绍通过JS获取DOM元素的五种方法:1.根据id名获取元素:getElementById;2.根据标签名获取元素:getElementsByTagName,返回一个数组;3.根据类名获取元素:getElementsBClassName,返回一个数组;4.根据name属性获取元素:getElementsByName,返回一个数组;5.根据选择器获取元素:1.querySelector:获取一个元素,推荐使用,用法类似写css;
DOM快速入门——DOM获取元素对象的6种方式
热门推荐
Potry Code的博客
08-02 1万+
目录：一、为什么要获取页面元素？二、获取元素的5种方式：1.根据id获取元素2.根据标签名获取元素3.根据name获取元素4.根据类名获取元素5.根据选择器获取元素三、总结： 一、为什么要获取页面元素？ 例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作。 二、获取元素的5种方式： 1.根据id获取元素 document.getElementById...
10.dom树
qq_38390669的博客
11-17 180
dom tree 当浏览器加载HTML页面的时候，首先就是DOM结构的计算，计算出来的DOM结构就是DOM树（把页面中的HTML标签像树桩结构一样，分析出之间的层级关系） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <div class="box" id="box"> <ul> &lt...
JS——DOM对象常用方法知识简记
TKY666的博客
05-01 3653
目录 获取DOM对象方法一 1.通过id获取 2. 通过class(类名)获取 3. 通过标签名获取 4. 通过name属性获取 5. 通过querySelector（选择器）获取 6. 通过querySelectorAll获取 获取特殊对象方法 body html 获取或返回元素内容方法 JS与CSS交互 js添加与修改属性样式 样式获取（查询） 类操作 DOM节点 节点属性操作 节点操作（增删复插替） 获取DOM对象方法二 节点查找 父节点查找子节点方法...
获取DOM元素的几种方法
weixin_44007039的博客
09-27 332
1.通过ID获取（getElementById） 2.通过name属性（getElementsByName） 3.通过标签名（getElementsByTagName） 4.通过类名（getElementsByClassName） 5.获取html的方法（document.documentElement） 6.获取body的方法（document.body） 特： 通过css选择器获...
什么是DOM对象？如何获取DOM对象？
zy1992As的博客
06-13 2238
DOM对象本质上是浏览器根据html标签生成的 JS对象，它的所有的标签属性都可以在这个 JS对象上面找到，修改这个对象的属性会自动映射到标签身上。DOM的核心思想是把网页内容当做对象来处理。其中document 对象是DOM 里提供的一个对象，所以它提供的属性和方法都是用来访问和操作网页内容的，网页中所有的内容在document里面。document与其他网页中各个节点元素关系如下：将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树。文档树模型直观的体现了标签与标签之间的关系。
renderjs获取dom对象
最新发布
06-02
要使用renderjs获取DOM对象，可以使用以下方法： 1. 使用renderjs提供的 `render.createRef()` 方法创建一个引用对象。 2. 将该引用对象作为组件的 `ref` 属性传递给目标DOM元素。 3. 在组件的代码中，使用 `ref.current` 属性来获取目标DOM元素的引用。 例如，在React组件中，可以这样获取一个`<div>`元素的引用： ``` import React from 'react'; import { render } from 'renderjs'; class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = render.createRef(); } componentDidMount() { console.log(this.myRef.current); // 输出 <div> 元素的引用 } render() { return <div ref={this.myRef}>Hello, world!</div>; } } ``` 注意：以上代码中的 `render` 对象是在引入renderjs库后自行定义的。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值