js - 1DOM操作练习

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js - 1DOM操作练习相关的知识，希望对你有一定的参考价值。

注意: 

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>

 






以上是关于js - 1DOM操作练习的主要内容，如果未能解决你的问题，请参考以下文章

前端JS 4

js dom操作总结

spring练习，在Eclipse搭建的Spring开发环境中，使用set注入方式，实现对象的依赖关系，通过ClassPathXmlApplicationContext实体类获取Bean对象(代码片段

JavaScript复习 js登录简单实现 dom操作练习

JS对于导航栏下拉菜单以及选项卡的切换操作大图轮播（主要练习对于样式表的操作）

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js