JavaWeb系列四: DOM下

~ 小团子

已于 2024-08-29 09:17:26 修改

阅读量631

点赞数 13

分类专栏： JavaWeb 文章标签： servlet

于 2024-08-29 09:16:07 首次发布

本文链接：https://blog.csdn.net/qq_18817831/article/details/141189594

版权

JavaWeb 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

HTML DOM节点

基本介绍
节点属性和方法一览
节点常用方法
节点常用属性
应用实例
作业布置乌龟吃鸡游戏

基本介绍

在HTML DOM（文档对象模型）中，每个部分都是节点.

1.文档本身是文档节点；

2.所有 HTML元素是元素节点；

3.所有 HTML属性是属性节点；

4.HTML元素内的文本是文本节点；

5.注释是注释节点;

节点属性和方法一览

HTML DOM Element 对象文档地址: https://www.w3school.com.cn/jsref/dom_obj_all.asp

HTML DOM Document 对象文档地址: https://www.w3school.com.cn/jsref/dom_obj_document.asp

节点常用方法

1.通过具体的元素节点调用 getElementsByTagName() 方法, 获取当前节点的指定标签名.

2.appendChild(childNode) 方法, 可以添加一个子节点, childNode是要添加的孩子节点.

节点常用属性

1.childNodes属性: 获取当前节点的所有子节点.

2.firstChild属性:获取当前节点的第一个子节点

3.lastChild属性: 获取当前节点的最后一个子节点.

4.parentNode属性: 获取当前节点的父节点.

5.nextSibling属性: 获取当前节点的下一个(后一个)节点.

6.previousSibling属性: 获取当前节点的上一个(前一个)节点.

7.className: 获取或设置标签的class属性值

8.innerHTML属性: 获取或设置起始标签和结束标签中的内容

9.innerText属性: 获取或设置起始标签和结束标签中的文本

应用实例

1.需求: 如图, 点击右侧的按钮, 可以得到对应的节点.

在这里插入图片描述

2.应用实例创建dom/html-dom.html

通过id获取节点

1.创建dom/html-dom.html, 完成功能.

在这里插入图片描述

获取所有option节点

html-dom02.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>演示HTML DOM 相关方法</title>
    <link rel="stylesheet" type="text/css" href="style/css.css"/>
    <script type="text/javascript">
        //动态注册
        window.onload = function () {
            //查找所有option节点
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function () {
                //id --> getElementById()
                //name --> getElementsByName()
                //元素标签 --> getElementsByTagName()
                var options = document.getElementsByTagName("option");
                //HTMLCollection
                for (var i = 0; i < options.length; i++) {
                    alert("options[" + (i + 1) + "] = " + options[i].innerText);
                }
            };
        };
    </script>
</head>
<body>
<div>
    <div>
        <p>你当前的女友是谁：</p>
        <select id="sel01">
            <option>--女友--</option>
            <option>霞燕</option>
            <option id="ct" value="春桃姑娘">春桃</option>
            <option>秋枫</option>
            <option>冬梅</option>
        </select>
    </div>
</div>
<div id="btnList">
    <div>
        <button id="btn02">查找所有option节点</button>
    </div>
</div>
</body>
</html>

通过name获取节点

html-dom03.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>演示HTML DOM 相关方法</title>
  <link rel="stylesheet" type="text/css" href="style/css.css"/>
  <script type="text/javascript">
    //动态注册
    window.onload = function () {
      //查找name=sport节点
      var btn03 = document.getElementById("btn03");
      btn03.onclick = function () {
        var sports = document.getElementsByName("sport");
        // alert(sports);//NodeList
        for (var i = 0; i < sports.length; i++) {
          if (sports[i].checked) {
            alert("运动是 = " + sports[i].value);
          }
        }
      };
    }
  </script>
</head>
<body>
<div>
  <div>
    <p>你喜欢的运动项目：</p>
    <input type="checkbox" name="sport" value="soccer" checked="checked"/>足球
    <input type="checkbox" name="sport" value="basketball" checked="checked"/>蓝球
    <input type="checkbox" name="sport" value="pingPang" checked="checked"/>乒乓球
  </div>
</div>
<div id="btnList">
  <div>
    <button id="btn03">查找name=sport节点</button>
  </div>
</div>
</body>
</html>

查找id=language下所有li节点

html-dom04.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>演示HTML DOM 相关方法</title>
    <link rel="stylesheet" type="text/css" href="style/css.css"/>
    <script type="text/javascript">
        //动态注册
        window.onload = function () {
            //查找id=language下所有li节点
            var btn04 = document.getElementById("btn04");
            btn04.onclick = function () {
                var lis = document.getElementById("language").getElementsByTagName("li");
                // alert("lis=" + lis);//HTMLCollection
                for (var i = 0; i < lis.length; i++) {
                    alert("lis[" + (i + 1) + "] = " + lis[i].innerText);
                }
            };
        };
    </script>
</head>
<body>
<div>
    <div>
        <p>
            你的编程语言：
        </p>
        <ul id="language">
            <li id="java">Java</li>
            <li>Python</li>
            <li>Go语言</li>
        </ul>
    </div>
</div>
<div id="btnList">
    <div>
        <button id="btn04">查找id=language下所有li节点</button>
    </div>
</div>
</body>
</html>

获取指定dom对象的所有子节点

html-dom05.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>演示HTML DOM 相关方法</title>
    <link rel="stylesheet" type="text/css" href="style/css.css"/>
    <script type="text/javascript">
        //动态注册
        window.onload = function () {
            //返回id=sel01的所有子节点
            var btn05 = document.getElementById("btn05");
            btn05.onclick = function () {
                //var options = document.getElementById("sel01").getElementsByTagName("option");
                //alert(options.length);//5 不算换行符
                //1.如果使用document.getElementById("sel01").childNodes; 获取的是[object Text],[object HTMLOptionElement]
                //2.如果不希望得到 text对象, 需要将所有的内容放在一行
                var childNodes = document.getElementById("sel01").childNodes;
                //alert(childNodes);//NodeList
                //alert(childNodes.length);//11, 加上文本, 在这里换行符属于文本[object Text]
                for (var i = 0; i < childNodes.length; i++) {
                    //alert(childNodes[i]);//HTMLOptionElement
                    if (childNodes[i].innerText != undefined && childNodes[i].selected) {
                        alert("女友有 = " + childNodes[i].innerText);
                    }
                }
                alert("===============还有一个方法===============");
                //1.sel01 是 HTMLSelectElement => 本身具有集合的特点
                var sel01 = document.getElementById("sel01");
                alert(sel01);//HTMLSelectElement
                alert(sel01[0]);//HTMLOptionElement
                for (var i = 0; i < sel01.length; i++) {
                    alert("sel01[" + (i + 1) + "] = " + sel01[i].innerText);
                }
            };
        };
    </script>
</head>
<body>
<div>
    <div>
        <p>
            你当前的女友是谁：
        </p>
        <select id="sel01">
            <option>--女友--</option>
            <option>霞燕</option>
            <option id="ct" value="春桃姑娘">春桃</option>
            <option>秋枫</option>
            <option>冬梅</option>
        </select>
    </div>
</div>
<div id="btnList">
    <div>
        <button id="btn05">返回id=sel01的所有子节点</button>
    </div>
</div>
</body>
</html>

获取第一个子节点

html-dom06.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>演示HTML DOM 相关方法</title>
    <link rel="stylesheet" type="text/css" href="style/css.css"/>
    <script type="text/javascript">
        //动态注册
        window.onload = function () {
            //返回id=sel01 的第一个子节点
            var btn06 = document.getElementById("btn06");
            btn06.onclick = function () {
                var sel01 = document.getElementById("sel01");
                var childNodes = sel01.childNodes;
                alert(childNodes[0]);//object Text
                var firstChild = sel01.firstChild;
                alert(firstChild);//object Text]
                alert(sel01[0]);//直接得到第一个option节点 object HTMLOptionElement
            }
        };
    </script>
</head>
<body>
<div>
    <div>
        <p>
            你当前的女友是谁：
        </p>
        <select id="sel01">
            <option>--女友--</option>
            <option>霞燕</option>
            <option id="ct" value="春桃姑娘">春桃</option>
            <option>秋枫</option>
            <option>冬梅</option>
        </select>
    </div>
</div>
<div id="btnList">
    <div>
        <button id="btn06">返回id=sel01的第一个子节点</button>
    </div>
</div>
</body>
</html>

获取父节点

html-dom07.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>演示HTML DOM 相关方法</title>
    <link rel="stylesheet" type="text/css" href="style/css.css"/>
    <script type="text/javascript">
        //动态注册
        window.onload = function () {
            //返回id=java的父节点
            var btn07 = document.getElementById("btn07");
            btn07.onclick = function () {
                var java = document.getElementById("java");
                alert(java);//HTMLLIElement
                var parentNode = java.parentNode;
                alert(parentNode);//HTMLUListElement
                alert(parentNode.innerText);
                alert(parentNode.innerHTML);//<li id="java">Java</li>
                var childNodes = parentNode.childNodes;
                alert(childNodes.length);//7
                for (var i = 0; i < childNodes.length; i++) {
                    if (childNodes[i].innerText != undefined) {//换行符[文本]也算一个节点
                        alert("childNodes[" + (i + 1) + "] = " + childNodes[i].innerText);
                    }
                }
                var parentElement = java.parentElement;
                alert(parentElement);//HTMLUListElement
            };
        }
    </script>
</head>
<body>
<div>
    <div>
        <p>
            你的编程语言：
        </p>
        <ul id="language">
            <li id="java">Java</li>
            <li>Python</li>
            <li>Go语言</li>
        </ul>
    </div>
</div>
<div id="btnList">
    <div>
        <button id="btn07">返回id=java的父节点</button>
    </div>
</div>
</body>
</html>

获取前后兄弟节点

html-dom08.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>演示HTML DOM 相关方法</title>
    <link rel="stylesheet" type="text/css" href="style/css.css"/>
    <script type="text/javascript">
        //动态注册
        window.onload = function () {
            var btn08 = document.getElementById("btn08");
            btn08.onclick = function () {
                var ct = document.getElementById("ct");
                alert(ct.previousSibling);//Text[换行符]
                alert(ct.previousSibling.previousSibling);//HtmlOptionElement
                alert(ct.previousSibling.previousSibling.innerText);//霞燕
                alert(ct.nextSibling);//Text[换行符]
                alert(ct.nextSibling.nextSibling);//HTMLOptionElement
                alert(ct.nextSibling.nextSibling.innerText);//秋枫
            };
        };
    </script>
</head>
<body>
<div>
    <div>
        <p>
            你当前的女友是谁：
        </p>
        <select id="sel01">
            <option>--女友--</option>
            <option>霞燕</option>
            <option id="ct" value="春桃姑娘">春桃</option>
            <option>秋枫</option>
            <option>冬梅</option>
        </select>
    </div>
</div>
<div id="btnList">
    <div>
        <button id="btn08">返回id=ct的前后兄弟节点</button>
    </div>
</div>
</body>
</html>

设置文本域内容

html-dom09.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>演示HTML DOM 相关方法</title>
    <link rel="stylesheet" type="text/css" href="style/css.css"/>
    <script type="text/javascript">
        //动态注册
        window.onload = function () {
            //设置id=person的文本域
            var btn10 = document.getElementById("btn10");
            btn10.onclick = function () {
                var person = document.getElementById("person");
                person.innerText = "刀剑神域";//设置文本域
            }
        };
    </script>
</head>
<body>
<div>
    <div>
        <p>
            个人介绍：
        </p>
        <textarea name="person" id="person">个人介绍</textarea>
    </div>
</div>
<div id="btnList">
    <div>
        <button id="btn10">设置id=person的文本域</button>
    </div>
</div>
</body>
</html>

总代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML DOM相关方法</title>
    <link rel="stylesheet" type="text/css" href="style/css.css"/>
</head>
<script type="text/javascript">
    window.onload = function () {
        //查找id=java的节点
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function () {
            var java = document.getElementById("java");
            alert("java节点的文本=" + java.innerText);
        }

        //查找所有option节点
        var btn02 = document.getElementById("btn02");
        btn02.onclick = function () {
            var options = document.getElementsByTagName("option");
            for (var i = 0; i < options.length; i++) {
                alert("options[" + i + "].innerText->" + options[i].innerText);
            }
        }

        //查找name=sports的节点
        var btn03 = document.getElementById("btn03");
        btn03.onclick = function () {
            var sports = document.getElementsByName("sports");
            for (var i = 0; i < sports.length; i++) {
                alert("sports[" + i + "].innerText->" + sports[i].value);
            }
        }

        //查找id=language下所有li节点
        var btn04 = document.getElementById("btn04");
        btn04.onclick = function () {
            var languages = document.getElementById("language");
            var lis = languages.getElementsByTagName("li");
            for (var i = 0; i < lis.length; i++) {
                alert("lis[" + i + "].innerText->" + lis[i].innerText);
            }
        }

        //返回id=girlFriend的所有子节点
        var btn05 = document.getElementById("btn05");
        btn05.onclick = function () {
            var girlFriend = document.getElementById("girlFriend");
            alert("=====================方法一===========================");
            var childNodes = girlFriend.childNodes;
            //在这里换行符属于文本[object Text]
            获取的是[object Text],[object HTMLOptionElement],[object Text],[object HTMLOptionElement],[object Text],[object HTMLOptionElement],[object Text]
            //如果不希望得到 换行符(即text对象), 需要将所有的内容放在一行
            alert("childNodes.length=" + childNodes.length);//7, 加上文本
            for(var i = 0; i < childNodes.length; i++) {
                if (childNodes[i].innerText != undefined && childNodes[i].selected) {
                    alert("childNodes[" + i + "].innerText->" + childNodes[i].innerText);
                }
            }
            alert("=====================方法二===========================");
            var options = girlFriend.getElementsByTagName("option");
            alert("options.length=" + options.length);//不算换行符
            for (var i = 0; i < options.length; i++) {
                if (options[i].selected) {
                    alert("options[" + i + "].innerText->" + options[i].innerText);
                }
            }
        }

        //返回id=girlFriend的第一个子节点
        var btn06 = document.getElementById("btn06");
        btn06.onclick = function () {
            var girlFriends = document.getElementById("girlFriend");
            alert("=========第一种方式=========")
            var childNodes = girlFriends.childNodes;
            alert(childNodes[1].innerText);//childNodes[0]是换行文本
            alert("=========第二种方式=========")
            alert(girlFriends[0].innerText);
            alert("=========第三种方式=========")
            alert(girlFriends.firstChild.nextSibling.innerText);//因为第一个节点是换行文本
        }

        //获取id=java的父节点
        var btn07 = document.getElementById("btn07");
        btn07.onclick = function () {
            var java = document.getElementById("java");
            var parentNode = java.parentNode;
            alert("parentNode.innerText=>\n" + parentNode.innerText);
            alert("parentNode.innerHTML=>" + parentNode.innerHTML);
        }

        //获取id=lq的前后兄弟节点
        var lq = document.getElementById("lq");
        btn08.onclick = function () {
            var nextSibling = lq.nextSibling;//换行符文本
            var previousSibling = lq.previousSibling;//换行符文本
            var nextSibling1 = lq.nextSibling.nextSibling;
            var previousSibling1 = lq.previousSibling.previousSibling;
            alert("nextSibling.nextSibling.innerText=>" + nextSibling.nextSibling.value);//innerText是开始标签和结束标签之间的文本, 没有值
            alert("previousSibling.previousSibling.innerText=>" + previousSibling.previousSibling.value);
        }

        //设置id=person的文本域
        var btn09 = document.getElementById("btn09");
        btn09.onclick = function () {
            var person = document.getElementById("person");
            person.innerText = "修改后的自我介绍";
        }
    }
</script>
<body>
<div id="total">
    <div class="inner">

        <p>你的编程语言:</p>
        <ul id="language">
            <li id="java">java</li>
            <li>python</li>
            <li>go语言</li>
        </ul>

        <p>你当前的女友:</p>
        <select id="girlFriend">
            <option value="小红">小红</option>
            <option value="小明">小明</option>
            <option value="小花">小花</option>
        </select>

        <p>你喜欢的运动项目:</p>
        <input type="checkbox" name="sports" value="足球"/>足球
        <input type="checkbox" id="lq" name="sports" value="篮球"/>篮球
        <input type="checkbox" name="sports" value="排球"/>排球

        <p>个人介绍:</p>
        <textarea id="person">个人介绍</textarea>
    </div>

</div>
<div id="btnList">
    <div>
        <button id="btn01">查找id=java节点</button>
    </div>
    <div>
        <button id="btn02">查找所有的option节点</button>
    </div>
    <div>
        <button id="btn03">查找name=sport节点</button>
    </div>
    <div>
        <button id="btn04">查找id=language下所有li节点</button>
    </div>
    <div>
        <button id="btn05">返回id=girlFriend的所有子节点</button>
    </div>
    <div>
        <button id="btn06">获取id=girlFriend的第一个子节点</button>
    </div>
    <div>
        <button id="btn07">获取id=java的父节点</button>
    </div>
    <div>
        <button id="btn08">获取id=lq的前后兄弟节点</button>
    </div>
    <div>
        <button id="btn09">设置id=person的文本域</button>
    </div>
</div>
</body>
</html>

在这里插入图片描述

作业布置乌龟吃鸡游戏

1.需求: 编写tortoiseGame.html, 完成乌龟吃鸡的js小游戏.

在这里插入图片描述

2.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tortoise-hen碰撞游戏</title>
    <script type="text/javascript">
        //公鸡的坐标
        var hen_xPos = 200;
        var hen_yPos = 200;
        //乌龟图片的宽度和高度
        var tortoise_width = 94;
        var tortoise_height = 67;
        //公鸡图片的宽度和高度
        var hen_width = 76;
        var hen_height = 73;

        function move(obj) {//object HTMLButtonElement
            var tortoise = document.getElementById("tortoise");
            var tortoise_left = tortoise.style.left;//100px 值传递
            var tortoise_top = tortoise.style.top;//130px  值传递
            var tortoise_xPos = parseInt(tortoise_left.substring(0, tortoise_left.indexOf("p")));
            var tortoise_yPos = parseInt(tortoise_top.substring(0, tortoise_top.indexOf("p")));

            //通过button的 dom对象,获取innerText
            switch (obj.innerText) {
                case "向上走":
                    tortoise_yPos -= 10;
                    tortoise.style.top =tortoise_yPos + "px";
                    break;
                case "向下走":
                    tortoise_yPos += 10;
                    tortoise.style.top = tortoise_yPos + 'px';
                    break;
                case "向左走":
                    tortoise_xPos -= 10;
                    tortoise.style.left = tortoise_xPos + "px";
                    break;
                case "向右走":
                    tortoise_xPos += 10;
                    tortoise.style.left = tortoise_xPos + "px";
                    break;
            }

            //走完之后再判断
            //4.1 得到乌龟左和公鸡左的距离,纵向距离y
            // (1)如果乌龟在公鸡上面, 如果纵向距离y < 乌龟图片的高度时, 说明它们可能在纵向发生重叠, 使用 yy 来记录
            // (2) 吐过乌龟在公鸡下面,如果纵向距离y < 公鸡图片的高度时, 说明它们可能在纵向发生重叠, 使用 yy 来记录
            // 4.2 得到乌龟和公鸡左上角的距离, 横向距离x
            // (1)如果乌龟在公鸡左面, 如果横向距离x < 乌龟图片的宽度时, 说明它们可能在横向发生重叠, 使用 xx 来记录
            // (2)如果乌龟在公鸡右面, 如果横向距离x < 公鸡图片的宽度时, 说明它们可能在横向发生重叠, 使用 xx 来记录
            var y = Math.abs(tortoise_yPos - hen_yPos);
            var x = Math.abs(tortoise_xPos - hen_xPos);
            var yy = 0;//
            var xx = 0;//默认横向没有重叠

            if (tortoise_yPos < hen_yPos) {//乌龟在上
                if (y < tortoise_height) {
                    yy  = 1;
                }
            } else {//乌龟在下
                if (y < hen_height) {
                    yy = 1;
                }
            }
            if (tortoise_xPos < hen_xPos) {//乌龟在左
                if (x < tortoise_width) {
                    xx = 1;
                }
            } else {//乌龟在右
                if (x < hen_width) {
                    xx = 1;
                }
            }

            if (xx && yy) {//js中 0默认是false
                alert("发生碰撞");
                tortoise.style.left = 100 + "px";
                tortoise.style.top = 130 + "px";
            }
        }
    </script>
</head>
<body>
<table>
    <tr>
        <td></td>
        <!--
            1.this表示的是你点击的这个button, 而且已经是一个dom对象
            3.可以通过dom对象操作属性和方法
        -->
        <td>
            <button onclick="move(this)">向上走</button><!--静态注册传参 只能用单引号-->
        </td>
        <td></td>
    </tr>
    <tr>
        <td>
            <button onclick="move(this)">向左走</button>
        </td>
        <td></td>
        <td>
            <button onclick="move(this)">向右走</button>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <button onclick="move(this)">向下走</button>
        </td>
        <td></td>
    </tr>
</table>
<img src="./img/1.bmp" id="tortoise" style="position: absolute; left: 100px; top: 130px;" border="1">
<img src="./img/2.bmp" style="position: absolute; left: 200px; top: 200px;" border="1">
</body>
</html>

~ 小团子

关注

13
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaWeb系列四: DOM下

HTML DOM节点基本介绍节点属性和方法一览节点常用方法节点常用属性应用实例通过id获取节点获取所有option节点通过name获取节点查找id=language下所有li节点获取指定dom对象的所有子节点获取第一个子节点获取父节点获取前后兄弟节点设置文本域内容总代码作业布置乌龟吃鸡游戏基本介绍在HTML DOM（文档对象模型）中，每个部分都是节点.1.文档本身是文档节点；2.所有 HTML元素是元素节点；3.所有 HTML属性是属性节点；4.HTML元素内的文本是文本节点；5.
复制链接

扫一扫