首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

获取clicked元素的id而不在html中放入任何js代码

获取 clicked 元素的 id 可以通过以下几种方法实现,不需要在 HTML 中放入任何 JavaScript 代码:

  1. 通过 getElementById 方法获取指定 ID 的元素:var element = document.getElementById("your-element-id");var element = document.querySelector(".your-class-name"); // 或 var element = document.querySelector("#your-element-id");var element = document.querySelector("body > .your-class-name"); // 或 var element = document.querySelector("body > #your-element-id");var element = document.getElementById("your-element-id");这些方法可以在 HTML 中不包含 JavaScript 代码的情况下获取元素的 ID。
  2. 通过 querySelector 方法获取具有指定类名或 ID 的元素:
  3. 通过 document.querySelector 方法获取具有指定类名或 ID 的元素:
  4. 通过 document.getElementById 方法获取具有指定 ID 的元素:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 如何制作自己原生 JavaScript 路由

    .length 属性是会话历史记录元素数。 .state 属性用于查找状态,而无需侦听**“ popstate” **事件。 现在开始实现我们自己原生 JS 路由!...基于 History API Vanilla JS 路由设置 先让我们仔细研究构建 URL 切换器所需最少代码(而无需刷新页面),然后我会向你展示其工作方式 GIF 动图。...我们只需将存储在元素 id 属性 clicked 元素 id 传递给它即可:home,about,gallery 等。它们应与你要导航到实际页面一致。...当然这不是存储页面名称唯一方法,例如可以用 array [] 或其他任何方式。这就是本例操作方式。 当然我们还需要从服务器加载有关该位置布局和资源内容。这取决于你程序。可以是任何东西。...我们在这里没有使用 React 或 Vue,因此在我代码 load_content 将负责直接在 DOM 更新视图。此区域可能填充了你 API 加载某些内容。

    3.8K20

    Vue2学习计划五:v-on、v-model、v-if、v-for和v-show

    keyCode指键盘编码,用于监听键盘事件。 .native 监听组件根元素原生事件,必须用在组件 .once 只触发一次 接下来放上一坨代码举例示范 <!..."监听input事件,然后将事件值传递给message 2.1 v-model结合radio类型使用 使用v-model即可将输入放入数据,然后就可以进行处理和传输 在radio多个单选框JS做法是将多个...单选绑定是一个变量,多选框checkbox则是绑定了一个数组。 <!...毕竟v-if也可以用来展示或者隐藏元素 主要区别有以下: v-if条件为false时,不会有对应元素存在DOM v-show条件为false时,仅将元素display属性设置为none 先来看代码使用一下...原因就是,v-if是对元素进行销毁和创建,v-show只是CSS状态切换,这就是为什么显示和隐藏频繁切换时要使用v-show原因了。

    4.2K20

    JS 和 Node.js “事件驱动”是什么意思?

    实际上,浏览器 JavaScript 可以与 HTML 元素进行交互,这些 HTML 元素是事件发送器(event emitters),即能够发送事件对象。...浏览器事件目标是能够发出事件对象:它们是观察者模式主题。 有点混乱?请记住:主题是 FM 广播,所以任何 HTML 元素都像是广电台。 一会儿,你将看到谁是观察者。...浏览器主题和观察者 如果 HTML 元素是主题,那么谁是观察者?任何注册为侦听器 JavaScript 函数都可以对浏览器事件做出反应。...在 Node.js ,没有任何 HTML 元素,因此大多数事件都来自进程、与网络交互、文件等。...如果你想要与浏览器对应,那么可以把 EventEmitter 看作是能够发出事件任何一种 HTML 元素

    8.4K20

    vue里面事件修饰符.stop使用案例

    下面是一个使用 .stop 事件修饰符简单案例: 运行效果: 当点击页面的Click Button文案时,浏览器Console位置只会输出一句Child button clicked 如果将代码...事件修饰符在 Vue.js 中非常有用,特别是在处理复杂事件传播和处理场景时。...以下是一些常见使用场景: 防止事件冒泡: 这是 .stop 最常见用途。当一个元素嵌套在另一个元素内部,并且两者都有相同事件处理函数时,.stop 可以防止事件从子元素冒泡到父元素。...在模态框阻止点击外部关闭: 当你在模态框显示一个弹出窗口或者对话框时,你希望用户点击模态框外部时不关闭模态框,但是点击模态框内部元素时可以执行相应操作。...阻止父组件事件监听器执行: 在 Vue.js ,你可能有一个父子组件嵌套场景,父组件可能会监听某些事件,子组件可能也有自己事件处理逻辑。

    27510

    25个常规方法优化你jquery代码

    如果你一次又一次选择相同元素(例如在一个循环中),那么你可以一次选择出它并放入内存,同时你可以在核心内容里操作它。...尽可能使用ID不是class jQuery利用classes进行DOM元素选择操作与通过ID进行选择一样容易,因此与之前相比更自由使用classes进行元素选择操作很有吸引力。...因此我修改上述代码以使用ID不是class,然后通过ID进行选择。 ...因此我们仅需要把这些HTML内容放入一个静态页面,在页面加载完成之后通过load()函数加载它: 复制代码代码如下: $(‘#forms’).load(‘content/headerForms.html...首先,在jQuery加载之后你可以使用方法将”JS”类添加到HTML标签: 复制代码代码如下:$(‘HTML’).addClass(‘JS’); 因为这仅仅发生在javascript有效时候,如果用户打开

    1.6K10

    分享5个关于 Vue 小知识,希望对你有所帮助(二)

    2、如何在Vue.js组件调用全局自定义函数? 我们可以创建混入(mixins)使助手函数在Vue.js单文件组件全局可用。 例如,我们可以这样编写: {{ capitalizedName }} <...当在Vue.js中点击一个包含按钮元素时,我们可以使用self修饰符来防止点击事件冒泡到父元素。...我们可以通过为想要滚动到元素分配一个引用来使用Vue.js滚动到该元素然后,我们可以在分配给引用元素上调用scrollIntoView方法来滚动到该元素。...然后我们有一些p元素,其中最后一个引用被分配给最后一个p元素。在scrollToElement方法,我们通过解构使用this.$refs.last获取分配给最后一个引用元素

    15120

    分享5个关于 Vue 小知识,希望对你有所帮助

    在这篇文章,我们将学习如何在Vue.js获取选择选项。 在Vue.js获取选择选项 我们可以通过将@change设置为一个方法来在Vue.js获取选择选项。...3、在Vue.js获取组件内元素 有时候,我们希望在Vue.js获取组件内元素。在本文中,我们将讨论如何在Vue.js获取组件内元素。...要在Vue.js获取组件内元素,我们可以给想要获取元素分配一个引用(ref)。然后,我们可以在任何生命周期或常规方法中使用this.$refs属性来获取元素。...然后,我们可以在任何生命周期或常规方法通过this.$refs.someName来获取元素。 我们可以调用任何DOM元素方法,比如getAttribute,对其进行操作。...这段 Vue.js 代码自定义指令 "v-click-outside" 主要用于处理点击元素外部事件。

    21130

    50个必备实用jQuery代码

    本文会给你们展示50个jquery代码片段,这些代码能够给你javascript项目提供帮助。...其中一些代码段是从jQuery1.4.2才开始支持做法,另一些则是真正有用函数或方法,他们能够帮助你又快又好地把事情完成。...$('#keks').html()) { //什么都没有找到; } // 方法二 if ($('#keks').is(":empty")) { //什么都没有找到; } 如何从一个未排序集合找出某个元素索引号...*包含了对这一has方法支持。 //该方法找出某个元素是否包含了其他另一个元素类或是其他任何你正在查找并要在其之上进行操作东东。...#id'); el.html(el.html().replace(/word/ig, '')); 如何在一段时间之后自动隐藏或关闭元素(支持1.4版本): //这是1.3.2我们使用setTimeout

    6.7K00

    【Vuejs】242-7个有用Vue开发技巧

    1 状态共享 随着组件细化,就会遇到多组件状态共享情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说,如果应用不够大,为避免代码繁琐冗余,最好不要使用它。...,在组件里面使用引入数据和方法 <img width="25%" src="....这里涉及到<em>的</em>一个最重要<em>的</em>点就是父组件要去<em>获取</em>子组件里面的数据,之前是利用 slot-scope。...}; 可以看到传递属性和事件<em>的</em>方便性,<em>而</em>不用一个个去传递 6 函数式组件 函数式组件,即无状态,无法实例化,内部没有<em>任何</em>生命周期处理方法,非常轻量,因而渲染性能高,特别适合用来只依赖外部数据传递<em>而</em>变化<em>的</em>组件...$emit("mounted"); } 这里提供一种特别简单方式,子组件不需要任何处理,只需要在父组件引用时候通过 @hook来监听即可,代码重写如下: <Child @hook:mounted="

    51420
    领券