onclick 如何获取当前dom节点

本文介绍了一种使用jQuery操作DOM元素的方法,通过实例演示了如何为DOM元素添加类,展示了jQuery在网页开发中的实用性和灵活性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<div class="box">
    <span class="literSpan" onclick="changeDiv(this)">图表</span>
</div>
  function changeDiv(obj) {
        //通过class类获取jquery对象,来操作元素属性
        $('.literSpan').parent().addClass('aa');
        //通过传this,在方法中接收$(this),把dom对象转换jq对象
        $(obj).parent().addClass('aa');

        //不可以用$(this)来获取当前dom节点。
        // this 指的是 window 对象
        // $(this)指的是jq 的 window对象
        $(this).parent().addClass('aa');
    }
在 React 函数式组件中,获取 DOM 节点的方式与在类组件中有所不同,因为函数式组件没有实例化对象,因此无法使用 ref 属性来获取 DOM 节点。 通常情况下,React 鼓励开发者遵循“单向数据流”的原则,即通过 props 和 state 来管理组件的状态和数据,而不是直接操作 DOM 节点。因此,如果想要获取 DOM 节点,应该考虑使用 React 提供的 ref 回调函数或者 Hook。 1. 使用 ref 回调函数 可以通过 ref 回调函数来获取 DOM 节点,并将其保存在组件的 state 中。具体实现方式如下: ```jsx import React, { useState, useRef } from 'react'; function MyComponent() { const [domNode, setDomNode] = useState(null); const handleClick = () => { console.log(domNode); }; return ( <div ref={node => setDomNode(node)}> <button onClick={handleClick}>Click me</button> </div> ); } ``` 上面的代码中,我们使用 useState Hook 来定义一个 state 变量 domNode,然后在组件的 JSX 中使用 ref 属性来获取 DOM 节点,并将其传递给一个回调函数,这个回调函数会将当前DOM 节点作为参数,然后将它保存在 domNode 变量中。最后,我们可以在 handleClick 函数中打印 domNode 变量来获取 DOM 节点。 2. 使用 useRef Hook 另一种获取 DOM 节点的方式是使用 useRef Hook。useRef Hook 可以返回一个可变的 ref 对象,它的 current 属性可以存储任意值。具体实现方式如下: ```jsx import React, { useRef } from 'react'; function MyComponent() { const domNode = useRef(null); const handleClick = () => { console.log(domNode.current); }; return ( <div ref={domNode}> <button onClick={handleClick}>Click me</button> </div> ); } ``` 上面的代码中,我们使用 useRef Hook 来定义一个 ref 对象 domNode,然后在组件的 JSX 中使用 ref 属性将其绑定到一个 DOM 节点上。最后,我们可以在 handleClick 函数中打印 domNode.current 属性来获取 DOM 节点。 总的来说,虽然在函数式组件中获取 DOM 节点比在类组件中麻烦一些,但是通过使用 ref 回调函数或者 Hook,我们仍然可以轻松地获取到需要的 DOM 节点
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值