前端-dom

poixao

已于 2022-10-21 17:37:27 修改

阅读量481

点赞数

分类专栏： Java Web 文章标签：开发语言前端 javascript

于 2022-03-06 10:33:03 首次发布

本文链接：https://blog.csdn.net/zyy130988/article/details/123286799

版权

Java Web 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

前端-dom

dom基本介绍
html dom介绍
document
基本使用
案例
html dom节点
乌龟吃鸡

html dom节点
在HTML DOM(文档对象模型）中，每个部分都是节点:

文档本身是文档节点
所有HTML元素是元素节点
所有HTML属性是属性节点
HTML元素内的文本是文本节点
注释是注释节点

html文档被映射成了DOM树，我们可以通过对DOM树进行一些修改，这些修改是在浏览器内存中进行的，并且会通过浏览器的解析在网页上得到体现，而html文件是静态的，从始到终都会发生任何变化

节点常用方法

API	解释
document.getElementById(“id名称”);	通过id获得对应的dom对象
document.getElementsByName(“name名称”);	通过name获得对应的dom对象集合
document.getElementsByTagName(“标签名称”);	通过标签获得对应的dom对象
document.createElement(“标签名称”);	在内存中创建一个标签
document.body.appendChild(标签dom对象);	将标签dom对象挂到document.body中

API	解释
innerHTML	获取在该标签内的html文件
innerText	获取在再该标签内的文本文件

节点常见属性

属性	解释
childNodes属性	获取当前节点的所有子节点
firstChild属性	获取当前节点的第一个子节点
lastChild属性	获取当前节点的最后一个子节点
parentNode属性	获取当前节点的父节点
nextSibling属性	获取当前节点的下一个节点
previousSibling属性	获取当前节点的上一个节点
className属性	用于获取或设置标签的class属性值
innerHTML属性	表示获取/设置起始标签和结束标签中的内容
innerTe属性	表示获取/设置起始标签和结束标签中的文本

上面这些属性是可以连续使用的

注意事项

在使用获取节点的操作时，要注意换行也是算作一个字符文件
先获取，再使用

dom基本介绍

html文档被浏览器解析到内存中，就会将html文档中的标签当做一个个的对象，这些对象都是有层级关系(如谁包含谁，谁又是谁的子节点)，最终形成一棵树.
在这里插入图片描述

html dom介绍

标签、属性对象(如href<属性对象/属性节点>)、文本都会被映射为对象，可以使用对象的属性或方法来操作对象，从而使展示的内容发生变化
在这里插入图片描述

document

在这里插入图片描述

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            //动态绑定
            var myHeader = document.getElementById("myHeader");
            myHeader.onclick = function () {
                alert(myHeader.innerText); //文本  hello world
                alert(myHeader.innerHTML); //html <div>hello world</div>
            }
        }
    </script>
</head>
<body>
<h1 id="myHeader"><div>hello world</div></h1>
</body>
</html>

案例

全选框案例

在这里插入图片描述
静态绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function selectAll() {
            //1.获取到 sport这一组复选框
            //sports是nodeList 即是一个集合
            var sports = document.getElementsByName("sport");
            //2.拿到[dom ,集合]，操作【属性和方法API】
            // 遍历sports，修改
            for (i = 0; i < sports.length; i++){
                sports[i].checked = true;
            }
        }
        function selectNone() {
            var sports = document.getElementsByName("sport");
            for (i = 0; i < sports.length; i++){
                sports[i].checked = false;
            }
        }
        function selectReverse() {
            var sports = document.getElementsByName("sport");
            for (i = 0; i < sports.length; i++){
                sports[i].checked = !sports[i].checked;
            }
        }

    </script>
</head>
<body>
请选择您的爱好:
<input type="checkbox" name="sport" value="zq">足球<br/>
<input type="checkbox" name="sport" value="lq">篮球<br/>
<input type="checkbox" name="sport" value="sq">手球<br/>
<button onclick="selectAll()">全选</button>
<button onclick="selectNone()">全不选</button>
<button onclick="selectReverse()">反选</button>
</body>
</html>

动态绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var selectAll = document.getElementById("selectAll");
            var selectNone = document.getElementById("selectNone");
            var selectReverse = document.getElementById("selectReverse");
            var sports = document.getElementsByName("sport");
            selectAll.onclick = function () {
                for (i = 0; i < sports.length; i++){
                    sports[i].checked = true;
                }
            }
            selectNone.onclick = function () {
                for (i = 0; i < sports.length; i++){
                    sports[i].checked = false;
                }
            }
            selectReverse.onclick = function () {
                for (i = 0; i < sports.length; i++){
                    sports[i].checked = !sports[i].checked;
                }
            }
        }
    </script>
</head>
<body>
请选择您的爱好:
<input type="checkbox" name="sport" value="zq">足球<br/>
<input type="checkbox" name="sport" value="lq">篮球<br/>
<input type="checkbox" name="sport" value="sq">手球<br/>
<button id="selectAll">全选</button>
<button id="selectNone">全不选</button>
<button id="selectReverse">反选</button>
</body>
</html>

猫狗切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        changeImgs = function () {
            //得到所有imgs
            var imgs = document.getElementsByTagName("img");
            var but = document.getElementById("but");
            if (but.value == "查看多少小狗，并切换成小猫") {
                but.value = "查看多少小猫，并切换成小狗";
                alert("狗狗的数量为: " + imgs.length);
                for (i = 0; i < imgs.length; i++) {
                    imgs[i].src = "./imgs/" + (i + 1) + ".png";
                }
            } else if (but.value == "查看多少小猫，并切换成小狗") {
                but.value = "查看多少小狗，并切换成小猫";
                alert("猫猫的数量为: " + imgs.length);
                for (i = 0; i < imgs.length; i++) {
                    imgs[i].src = "./imgs/" + (i + 4) + ".png";
                }
            }
        }
    </script>
</head>
<body>
<img src="./imgs/1.png" height="100">
<img src="./imgs/2.png" height="100">
<img src="./imgs/3.png" height="100">
<br/>
<input type="button" id="but" onclick="changeImgs()"
       value="查看多少小猫，并切换成小狗"/>
</body>
</body>
</html>

添加小猫

在这里插入图片描述
html文档被映射成了DOM树，我们可以通过对DOM树进行一些修改，这些修改是在浏览器内存中进行的，并且会通过浏览器的解析在网页上得到体现，而html文件是静态的，从始到终都会发生任何变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        addImg = function () {
            //创建一只小猫图片，展示在页面
            //1．创建一只小猫图片img，拿到对象好办
            var img = document.createElement("img");
            img.src = "./imgs/1.png";
            img.height = 100;
            //展示，将img挂到document.body
            document.body.appendChild(img);
        }
    </script>
</head>
<body>
<input type="button" onclick="addImg()"
       value="点击创建一只小猫"/>
</body>
</html>

html dom节点

在这里插入图片描述

<!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 () {
            //先获取btn01的dom
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                //查找id=java节点
                var java = document.getElementById("java");
                alert("java节点文本=" + java.innerText);
            }
            //查找所有option节点
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function () {
                var options = document.getElementsByTagName("option"); //HTMLCollection
                for (i = 0; i < options.length; i++) {
                    alert("值=" + options[i].innerText);
                }
            }
            //查找name=sport节点
            var btn03 = document.getElementById("btn03");
            btn03.onclick = function () {
                //(id-->getElementById name-->getElementsByName
                //元素标签名->getElementsByTagName()
                var sports = document.getElementsByName("sport");//NodeList
                for (i = 0; i < sports.length; i++) {
                    alert("值=" + sports[i].value);
                }
            }
            //查找 id=language 下所有 li 节点
            var btn04 = document.getElementById("btn04");
            btn04.onclick = function () {
                var lis = document.getElementById("language").getElementsByTagName("li"); //HTMLCollection
                for (i = 0; i < lis.length; i++) {
                    alert(lis[i].innerText);
                }
            }
            //返回 id=sel01 的所有子节点
            var btn05 = document.getElementById("btn05");
            btn05.onclick = function () {
                var sel01 = document.getElementById("sel01");
                //1．如果使用document.getElementByTd("se101").childNodes 获取的是object text和 object htmloptionelement
                //2．如果不希望得到text对象，需要将所有的内容放在一行
                var childNodes = sel01.childNodes;
                //alert(childNodes.length); //11个
                for (i = 0; i < childNodes.length; i++) {
                    if (childNodes[i].selected) { //选中弹出
                        alert(childNodes[i].innerText); //换行也算一个子节点
                    }
                }

                //还有一个以前方法
                //1. sel01 是 HtmlSelectElement =>本身就有集合特点
                var sel01 = document.getElementById("sel01");
                for (var i = 0; i < sel01.length; i++) {
                    alert(sel01[i].innerText); //遍历所有非空字符串的子节点的innerText
                }
            }
            //返回 id=sel01 的第一个子节点
            var btn06 = document.getElementById("btn06");
            btn06.onclick = function () {
                //除了上面的方法外，还可以直接使用属性firstChild
                var firstChild = document.getElementById("sel01").firstChild;///是按照.childNodes得到第一个子节点//object text
                alert(firstChild);
                alert(sel01[0]);//直接是得到第一个option节点 object HTMLOptionElement
            }
            //返回 id=java 的父节点
            var btn07 = document.getElementById("btn07");
            btn07.onclick = function () {
                var java = document.getElementById("java");
                alert(java.parentNode.innerHTML);//object HTMLUListElement
                alert(java.parentNode.childNodes.length); //取出子节点个数
            }
            //返回 id=ct 的前后兄弟节点
            var btn08 = document.getElementById("btn08");
            btn08.onclick = function () {
                var ct = document.getElementById("ct");
                alert(ct.previousSibling.previousSibling.innerText); //前一个节点是空文本,前前一个才是HTMLOptionElement
                alert(ct.nextSibling.nextSibling.innerText); //后一个节点是空文本,后后一个才是HTMLOptionElement
            }
            //id="btn09" 读取 id=ct 的 value 属性值
            var btn09 = document.getElementById("btn09");
            btn09.onclick = function () {
                var ct = document.getElementById("ct");
                alert(ct.value);
            }
            //设置#person 的文本域
            var btn10 = document.getElementById("btn10");
            btn10.onclick = function () {
                var perosn = document.getElementById("person");
                perosn.innerText = "我是自我介绍~";
            }
        }

    </script>
</head>
<body>
<div id="total">
    <div class="inner">
        <P>
            你会的运动项目：
        </P>
        <input type="checkbox" name="sport" value="zq" checked="checked">足球
        <input type="checkbox" name="sport" value="tq">台球
        <input type="checkbox" name="sport" value="ppq">乒乓球<br/>
        <hr/>
        <P>
            你当前女友是谁：
        </P>
        <select id="sel01">
            <option>---女友---</option>
            <option>艳红</option>
            <option id="ct" value="春桃菇凉">春桃</option>
            <option>春花</option>
            <option>桃红</option>
        </select>
        <hr/>
        <p>
            你的编程语言?
        </p>
        <ul id="language">
            <li id="java">Java</li>
            <li>PHP</li>
            <li>C++</li>
            <li>Python</li>
        </ul>
        <br>
        <br>
        <hr/>
        <p>
            个人介绍
        </p>
        <textarea name="person" 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=sel01 的所有子节点</button>
    </div>
    <div>
        <button id="btn06">返回 id=sel01 的第一个子节点</button>
    </div>
    <div>
        <button id="btn07">返回 id=java 的父节点</button>
    </div>
    <div>
        <button id="btn08">返回 id=ct 的前后兄弟节点</button>
    </div>
    <div>
        <button id="btn09">读取 id=ct 的 value 属性值</button>
    </div>
    <div>
        <button id="btn10">设置#person 的文本域</button>
    </div>
</div>
</body>
</html>

乌龟吃鸡

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>乌龟游戏</title>
    <script type="text/javascript">
        //定义公鸡的坐标
        var cock_top = 200;
        var cock_left = 200;

        //定义乌龟的高度和宽度
        var wugui_height = 67;
        var wugui_width = 94;

        //定义公鸡的高度和宽度
        var cock_height = 73;
        var cock_width = 76;

        //编程思想，技巧-->不知道是什么就输出，或者日志，或者debug
        // 编程小技巧:在不确定情况下，可以输出看看
        function move(obj) {
            //拿到wugui dom对象
            var wugui = document.getElementById("wugui");
            var cock = document.getElementById("cock");
            // 2.2获取wugui.style.left 和 wugui.style.top 的值，通过修改就可以让乌龟动
            var wugui_left = wugui.style.left;
            var wugui_top = wugui.style.top;
            //根据obj.value进行上下处理
            //分析: wugui_left和 wugui_top 是 string -> nubmer
            wugui_top = Number(wugui_top.substring(0, wugui_top.indexOf("p")));
            wugui_left = Number(wugui_left.substring(0, wugui_left.indexOf("p")));
            if (obj.value == "向上走") {
                wugui.style.top = (wugui_top - 20) + "px";
            } else if (obj.value == "向左走") {
                wugui.style.left = (wugui_left - 20) + "px";
            } else if (obj.value == "向下走") {
                wugui.style.top = (wugui_top + 20) + "px";
            } else if (obj.value == "向右走") {
                wugui.style.left = (wugui_left + 20) + "px";
            }

            //4．分析如何判断乌龟和公鸡碰撞
            //4.1得到乌龟和公鸡左上角的距离，纵向距离y
            // (1）如果乌龟在上面，当y < 乌龟图片的高度时，说明他们可能在纵向发生重叠，使用yy 记录
            // (2)如果乌龟在下面，当y < 公鸡图片的高度时，说明他们可能在纵向发生重叠，使用yy 记录

            //4.2得到乌龟和公鸡左上角的距离，横向距离x
            //(1)〕如果乌龟在左面，当x < 乌龟图片的宽度时，说明他们可能在横向发生重叠，使用xx记录
            //(2)如果乌龟在右面，当x < 公鸡图片的宽度时，说明他们可能在横向发生重叠，使用xx记录

            //4.3如果xx和yy同时为true，说明一定发生碰撞

            //得到乌龟和公鸡左上角的距离，纵向距离y
            var y = Math.abs(wugui_top - cock_top);

            //得到乌龟和公鸡左上角的距离,横向距离x
            var x = Math.abs(wugui_left - cock_left);
            var yy = 0;//默认纵向没有重叠
            var xx = 0;//默认横向没有重叠

            if (wugui_top < cock_top) { //乌龟在上
                if (y < wugui_height) {
                    yy = 1;
                }
            } else {
                if (y < cock_height) {
                    yy = 1;
                }
            }

            if (wugui_left < cock_left) {
                if (x < wugui_width) {
                    xx = 1;
                }
            } else {
                if (x < cock_width) {
                    xx = 1;
                }
            }

            if (xx && yy) {
                alert("乌龟好厉害");
                //乌龟置位
                wugui.style.left = "100px";
                wugui.style.top = "120px";
            }
        }
    </script>
</head>
<body>
<table border="1">
    <tr>
        <td></td>
        <!--
              1. this表示的是你点击的这个button，而且已经是一个dom对象
              2．可以使用属性和方法
        -->
        <td><input type="button" value="向上走" onclick="move(this)"/></td>
        <td></td>
    </tr>
    <tr>
        <td><input type="button" value="向左走" onclick="move(this)"/></td>
        <td></td>
        <td><input type="button" value="向右走" onclick="move(this)"/></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="button" value="向下走" onclick="move(this)"/></td>
        <td></td>
    </tr>
</table>
<!--把乌龟放在一个div
老韩解读
1. style 的position: absolute表示绝对定位
2. left:100px表示图片距离窗口的原点的横坐标
3. top:120px;表示图片距离窗口的原点的纵坐标
4．针对图片而言，定位的点，是图片的左上角
-->
</body><!--把乌龟放在一个div-->
<div id="wugui" style="position: absolute ;left:100px;top:120px;">
    <img src="./imgs/1.bmp" border="1" alt=""/>
</div>
<!--公鸡图片div-->
<div id="cock" style="position:absolute;left:200px;top:200px;">
    <img src="./imgs/2.bmp" border="1" alt=""/>
</div>
</html>

poixao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端-dom

dom基本介绍html文档被浏览器解析到内存中，就会将html文档中的标签当做一个个的对象，这些对象都是有层级关系(如谁包含谁，谁又是谁的子节点)，最终形成一棵树.html dom标签、属性对象(如herf<属性对象/属性节点>)、文本都会被映射为对象，可以使用对象的属性或方法来操作对象，达到所展示的内容发生变化的效果...
复制链接

扫一扫