DOM操作（部分）

DOM：Document Object Model 文档对象模型（让JS有能力操作页面的元素）

1.使用JS获取页面上的某些元素

var elem = document.getElementById("元素ID")

2.修改 / 获取标记内的内容

属性：innerHTML

ex：
  var elem = document.getElementById("d1");
  elem.innerHTML = "你好 世界！";
  console.log(elem.innerHTML);

练习：

在页面中创建一个 div ，设置内容为 Hello World ，并设置ID为 d1，添加两个按钮，一个按钮用于获取 d1 元素中HTML内容，并打印在控制台上，另一个按钮将 d1的内容更改为 “这是我的第一个DOM操作”

       <script type="text/javascript">
            function printDiv(){
                var elem = document.getElementById("d1");
                console.log(elem.innerHTML);
            }
            function upDate(){
                var elem = document.getElementById("d1");
                elem.innerHTML = "这是我的第一个DOM操作";
                console.log(elem.innerHTML);
                console.log(elem);
            }
        </script>
        <div id="d1">Hello World!</div>
        <button type="button" onclick="printDiv()">打印d1元素</button>
        <button type="button" onclick="upDate()">修改d1内容</button>

3.获取 / 设置表单控件的数据

在DOM中，文本框，密码框，... ...也都是通过value属性来获取或设置控件的值

练习：

在页面中创建一个文本框，一个 div，一个按钮，点击按钮时，将文本框中的数据，以一级标题的形式显示在 div 中

        <script type="text/javascript">
            function showUname(){
                var value = document.getElementById("uname").value;
                document.getElementById("show").innerHTML = "<h1>"+value+"</h1>";
            }
        </script>
        <div id="show"></div>
        <input type="text" id="uname" value="" />
        <button type="button" onclick="showUname()">显示</button>

4.简化 document.getElementById()

document.getElementById 作用：根据“指定ID值”获取对应的“HTML元素”

编写一个函数

function $(id){
	return document.getElementById(id);
}

练习：

创建一个common.js 的文件，封装 $ 函数，负责接受一个id值作为参数，并且返回对应的对象。在页面中创建一个文本框，一个 div，一个按钮，点击按钮时，将文本框中的数据，以一级标题的形式显示在 div 中

        <script src="common.js" type="text/javascript"></script>
        <script type="text/javascript">
            function showUname(){
                var value = $("uname").value;
                $("show").innerHTML = "<h1>"+value+"</h1>";
            }
        </script>
        <div id="show"></div>
        <input type="text" id="uname" value="" />
        <button type="button" onclick="showUname()">显示</button>

5.HTML元素事件

文本框和密码框事件

（1）onblur 事件：鼠标失去焦点时要执行的操作

（2）onfocus 事件：获取焦点时要执行的操作

练习：

在页面中创建一个文本框，后面再创建一个 span，文本框失去焦点时，判断文本框中的数据是否为空，如果为空，在span中提示用户名不能为空，否则提示通过

        <script src="common.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            function chackUname(){
                var uname = $("uname").value;
                if(uname ==""){
                    $("uname-show").innerHTML = "用户名不能为空";
                }else{
                    $("uname-show").innerHTML = "通过";
                }
            }
        </script>
        <input type="text" id="uname" value="" onblur="chackUname()"/>
        <span id="uname-show"></span>

<body>的事件 - onload

在网页加载的时候，要执行的操作，可以封装在 onload 中

<select> 下拉窗事件 -onchange

练习：

创建一个二维数组，

var city = [

["济南","青岛","烟台"]，

["郑州","许昌","三门峡"]，

["唐山","廊坊","秦皇岛"]

] ，将二维数组中对应的省份信息显示在一个下拉框中，当选择某个省份时将该省份对应的市信息显示在另一个下拉框中

        <script src="common.js" type="text/javascript"></script>
        <script type="text/javascript">
            //根据选择省份显示对应城市信息
            function loadCity(){
                //创建一个省份的二维数组
                var city = [
                    ["济南","青岛","烟台"],
                    ["郑州","许昌","三门峡"],
                    ["唐山","廊坊","秦皇岛"]
                ];
                //获取sel的值
                var val = $("sel").value;
                //判断val的值是否为-1（请选择）
                if(val == -1){
                    var html = "<option>请先选择省份</option>";
                    $("selCity").innerHTML = html;
                }else{
                    //通过val到city中取出对应的子数组
                    var arrayCity = city[val];
                    var htmlCity = "";
                    for(var i=0;i<arrayCity.length;i++){
                        htmlCity += "<option>";
                        htmlCity += arrayCity[i];
                        htmlCity += "</option>";
                    }
                    $("selCity").innerHTML = htmlCity;
                }
            }
        </script>
        <select id="sel" onclick="loadCity()">
            <option value ="-1">请选择</option>
            <option value ="0">山东</option>
            <option value ="1">河南</option>
            <option value ="2">河北</option>
        </select>
        <select id=selCity></select>

posted @ 2020-10-05 14:59 you_rgb 阅读(164) 评论(0) 收藏举报

刷新页面返回顶部

you_rgb

DOM操作（部分）

公告