this.parentNode.parentNode

最新推荐文章于 2021-06-10 01:24:36 发布
最新推荐文章于 2021-06-10 01:24:36 发布 · 179 阅读 · 0

本文详细解析了HTML元素之间的父子节点关系，特别是如何通过`parentNode`属性访问和操作这些关系，以实现特定的DOM操作，如在表单中通过事件触发对特定子元素的操作。
▼

父节点的父节点，比如有这样一段

HTML:

<form id="form">

<div id="divA">

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><span></span>&lt;div id="divB"&gt; &lt;input type="button" value="删除" on<wbr>Click="deleteMe(this.parentNode.parentNode);"&gt;<wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><span></span>&lt;/div&gt;</wbr></wbr></wbr></wbr></wbr></wbr></wbr>

</div>

</form>

这样的话，那里面的this.parentNode就是divB,而this.parentNode.parentNode就是divA所谓parentNode就是其上一层节点。

iteye_4639
关注
如何使用 parentNode 来获取一个或多个 HTML 元素.
我的成长之路
12-28 2124
"parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点                ... 看个例子, 你就会明白我说的意思了 ...     &lt;div id="parent"&gt;                  &lt;b id="child"&gt;My text&lt;/b&gt;&lt;/div&a
js -parentNode、offsetParent父节点
qq_35187942的博客
01-05 560
 &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="{CHARSET}"&gt;         &lt;title&gt;&lt;/title&gt;         &lt;script&gt;             window.onload = function(
this.parentNode.parentNode;
skysmanword的专栏
06-23 859
<br />父节点的父节点，<br />比如有这样一段HTML:<br /><form id="form"><br /><div id="divA"><br />  <div id="divB"> <br />   <input type="button" value="删除" onClick="deleteMe(this.parentNode.parentNode);"><br />  </div><br /></div><br /></form><br />这样的话，那里面的this.parentNod
html parent 属性,parentNode属性怎么用？
weixin_39998273的博客
06-10 2150
parentNode是javascript DOM对象中的一个属性，用于返回某节点的父节点。下面本篇文章就来给大家简单介绍一下parentNode属性，希望对大家有所帮助。parentNode属性可指定元素对象后获取该元素的父节点对象，如果指定的节点没有父节点则返回null 。语法node.parentNode返回值：作为一个节点对象返回父节点。说明：所有主要浏览器都支持 parentNode 属...
var tr = this.parentNode.parentNode; // 删除 tr.parentNode.removeChild(tr);
05-29
首先通过 `this.parentNode.parentNode` 获取到该行元素的父元素的父元素，即表格的 `<tbody>` 元素，然后调用 `removeChild()` 方法删除该行元素节点。这里的 `this` 是执行该段代码的元素节点，一般情况下是一个...
var tr = this.parentNode.parentNode; tr.childElement.remove();
05-29
var tr = this.parentNode.parentNode; tr.remove(); ``` 这段代码的作用是，通过 `this` 获取当前按钮元素节点，并通过 `parentNode` 属性获取该节点的父节点，即要删除的表格行元素节点。然后调用 `remove()` ...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>domcart</title> <style> span{ display: inline-block; border-color:red ; border-style: solid; width: 40px; } table{ border:1px solid green; border-spacing: 0px; font-family:"宋体"; font-size: 16px; margin:auto; } tr{ height: 36px; } th,td{ border: 1px solid green; text-align: center; width: 140px; } </style> <script> window.onload=function(){ var deletebuttons=Array.from(document.getElementsByClassName("deleteitem")); deletebuttons.forEach( function (deletebutton){ deletebutton.onclick=function(){ var tr=this.parentNode.parentNode; tr.remove(); } } ) var increasebuttons=Array.from(document.getElementsByClassName("increase")); increasebuttons.forEach( function(increasebutton){ increasebutton.onclick=function(){ var count=parseInt(this.nextElementSibling.firstChild.nodeValue); count++; this.nextElementSibling.innerHTML=count; var stock=parseInt(this.parentNode.previousElementSibling.firstChild.nodeValue); stock--; this.parentNode.previousElementSibling.innerHTML=stock; var price=parseFloat(this.parentNode.previousElementSibling.previousElementSibling.firstChild.nodeValue); var amount=count*price; this.parentNode.nextElementSibling.innerHTML=amount; //update total var total=0; var amountcells=Array.from(document.getElementsByClassName("amount")); amountcells.forEach( function(amountcell){ var value=parseFloat(amountcell.firstChild.nodeValue); total+=value; } ) } } ) var minusbuttons=Array.from(document.getElementsByClassName("minus")); increasebuttons.forEach( function(minusbutton){ minus.onclick=function(){ var count=parseInt(this.nextElementSibling.firstChild.nodeValue); count--; this.nextElementSibling.innerHTML=count; var stock=parseInt(this.parentNode.previousElementSibling.firstChild.nodeValue); stock++; this.parentNode.previousElementSibling.innerHTML=stock; var price=parseFloat(this.parentNode.previousElementSibling.previousElementSibling.firstChild.nodeValue); var amount=count*price; this.parentNode.nextElementSibling.innerHTML=amount; //update total var total=0; var amountcells=Array.from(document.getElementsByClassName("amount")); amountcells.forEach( function(amountcell){ var value=parseFloat(amountcell.firstChild.nodeValue); total+=value; } ) } } ) } </script> </head> <body> <table> <caption>DomCart</caption> <thead> <th>index</th> <th>nmae</th> <th>price</th> <th>stock</th> <th>quabtity</th> <th>amount</th> <th>delete</th> </thead> <tbody> <tr> <td>1</td><td>huawei mate10</td><td>1000</td><td>20</td><td><button class="increase">+</button> <Span>4</Span> <button class="increase">-</button></td><td>4000</td><td><button class="deleteitem">delete</button></td> </tr> <tr> <td>2</td><td>byd Q8</td><td>500</td><td>20</td><td><button class="increase">+</button> <Span>4</Span> <button class="increase">-</button></td><td>2000</td><td><button class="deleteitem">delete</button></td> </tbody> </table> </body> </html>格式不变，找错误就行
最新发布
11-27
var price=parseFloat(this.parentNode.previousElementSibling.previousElementSibling.firstChild.nodeValue); var amount=count*price; this.parentNode.nextElementSibling.innerHTML=amount; updateTotal()...
<script> function join(){ msgBox.style.display="block" layer.style.display="none" } function index(){ location.href="./index.html" } var send=document.querySelector(".send") function hq(){ var del=document.querySelectorAll(".del") var top1=document.querySelectorAll(".top") for(let i=0;i<del.length;i++){ del[i].onclick=function(){ this.parentNode.parentNode.parentNode.remove() } top1[i].onclick=function(){ this.parentNode.parentNode.parentNode.parentNode.insertBefore(this.parentNode.parentNode.parentNode,this.parentNode.parentNode.parentNode.parentNode.firstChild) } } } hq() // var face=document.querySelectorAll("#face img") for(let i=0;i<face.length;i++){ face[i].onclick=function(){ for(let t=0;t<face.length;t++){ face[t].classList.remove('current'); } this.className="current" } }解释代码
06-08
这段代码是一个简单的聊天室页面的前端代码。具体来说，这段代码实现了以下功能： 1. 定义了 `join()` 函数，当用户点击加入聊天室按钮时，将消息框（`msgBox`）显示出来，并将遮罩层（`layer`）隐藏起来。...
parentElement\parentNode.parentNode.childNodes用法例子
zb0567的专栏
01-06 4222
offsetParent，parentNode,parentElement 区别  offsetParent  指与位置有关的上级元素  parentNode  指与位置无关的上级元素  parentElement 和 parentNode一样,但parentNode是W3C标准的parentElement 只在IE中可用.   第一种方法   New Docume
Javascript中parentNode的用法
weixin_30376509的博客
06-01 983
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title&g...
JS小练习之childNodes，children，parentNode，offsetparent，firstChild与firstElementChild的用法
weixin_41586886的博客
06-11 387
&lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;DOM基础&lt;/title&gt; &lt;style&gt;&lt;/styl
js parentNode的应用
mathew的专栏
08-30 3774
function chx2(obj){ var h = obj.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; var ins = h.getElementsByTagName(input); var chall = true; //alert(ins.length);
3parentNode小例子
Kasekale的博客
11-13 288
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #ul li{ width: 150px; height: 50px; background: pi
parentNode 、 offsetParent父节点
Winge_Fish的博客
02-28 520
parentNode （推荐使用） 元素.parentNode : 只读 属性 当前节点的父级节点，完美兼容。 来个栗子：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload = function() { oA=
js日记之节点操作
m0_53438035的博客
05-03 272
睡不着，半夜起来学习–2021年某日凌晨4：02 一：父节点 1：返回父节点 element.parentNode，得到的是离元素最近的父节点。如果找不到则返回为null 代码： <body> <div class="g"> <div class="f"> <div class="s"></div> </div> </div> <scrip
javascript的parentNode父节点操作(1)
骑着猪猪去拍拖
06-08 1992
javascript的parentNode父节点操作(1) window.onload = function(){ var oA = document.getElementsByTagName('a'); for(var i=0; i<oA.length; i++){ oA[i].onclick = function(){
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值