步步为营-54-DOM

说明:DOM document object model 文档对象模型.将所有的标记加载到内存中,以树形结构处理

1.1 使用JavaScript操作DOM,主要包括两个部分

Browser对象:BOM 指的是window.***

Html Dom对象: 指的是document.***

1.2 BOM

  1.2.1 常用的三个对话框

复制代码
  
 <script>
        //01-提示框,只有一个"确定"按钮 无返回值
        alert("提示框");
        //02-确认框 有"确定","取消"两个按钮,"确定"返回==true,"取消"返回==false
        var result = confirm("确定删除吗?");
        alert(result);
        //03-输入框,一个文本框+有"确定","取消"两个按钮 ;"确定"返回==输入的值,"取消"返回==null
        var result2 = prompt('请输入年龄', '10');
        alert(result2);
    </script>
View Code
复制代码

  1.2.2 window常用事件

    1.2.2.1 onload事件    

复制代码
    
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        window.onload = function () {
            //02-常用的事件
            document.getElementById("btnShow").onclick = function () {
                alert(this.value);
            };

        }

    </script>
   
</head>
<body>

    <input type="button" id="btnShow" value="显示"/>
</body>
window.onload
复制代码

1.3 HTML_DOM
  1.3.1 常用的获取对象方法

复制代码
  
//HTML DOM 使用

    //01-获取元素方法
    //01-01 根据id属性获取单个节点
    document.getElementById();
    //01-02 根据name获取节点列表
    document.getElementsByName();
    //01-03 通过class名称或的节点列表
    document.getElementsByClassName();
    //01-04 通过tagName获取单个节点
    document.getElementsByTagName();
View Code
复制代码

  1.3.2 常用事件  

    1.3.2.1 onclick事件

复制代码
    
<body>

    <input type="button" id="btnShow" value="显示"/>
<script>
    //HTML DOM 使用

    //02-常用的事件
    document.getElementById("btnShow").onclick = function() {
        alert(this.value);
    }

</script>
</body>
onclick事件
复制代码

1.4 动态操作节点

    1.4.1 动态创建元素
        document.createElement();

      1.4.2 添加子节点

   appendChild();

  1.4.3 插入节点

  insertBefore(新元素对象,原节点);

  1.4.4 获取第一个元素

  firstChild();

  1.4.5 获取所有子节点

  childNodes();

  1.4.6 删除元素

  removeChild(子元素对象)

1.5 获取标签对的数据

  1.5.1 innerText    //获取标签对内的文本  textContent(火狐浏览器)

  1.5.2 innerHTML  //获取标签对内的HTML

1.6 通过js操作样式  

复制代码
  
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        window.onload = function() {
            var divset = document.getElementById('divSet');
            divset.style.width = "200px";
            //属性中带-的怎么写
            divset.style.backgroundColor = "red";
        }
    </script>
</head>
<body>
<div id="divSet" style="width: 100px; height: 100px; background-color: blue">abc</div>
</body>
</html>
View Code
复制代码

  

复制代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .worldColor {
            color: yellow;
        }
    </style>
    <script>
        window.onload = function() {
            var divset = document.getElementById('divSet');
            divset.style.width = "200px";
            //属性中带-的怎么写
            divset.style.backgroundColor = "red";
            //设置浮动效果(float是关键字)
            divset.style.cssFloat = 'right';
            //通过class设置属性
            divset.className = 'worldColor';

        }
    </script>
</head>
<body>
<div id="divSet" style="width: 100px; height: 100px; background-color: blue">abc</div>
</body>
</html>
View Code
复制代码


1.7 div的显示与隐藏

  通过设置样式的display控制显示与隐藏.

  block 表示显示,none表示隐藏

1.8 form表单的提交

复制代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script>
        window.onload = function() {
            var form1 = document.getElementById('form1');
            form1.onsubmit = function() {
                var age = document.getElementById('txtAge').value;
                if (isNaN(age)) {
                    alert('年龄输入有误!');
                    return false;
                }
                return true;
            };
        }
    </script>
</head>
<body>
<form id="form1" action="提交表单.html">
    <input type="text" id="txtAge" />
    <input type="submit" id="submit1" />
</form>
</body>
</html>
View Code
复制代码

posted @   逍遥小天狼  阅读(202)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 上周热点回顾(1.20-1.26)
· 【译】.NET 升级助手现在支持升级到集中式包管理
点击右上角即可分享
微信分享提示