英文:
In Javascript, how can I get the parent (or children) of a custom HTMLElement?
问题
在JavaScript中，我如何获取自定义HTMLElement的父元素（或子元素）？
我想要找出父元素的大小和位置。我还想要附加一个画布。
如果您需要更多关于这个示例问题的信息，请告诉我。我已经尝试了几种其他方法来获取父元素，但它们都失败了。我是HTML、CSS和JavaScript的新手。我主要在C++和Java中工作过。我期待您能提供的任何帮助。
以下是我尝试过的内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>360 Video Player Component</title>
</head>
<body>
<!-- <script src="js/three.min.js"></script> -->
<script type="text/javascript">
class threeSixtyVideoElement extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
console.log("hello");
if (this.parentElement != null) {
console.log("parent = " + this.parentElement);
} else {
console.log("Bummer");
}
}
}
window.customElements.define("threesixty-video", threeSixtyVideoElement);
</script>
<div class="firstLevelDiv" id="L1DIV1">
<div class="secondLevelDiv" id="L2DIV1"> <p>class=secondLevelDiv id=L2DIV1</p> </div>
<threesixty-video class="secondLevelDiv" id="L2DIV2"></threesixty-video>
<div class="secondLevelDiv" id="L2DIV3"> <p>class=secondLevelDiv id=L2DIV3</p> </div>
</div>
</body>
</html>
(Note: The code above is the same as the original code provided, and I haven't made any changes to it.)
英文:
In Javascript, how can I get the parent (or children) of a custom HTMLElement?
I want to find out the size and location of the parent element. I also want to attach a canvas.
please let me know if you want more information for this example question. I have tried several other ways to get the parent but they have all failed. I am new to HTML, CSS, an Javascript. I have mainly worked in C++ and Java. I look forward to any help you can provide.
Here is what I tried:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>360 Video Player Component</title>
</head>
<body>
<!-- <script src="js/three.min.js"></script> -->
<script type="text/javascript">
class threeSixtyVideoElement extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
console.log("hello");
if (this.parentElement != null) {
console.log("parent = " + this.parentElement);
} else {
console.log("Bummer");
}
}
}
window.customElements.define("threesixty-video", threeSixtyVideoElement);
</script>
<div class="firstLevelDiv" id="L1DIV1">
<div class="secondLevelDiv" id="L2DIV1"> <p>class=secondLevelDiv id=L2DIV1</p> </div>
<threesixty-video class="secondLevelDiv" id="L2DIV2"></threesixty-video>
<div class="secondLevelDiv" id="L2DIV3"> <p>class=secondLevelDiv id=L2DIV3</p> </div>
</div>
</body>
</html>
答案1
得分: 1
以下是翻译好的部分：
你正在尝试在构造函数中获取父元素。然而，在调用构造函数时，即对象被实例化时，父元素可能为null，因为它尚未被插入到HTML DOM中。
你需要使用connectedCallback函数，该函数在元素插入到HTML DOM中后调用，而不是在构造函数中进行检查。
connectedCallback() {
console.log(this.parentElement);
}
此connectedCallback函数将在你的元素插入DOM中时执行，并提供父元素。
你的类应该如下所示：
class threeSixtyVideoElement extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
console.log("hello");
}
connectedCallback() {
console.log(this.parentElement)
}
}
英文:
You are trying to get the parent element in your constructor. However, when your constructor is called i.e., the object is instantiated, the parent might be null because it has not yet been inserted in the HTML DOM.
You need to use the connectedCallback function, which is called after an element is inserted in the HTML DOM, instead of checking in the constructor.
connectedCallback() {
console.log(this.parentElement);
}
This connectedCallback function will execute when your element is inserted into the DOM and will give you the parent element.
Your class should look like this:
class threeSixtyVideoElement extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
console.log("hello");
}
connectedCallback() {
console.log(this.parentElement)
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论