[Javascript] Finding Parent Elements

const app = document.getElementById(‘app‘);
app.innerHTML = `
  <h1>JavaScript DOM</h1>
  <div class="item"></div>
`;

const item = document.querySelector(‘.item‘);

console.log(item.parentNode);
console.log(item.parentElement.parentElement);

console.log(item.closest(‘#app‘));
console.log(item.closest(‘body‘));

原文地址:https://www.cnblogs.com/Answer1215/p/12596289.html

时间: 2024-10-16 16:45:18

[Javascript] Finding Parent Elements的相关文章

[Javascript] Finding Sibling Elements

const app = document.getElementById('app'); app.innerHTML = ` <h1>JavaScript DOM</h1> <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> `; const listItem = do

IE (6-11)版本,在使用iframe的框架时,通过a标签javascript:; 和js跳转parent.location的时候 出现在新页面打开的情况

问题描述: 使用iframe的情况下,在子框架中,使用如下形式的跳转: <a href="javascript:;" onclick="parent.location.href='login.php';"> 退出</a> 在IE浏览器下,点击后,会在退出的情况下,再打开一个页面,URL显示为 javascript:;  的情况出现,也就是说 a标签的 javascript:; 并未生效! 这是一个很奇怪的现象,在谷歌等现代浏览器中并不存在该问

JavaScript :memory leak [转]

Memory leak patterns in JavaScript Handling circular references in JavaScript applications Abhijeet Bhattacharya and Kiran Shivarama SundarPublished on April 24, 2007 FacebookTwitterLinked InGoogle+E-mail this page 6 JavaScript is a powerful scriptin

原生javascript代码懒加载

1.先定义需要懒加载的样式: class="lazyload" 2.设置初始透明度为0.1: .lazyload{ filter: Alpha(opacity=10); -moz-opacity:0.1; opacity:0.1; } 3.把真正需要加载的真实地址放在data-src属性中: src="懒加载图片.png" data-src="真实图片"; 4. 前端开发周大伟同学JavaScript代码编写: function lazyload

Random Javascript code snippets

MollyPages.org"You were wrong case.To live here is to live." Home Pages / Database / Forms / Servlet / Javadocs / License & Download / Tutorials / Cookbook / Contact Return to Tutorials index Random collection of misc. code and snippets Priv

Centering HTML elements larger than their parents

Centering HTML elements larger than their parents It's not a common problem, but I've run into it a few times. How do you center an element when it is larger than it's parent? I mean really center it, where content overflows both the left and right b

JointJS:JavaScript 流程图绘制框架

目录 JointJS:JavaScript 流程图绘制框架 JointJS 简介 JointJS Hello world 前后端分离架构 其他 自动布局 Automatic layout 使用 HTML 定制元素 JointJS:JavaScript 流程图绘制框架 最近调研了js画流程图的框架,最后选择了Joint.配合上 dagre 可以画出像模像样的流程图. JointJS 简介 JointJS 是一个开源前端框架,支持绘制各种各样的流程图.工作流图等.Rappid 是 Joint 的商业

JavaScript初探三

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <ul id

JavaScript 详说事件机制之冒泡、捕获、传播、委托

DOM事件流(event  flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(dubbed  bubbling):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件. 事件冒泡(event  capturing):与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点. 无论是事件捕获还是事件冒泡,它们都有一个共同的行为,就是事