步步为营-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=" 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=" 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