获取dom节点

最新推荐文章于 2023-05-12 13:44:41 发布
最新推荐文章于 2023-05-12 13:44:41 发布
阅读量83 收藏
点赞数
分类专栏： webstudy 文章标签： 前端 javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41801162/article/details/121749804
版权

获取dom节点

获取dom对象

全局对象 window 中有属性document，代表的是整个文档节点

旧的获取元素节点的方式

dom 0

  • document.body：获取body元素节点
  • document.head：获取head元素节点
  • document.links：获取页面上所有的超链接元素节点，类数组
  • document.anchors：获取页面上所有的锚链接(具有name属性)元素节点
  • document.forms：获取页面中所有的form元素节点

新的获取元素节点的方式

通过方法获取

  • document.getElementById：通过id获取对应id的元素
  • document.getElementsByTagName: 通过元素名称获取元素
  • document.getElementsByClassName：通过元素的类样式获取元素，IE9以下无效
  • document.getElementsByName：通过元素的name属性值获取元素
  • document.querySelector：通过CSS选择器获取元素，得到匹配的第一个，IE8以下无效
  • document.querySelectorAll：通过CSS选择器获取元素，得到所有匹配的结果，IE8以下无效
  • document.documentElement: 获取根元素

细节：

  1. 在所有的得到类数组的方法中，除了querySelectorAll，其他的方法都是实时更新的。
  2. getElementById 得到元素执行效率最高。
  3. 书写了id的元素，会自动成为window对象的属性。它是一个实时的单对象。事实上的标准。不推荐使用。
  4. getElementsByTagName、getElementsByClassName、querySelector、querySelectorAll，可以作为其他元素节点对象的方法使用

根据节点关系获取节点

  • parentNode：获取父节点（元素、文档）
  • previousSibling：获取上一个兄弟节点
  • nextSibling：获取下一个兄弟节点
  • childNodes：获取所有的子节点
  • firstChild：获取第一个子节点
  • lastChild：获取最后一个子节点
  • attributes: 获取某个元素的属性节点

获取元素节点

  • parentElement：获取父元素
  • previousElementSibling：获取上一个兄弟元素
  • nextElementSibling：获取下一个兄弟元素
  • children：获取子元素
  • firstElementChild：获取第一个子元素
  • lastElementChild：获取最后一个子元素

获取节点信息

  • nodeName：获取节点名称
  • nodeValue：获取节点的值
  • nodeType：节点类型，是一个数字
是是是瓜皮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
DOM节点介绍及获取节点的方式
YY的博客
10-20 1844
childNodes、children、firstChild、firstElementChild、lastChild、lastElementChild、previousSibling、previousElementSibling、nextSibling、nextElementSibling、 parentNode、parentElement、attributes、document.body()
关于dom（javascript）
weixin_45044349的博客
12-24 98
获取dom节点 获取dom对象 全局对象 window 中有属性document，代表的是整个文档节点 旧的获取元素节点的方式 dom 0 document.body：获取body元素节点 document.head：获取head元素节点 document.links：获取页面上所有的超链接元素节点，类数组 document.anchors：获取页面上所有的锚链接(具有name属性)元素节点 document.forms：获取页面中所有的form元素节点 新的获取元素节点的方式 通过方法获取 do
js-window对象的属性-DOM文档对象模型-操作元素对象
ye_yeye_ye的博客
04-08 222
window对象的属性 location–地址栏属性 href reload() 刷新 window.location.href="http://www.baidu.com"; window.location.reload(); screen屏幕属性 window.screen.width window.screen.height DOM文档对象模型 隶属于window对象 是window对象的一部分 主要用于动态操作HTML文档（检查 添加 修改 删除。。。） window.do
Javascript学习- DOM获取&属性操作
Java硬件工程师的博客
05-12 3369
DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API白话文:DOM是浏览器提供的一套专门用来操作网页内容的功能开发网页内容特效和实现用户交互标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected自定义属性：在html5中推出来了专门的data-自定义属性在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取。
JavaScript---BOM模型之window对象，DOM模型的节点获取
weixin_37720904的博客
05-08 1199
javaScipt学习的第七天，简单的描述一下本篇要学习的知识点： BOM模型中window对象中部分方法学习演示。 BOM模型中window对象中部分事件学习演示 DOM模型中的节点获取 BOM模型中window对象中部分方法学习演示。confirm方法： 返回值 true/false ,弹出一个包含两个按钮（确定/取消）的确定对话框 <body> <input type="butto
JS~DOM
qq_56458222的博客
08-29 2865
JS dom解读
jQuery获取DOM节点实例分析(2种方式)
11-22
本文将深入探讨如何在jQuery中获取DOM节点，主要介绍两种方法。 **一、使用数组索引方式访问** 在jQuery中，当我们使用`$()`选择器选取DOM元素时，返回的是一个jQuery对象，它包含了被选中的所有元素。这个jQuery...
基本DOM节点操作
11-26
1、获取元素节点 getElementById()：获取指定唯一id的元素。 getElementByTagName()：获取指定元素标签名的元素数组。 getElementByName()：获取具有指定属性name的元素数组。 2、子节点 element.childNodes：返回该...
老生常谈jacascript DOM节点获取
08-30
下面小编就为大家带来一篇老生常谈jacascript DOM节点获取。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在Vue中使用ref获取dom元素节点及组件内的数据和方法
01-20
本文将详细讲解如何在Vue中使用`ref`来获取DOM元素节点以及组件内的数据和方法。 ### 一、获取DOM元素节点 在HTML模板中，给需要引用的DOM元素添加`ref`属性，如： ```html <div ref="mytitle">This is title ...
DOM常用几种获取元素属性方式
m0_68331352的博客
07-30 6926
DOM常用几种获取元素属性方式
DOM操作获取元素节点及切换元素属性值
z_2532040197的博客
07-14 1392
DOM 是document object model （文档对象模型 ），它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口；把文档中的代码翻译成一个对象模型。 在这个模型中 所有相关的标签属性注释文本等等12种数据 都翻译为一种类型的对象 统称节点对象。 这些对象之间在文档模型数据结构中存在某种关系: 根节点 父子节点 同胞节点等等。 ...
Morris算法遍历二叉树
qq_40585050的博客
09-09 581
中序遍历步骤 如果当前节点左子节点(cur.left)为空，输出当前节点(cur)，进入右子节点(cur.right)。 如果当前节点左子节点(cur.left)非空，找到当前节点左子树的最右节点(mostRight)： 1）如果该节点的右子节点(mostRight.right)为空，则将其指针指向当前节点(cur)，进入左子节点(cur.left)。 2）如果该节点的右子节点(mostRight.right)非空，则将其指针置为空，输出当前节点(cur)，进入右子节点(cur.right)。
在DOM中节点属性的设置和获取
weixin_44389868
01-22 973
1.节点属性的设置 对象.属性名=值 &amp;lt;img src=&quot;images/1.jpg&quot; alt=&quot;&quot; id=&quot;imgo&quot;&amp;gt; &amp;lt;input type=&quot;text&quot; id=&quot;inp&quot;&amp;gt; var oImg=document.getEl
js之DOM操作中获取属性方法
web前端菜鸟工程师
09-18 4959
getElementsByName()方法 返回带有指定名称的节点对象的集合。 语法： document.getElementsByName(name) 与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。 注意: 1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组
DOM：获取元素和获取设置属性
lxiaopfeng的博客
09-18 5028
1、document对象的方法 每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 open()                     打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。 close()            
DOM-03-DOM-设置节点属性和获取节点属性
去旅行、在路上
03-21 436
设置节点属性 var img = document,getElementById("#img"); img.setAttribute(“名称”,值) 获取节点属性 img.src img.getAttribute(); 删除 removeAttribute(名称) img.removeAttribute(“src”); ...
js 读取DOM节点样式属性的方法
全赞功成湿的博客
01-18 2415
本文主要介绍了使用document.defaultView.getComputedStyle()或obj.currentStyle()的方法来获取DOM节点样式属性值和一些需要注意的地方，以及使用element.style属性来获取DOM节点样式属性值的不足之处。
java dom属性节点_DOM获取节点全部方法
weixin_39520149的博客
03-04 885
获取节点其他方法概述：DOM对象给我们提供很多方法去获取节点。方法如下：```getElementById:通过节点ID属性值获取标签``````getElementsByTagName:通过标签名字获取节点。这个方法给我返回是是一个数组。数组里面的元素为节点。``````getElementsByClassName:通过标签的calss属性值获取相对应节点，这个方法给我们返回数组数组里的元素也是...
react获取dom节点
最新发布
05-19
在 React 中获取 DOM 节点有多种方法，以下是其中的一些： 1. 使用 ref 属性 可以在组件中通过 ref 属性获取 DOM 节点。例如，可以在 render 方法中创建一个 div 元素，并将其保存到组件的 ref 属性中： ``` class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } componentDidMount() { console.log(this.myRef.current); } render() { return <div ref={this.myRef}>Hello, world!</div>; } } ``` 在 componentDidMount 方法中，可以使用 this.myRef.current 获取到这个 div 元素。 2. 使用回调函数 可以将一个回调函数传递给组件，当组件挂载时，这个函数会被调用并传递组件的 DOM 节点作为参数： ``` class MyComponent extends React.Component { componentDidMount() { console.log(this.myNode); } render() { return <div ref={node => this.myNode = node}>Hello, world!</div>; } } ``` 在 componentDidMount 方法中，可以使用 this.myNode 获取到这个 div 元素。 需要注意的是，使用回调函数的方法在 React 16.3 版本之前是唯一的可靠方法，但是在 React 16.3 版本之后，ref 属性提供了更好的方式来获取 DOM 节点。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值