首页 > 代码库 > 步步为营-54-DOM

步步为营-54-DOM

2024-09-20 15:57:03   218人阅读

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

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

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

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

1.2 BOM常用的三个对话框

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

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=http://www.mamicode.com/"显示"/>
<script>
    //HTML DOM 使用

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

</script>
</body>
onclick事件

步步为营-54-DOM


联系
我们