首先,父节点是相对于HTML文档的DOM树而言的。如下面的HTML:
<html><head></head>
<body>
<div id="id1">
<div id="id2">
</div>
</div>
</body>
</html>
在这个HTML的DOM树里面,id2这个div节点的父节点是id1这个div,页id1这个div的父节点是body。
一般来说,每个元素都有一个父节点,有0到多个子节点。
而Javascript中,修改一个DOM节点的外观,是通过修改这个DOM节点对象的属性来实现的。
例如:
var div2 = document.getElementById('id2')// 取id=id2这个节点
var div1 = div2.parentNode// div2的父节点,也就是id1这个div节点。
div1.style.border = '1px solid red'// 把div1的边框设置为1像素实线红边框
所以,应该是通过修改某对象本身的属性来实现这个对象外观的设置(并非通过修改子节点的属性,如xxx.parentNode.style.display = 'block'只是通过xxx.parentNode来引用到xxx父节点,最终修改的是父节点的属性,跟xxx没啥关系)
获取目标元素的方法很多,例如取子节点:div1.childNodes,(取div1的子节点列表)
关于HTML及Javascript的学习,网上有很多资料,可以看一下。例如:
W3School: http://www.w3school.com.cn/html/index.asp
这个是关于DOM的知识里的内容,是一个节点的parentNode成员e.g. aNode.parentNode返回父节点
最常用的用法就是node.parentNode.removeChild(node)
删除某节点node
1、打开编辑工具editplus,点击editplus菜单栏上的【File】-->New -->HTML page。
2、新建好html页面后,editplus自动帮助我们生成了框架,先把title修改下,然后保存。
3、在body区域里添加了子,父,祖父三级div,代码如下。
4、演示代码写好后,打开浏览器,在浏览器上运行看看效果。
5、下面在head区域里添加实现js获取最高父级的代码,代码具体如下,这样利用了while循环来判断的。
6、实现好后,保存代码,此时再到浏览器上刷新访问,看下,此时弹出对话框告诉最后父级是zufu。