<html>
<head>
</head>
<body>
<form name="a ">
<table name="b ">
<tr name="c ">
<td name="d "><select name="e "
onchange="xx(this.parentElement.parentElement.parentElement.parentElement.parentElement.name) ">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select></td>
<td> </td> </tr>
<tr> 
</tr>
</table>
</form>
</body>
<script language="javascript" type="text/javascript">
function xx(a) {
alert(a);
}
</script>
</html>

Be careful parentELement The first one returns the current element object

Results output a, This test is in IE Here's what's going on ,firefox Invalid

http://www.w3school.com.cn/css/pr_class_position.asp

First, parentElement attribute , This attribute is easy to understand , Is in the DOM Hierarchy defines the relationship between the superior and the subordinate , If the element A Contains elements B, So the element B You can go through parentElement Property to get the element A.
This is mainly about offsetParent attribute , This attribute is in MSDN It's not clearly explained in the document , This makes it harder to understand this attribute . I found some information on the Internet these days , Plus some of my own tests , With a little understanding of this property , Here's a summary .
To understand offsetParent attribute , Understand first “ Elements positioned ” The name , So-called “ Elements positioned ” It means to set the element position Property style , also position The value of the style property is equal to absolute、relative、fixed One of the elements .
In the use of offsetParent Property to get the parent object, there are two cases :
    1、 The element itself has been positioned
        If the element itself is positioned , that offsetParent Property returns that this element has positioned the parent element , If there is no positioned parent element , Then return to BODY object , for example :
Copy code The code is as follows :
<body>
<p>
<div>
<span id="obj1" style="position:absolute"></span>
</div>
<div id="pObj1" style="position:absolute">
<span id="obj2" style="position:absolute"></span>
</div>
</p>
</body>

obj1.offsetParent return BODY object
    obj2.offsetParent return pObj1 object
    2、 The element is not positioned
        If the element is not positioned , offsetParent Not only the positioned parent element, but also the element of type TD and TABLE Parent element of , If any of the three parent elements is found, this element will be returned , Otherwise return to BODY object , for example :
Copy code The code is as follows :
<table width="500" border="0">
<tr>
<td id="td1">
<div id="pObj1">
<span id="obj1"></span>
</div>
</td>
</tr>
<tr>
<td>
<div id="pObj2" style="position:relative">
<span id="obj2"></span>
</div>
</td>
</tr>
</table>

obj1.offsetParent return td1 object
    obj2.offsetParent return pObj2 object
stay DOM In the attributes of the element , also parentNode This attribute , In fact, this attribute is similar to parentElement Attribute means ,parentElement The attribute is IE Peculiar ,W3C The standard is to use parentNode attribute , also children and childNodes, children yes IE Peculiar , childNodes Supported by other browsers
Detailed source reference :http://www.jb51.net/article/22705.htm

js And parentElement More articles on attributes

  1. Simple understanding js Of prototype attribute

    Before entering the text , I have to tell you first that I know js Of prototype The twists and turns of this thing . Baidu js Of prototype The article , Have a look first ,W3School About prototype Introduction to : You think this concept fits the definition js Of pr ...

  2. JS in style attribute

    terms of settlement :1. So let's define one CSS The rules , then this.className=''2.document.getElementByIdx_x("a").style.cssText=" ...

  3. JS Get page properties including width 、 higher

    JS Get page properties including width . higher . function getInfo()  { // www.jbxue.com var s = "";  s += "  Page visible area width :&q ...

  4. use js control css attribute

    In use js control css Attribute , inline css Properties can be controlled at will , But if it's in <style></style> Written in css attribute , Can't use alert Read , But there are several phenomena of assignment , The first one is : Can't read , ...

  5. jQuery And js Of length attribute

    js:length Property returns the number of characters in the string . stringObject.length jQuery:length Attribute contains jQuery Number of elements in object . $(selector).length ...

  6. js Get the number of object properties

    js Get the number of object properties Method 1 : var attributeCount = function(obj) { var count = 0; for(var i in obj) { if(obj.hasO ...

  7. Vue.js: Compute properties

    ylbtech-Vue.js: Compute properties 1. Return to the top 1. Vue.js Compute properties Compute attribute keywords : computed. Calculating properties is useful when dealing with complex logic . Here's an example of reversing a string : example ...

  8. JS Get element attributes and custom attributes

    There are two types of attributes to get elements : 1- Get common attributes of elements (class,id,type,value……) 2- Get the attributes of the custom element (data-value,data-mess…….) Get the properties of the element , Set element ...

  9. js dom element Attribute collation ( original )

    I've been interviewing with several companies recently , I found that most of the time the interview content is original js Syntax and attributes , So I decided to sort out the original dom Attribute of element . First , I think we need to get a element Elements <li id="2&q ...

Random recommendation

  1. 【Docker】docker /var/lib/docker/aufs/mnt The catalog is full , It's all junk data , What's the matter ?

    command : #!/bin/bash # Recommend ways docker volume ls -f dangling=true | awk '{ print $2 }' | xargs docker volume ...

  2. MVC in @Html.Partial,@Html.Action,@Html.RenderPartial,@Html.RenderAction difference

    Html.RenderPartial And Html.RenderAction Both methods are used to embed user controls in the interface . 1. Html.RenderPartial Is to embed user controls directly into the interface : <% ...

  3. centos7 Turn it on /etc/rc.local The problem of non execution

    The recent discovery centos7 Of /etc/rc.local It won't start up to execute , So I took a serious look /etc/rc.local The reason for the problem is found in the content of the document #!/bin/bash# THIS FILE IS ADDED ...

  4. Message queue - PUSH / Pull mode learning &amp; ActiveMQ And JMS Study

    One category is push and pull . Another category is Queue and Pub/Sub . Let's look at this article first :http://blog.csdn.net/heyutao007/article/details/50131089 ...

  5. Their own use Vue A collection of family problems ( quite a lot eslint Normative issues )

    Come together with a lot of problems . 1.vue Report errors Do not use built-in or reserved HTML elements as component id:header Components , Unable to join html mark ...

  6. When using makemigrations Times wrong No changes detected

    In the revision of models.py after , Some users will like to use python manage.py makemigrations Generate corresponding py Code . But sometimes execution python manage.py makemigration ...

  7. JDK Dynamic proxy sum CGLIB The difference between agents

    One . Principle difference : java Dynamic proxy is to generate an anonymous class that implements the proxy interface by using the reflection mechanism , Before calling specific methods InvokeHandler To deal with it . and cglib Dynamic agents are using asm Open source package , For the proxy object class class file ...

  8. leetCode China and Laos are aiming at one int The processing of each number in the

    One int such as 322, I want to find happy number should 3 Square plus 2 Square plus 2 square , How to find a number one by one , Namely 322%10, obtain 2, then /10, And then again %, You can get the numbers on each one in turn happy num ...

  9. of C++ Templates inline High performance in lambda And function The embodiment of

    Two days ago, I discussed with people in the group about lambda and function The choice of , Ran to write a test, looked up some information and basically came to a conclusion : If there are no free variables , Generally don't use function. If there are free variables ,C++ Medium lam ...

  10. MUI class=&quot;mui-switch&quot; Switch monitoring

    How to MUI Medium switch Switch button to monitor ,  The page code is as follows : <form class="mui-input-group"> <ul class="mu ...