css - 使用parentNode获得父元素，为什么获取的不是父元素？
本文介绍了css - 使用parentNode获得父元素，为什么获取的不是父元素？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
请看下面代码
<!doctype html>
<html style="background: YELLOW;">
<body style="background: PINK;">
<div style="width:500px;height:300px;border:2px solid red">
<input type="text" id="input" onfocus="f()"/>
</div>
<script>
var z = document.activeElement;
var b = z.parentNode;
alert(b.tagName); //为什么弹出HTML?
function f(){
b.style.border = "5px solid BLUE";
}
</script>
</body>
</html>
下图是点击input之后的效果。我的本意是获取input的父元素，就是那条红色的线，结果却获取了不知道是什么的线，好像是body的。我添加了alert想获取input父元素的标签名，结果却弹出HTML,于是，我将html、body都上了色，body粉红，html黄色，如图所示，请问这如何解释？谢谢
我该如何获取input的父元素？
解决方案
<script>
function f(){
var z = document.activeElement;
var b = z.parentNode;
alert(b.tagName);
b.style.border = "5px solid BLUE";
}
</script>脚本会自动运行，所以当你加载时默认焦点出于body内，所以获取到html元素。
f是callback函数，在获得焦点时调用。
这篇关于css - 使用parentNode获得父元素，为什么获取的不是父元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
