注意:
1、好像只有在IE浏览器中才不会计算节点与节点之间的空格
2、document属于window，所以document可以写成window.document，window是可以省略的
知识点:
1、parentNode: 获取指定节点的父节点
2、previousSibling: 返回某个节点紧跟的前一个节点(要处于同一树层级中)
nextSibling: 返回某个节点紧跟的后一个节点(要处于同一树层级中)3、firstChild: 访问子节点的第一项
lastChild: 访问子节点的最后项
实现:
1、通过id=divs改变第一个大div的颜色
2、通过id=divs改变第二个大div的颜色
3、通过id=divs改变p标签的背景颜色
代码如下:
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8" /> <title>DOM案例</title> <script type="text/javascript"> function onClicks(){ var divChild = window.document.getElementById("divs"); // 1. 通过id=divs改变第一个大div的颜色 // divChild.parentNode.style.background="yellow"; // 2. 通过id=divs改变第二个大div的颜色（因为这里不会忽略空格,所以需要两次nextSibling） //divChild.parentNode.nextSibling.nextSibling.style.background="yellow"; // 3. 通过id=divs改变 <p> 标签的背景颜色(因为有空格，所以...) divChild.parentNode.firstChild.nextSibling.style.background="blue"; } </script> </head> <body> <div> <p>段落</p> <!-- 换行，段前段末都有空行 --> <div id="divs">这是div的内容</div> <a>链接</a> </div> <div> abcdefge </div> <input type="button" value="点击操作" onclick="onClicks()"/> </body> </html>
1098
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
