Java WEB-DOM回顾

Dragon Prince

于 2020-08-08 16:43:05 发布

阅读量107

点赞数

本文链接：https://blog.csdn.net/wangzilong_2019/article/details/106494236

版权

DOM对象
 获取元素节点对象四种方式
 属性操作
 事件
 DOM绑定

DOM对象

dom绑定事件

优点：使得HTML代码和JS代码完全分离
缺点：不能传递参数解决：匿名函数可以
一个事件只能绑定一个函数解决：匿名函数内部可以绑定多个函数
DOM对象是将标记型文本的所有内容都封装成对象
通过操作对象的属性和方法，来达到操作HTML展示效果的

DOM树

HTML标签会被浏览器从上到下依次执行，加载并解析，保存到浏览器的内存中

在这里插入图片描述

每个标签会被加载成DOM树的一个元素节点对象
每个标签属性会被加载称为DOM树的一个属性节点对象
每个标签内容会被加载称为DOM树的一个文本节点对象
整个DOM树是一个文档节点对象即DOM对象
一个HTML加载到内存中就会形成一个DOM对象
DOM树特点
必定有一个根节点
每个节点都是节点对象
每个节点都有一个父节点，0或多个子节点
只有根节点没有父节点

获取元素节点对象的四种方式

通过元素id获取元素对象
- document.getElementById()
通过元素name属性获取符合要求的所有元素
- document.getElementsByName()
通过元素名属性获取符合要求的所有元素
- document.getElementsByTagName()
通过元素的class属性获取符合要求的所有元素
- document.getElementsByClassName()

<body>

<input typeof="text" id = "t1"/>

<input typeof="checkbox" name="hobby" value="read">
<input typeof="checkbox" name="hobby" value="code">
<input typeof="checkbox" name="hobby" value="run">

<ul>
    <li>java</li>
    <li>python</li>
    <li>c++</li>
    <li>c</li>
</ul>

<input typeof="radio" name="sex" value="man" class="h1">
<input typeof="radio" name="sex" value="woman"class="h1">

<script>
    //通过id获取节点对象
    // var t1 = document.getElementById("t1");   //通过元素id获取元素对象
    // alert(t1);
    // alert(document.getElementsByName("t2"));  //找不到返回null

    //通过元素name属性获取符合要求的所有元素
    //返回元素节点对象
    // var arr = document.getElementsByName("hobby")
    // alert(arr.length);

    //通过元素名属性获取符合要求的所有元素
    var arr = document.getElementsByTagName("li");
    alert(arr.length);

    //通过元素的class属性获取符合要求的所有元素
    var arr = document.getElementsByClassName()
    alert(arr.length);

</script>

</body>

注意事项
获取某些节点对象，事先必须元素节点对象先加载到内存中

属性操作

value操作元素属性值

<body>

<input type = "text" id = "t1" value="你好"/>

<script>

    //将t1元素的value属性值取出来
    var t1 = document.getElementById("t1");
    alert(t1.value);

    //修改value属性值
    t1.value = "你好吗";

</script>

</body>

class操作元素属性样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .ys1{
            color: rebeccapurple;
        }
        .ys2{
            color: blue;
        }

    </style>

</head>

<body>

<span id = "t1" class="ys1">今天天气真好</span>

<script>

    //将t1元素的class属性值取出来
    var t1 = document.getElementById("t1");
    alert(t1.className);

    //修改claa属性值
    t1.className = "ys2";

</script>

</body>

checked操作元素属性选中

<body>

<input type="checkbox" id = "t1"/>

<script>

    var t1 = document.getElementById("t1");
    alert(t1.checked);

    //让复选框默认选中发
    t1.checked = true;

</script>

</body>

innerHTML操作标签内容

<body>

<span id = "s1">今天天气很好</span>

<script>

    //获取html标签内容体
    var s1 = document.getElementById("s1");
    alert(s1.innerHTML);

    //设置html内容体
    s1.innerHTML = "今天要下雪";

    //追加html内容体
    s1.innerHTML += "，适合野餐";

</script>

</body>

JS事件

通常鼠标或热键的动作称之为热键
通过JS事件可以完成页面特效

JS事件驱动机制

事件源：专门产生事件组件
事件：由事件源所产生的动作或事情
监听器：专门处理事件源所产生的事件
注册/绑定监听器：让监听器时刻监听事件源是否有指定事件产生，如果事件源产生指定事件，则调用监听器处理

焦点事件

焦点：整个页面的注意力
正常一个页面最多只有一个焦点

<!--
    获取焦点
-->
<input type="text" value="点我啊" onfocus="run1()"/>

<body>

<!--
  失去焦点事件
-->
<input type="text" onblur="run2()"/>

</body>

预内容改变事件

<body>

<!--
    预内容改变事件，当选择框值发生改变时，弹出对话框
-->

<select onchange="run3()">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="tj">天津</option>
</select>

</body>

加载完毕事件

<!--
    当元素组件加载完毕后触发
-->

<body onload="run4()">
小姐姐吃夜宵吗
</body>

表单提交事件

表单提交按钮被点击时触发
该事件需要具体的boolean值来确定提交或阻止表单

    <script>

        function run() {
            alert("表单提交按钮被点击了");
            //return true;
            return false;
        }

    </script>

<!--
    当表单提交按钮被点击时触发该事件
    用于表单的校验
    该事件也能控制表单的提交
    true  允许表单的提交
    false  阻止表单的提交
-->

<form onsubmit="return run()">
    <input type="text" name="uname"/>
    <input type="submit" value="提交"/>
</form>

</body>

键位弹起事件

<input type="text" onkeyup="run()" />

鼠标移入事件

<!--
   当鼠标移入该文本框执行该事件
-->

<input type="text" onmouseover="run()"/>

鼠标移出事件

<!--
   鼠标移出文本框激发事件
-->

<input type="text" onmouseout="run()"/>

元素事件语句绑定

将事件以元素属性的方式写道标签内部，进而绑定对应的函数
优点
- 传递参数方便
- 开发方便
- 可以绑定多个函数
缺点
- JS和HTML代码高度柔和在一起，不利于多部门的项目开发和维护

DOM 绑定

没有与html代码高度融合在一起

    <meta charset="UTF-8">
    <title>Title</title>

    <script>

        function run1() {
            alert("run1");
        }

        function run2() {
            alert("run2");
        }
        
        //当页面加载完毕时，将对象加载到内存中
        window.onload = function () {
            //使用dom方式获取元素对象
            var t1 = document.getElementById("t1");
            t1.onclick = function () {
                run1();
                run2(); 
            }
        }

    </script>

</head>

<body>

<!--
   文本框，onclick事件绑定俩个函数run1和run2
-->
<input type="text" id = "t1"/>

</body>

Jquery

简单的js框架，在使用时需要导入js文件
对于JQuery2.0以后对浏览器的支持不是很好
在PC端开发时主流的是1.x版本
在开发中需要导入min.js文件在学习阶段导入JQuery-1.8.3.js

Dragon Prince

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java WEB-DOM回顾

DOM对象DOM对象是将标记型文本的所有内容都封装成对象通过操作对象的属性和方法，来达到操作HTML展示效果的DOM树HTML标签会被浏览器从上到下依次执行，加载并解析，保存到浏览器的内存中每个标签会被加载成DOM树的一个元素节点对象每个标签属性会被加载称为DOM树的一个属性节点对象每个标签内容会被加载称为DOM树的一个文本节点对象整个DOM树是一个文档节点对象即DOM对象一个HTML加载到内存中就会形成一个DOM对象DOM树特点必定有一个根节点每个节点都是节点对象每个
复制链接

扫一扫