DOM操作学习 - 杨梅冲

一、DOM对象-查找元素

# 1.直接查找
# 获取标签对象的方式:
document.getElementById('#id') 　#根据ID获取一个标签（获取的是单独的对象）
document.getElementsByClass('.class') # 获取的是列表  列表中套对象
document.getElementsByName　　　　　# 根据name属性获取标签集合
document.getElementsByClassName　　# 根据class属性获取标签集合
document.getElementsByTagName　　　# 根据标签名获取标签集合（获取的是列表  列表中套对象）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="i1">hellozekai</div>
<div class="c1">helloc1</div>
<div class="c1">helloc2</div>
<input type="checkbox" name="hobby" id="myhobby" >足球
</body>
</html>

# 根据标签获取标签集合
>var obj=document.getElementsByTagName("div");
>obj
# 结果：
[div#i1, div.c1, div.c1, i1: div#i1]
# 根据id获取标签
>var s = document.getElementById("myhobby");
>s
# 结果
<input type="checkbox" name="hobby" id="myhobby">

案例：表格的全选、反选和取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="selectAll()">
<input type="button" value="取消" onclick="cancelAll()">
<input type="button" value="反选" onclick="reverseAll()">
<!--简易写法：table>thead>tr>th然后按table键就会自动补齐格式-->
<table border="1px">
    <thead>
    <tr>
        <th>id</th>
        <th>ip</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>192.168.11.21</td>
            <td>
                <input type="checkbox" class="mycheck">
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>192.168.11.22</td>
            <td>
                <input type="checkbox" class="mycheck">
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>192.168.11.23</td>
            <td>
                <input type="checkbox" class="mycheck">
            </td>
        </tr>
    </tbody>
</table>

</body>
<script>
    function selectAll(){
         // 1. 获取所有的复选框 列表形式返回
         var arr = document.getElementsByClassName('mycheck');
         //  2. 循环列表, 获取对象
         for (var i=0; i<arr.length; i++){
             // console.log(chks[i]);
             //  3. 设置对象的checked属性
            arr[i].checked = true;
         }
    }

    function cancelAll(){
        // 1. 获取所有的复选框 列表形式返回
         var arr = document.getElementsByClassName('mycheck');
         //  2. 循环列表, 获取对象
         for (var i=0; i<arr.length; i++){
             // console.log(chks[i]);
             //  3. 设置对象的checked属性
            arr[i].checked = false;
         }
    }

    function reverseAll(){
        // 1. 获取所有的复选框 列表形式返回
         var arr = document.getElementsByClassName('mycheck');

         //  2. 循环列表, 获取对象
         for (var i=0; i<arr.length; i++){

             if(arr[i].checked){
                 arr[i].checked = false;
             }else{
                 arr[i].checked = true;
             }
         }
    }
</script>
</html>

View Code

二、DOM对象-操作属性

1.操作内容：

# 操作内容
innerText　　　文本
innerHTML　　  HTML内容
value 　　　　　值

# 操作属性
attributes 　　　　　　　　　　获取所有标签属性
setAttribute(key,value) 　　　设置标签属性
getAttribute(key)　　　　　　  获取指定标签属性
removeAttribute(key)　　　　  删除属性

<div id="i1" clasid = 'sss'>这个是内容</div>
<input type="text" value="dbshabdsabda" id="i2">
<input type="button" value="发送" id="btn">

# 操作标签对象的内容
# 查看
>var obj = document.getElementById("i1");
>obj
<div id="i1" clasid = 'sss'>这个是内容</div>

# 获取内容
>obj.innerText
这个是内容

# 设置内容
>obj.innerText="xxxx"
xxxx
>obj.innerHTML= '<a href="www.baidu.com">设置的内容</a>';
<a href="www.baidu.com">设置的内容</a>
# innerHTML可以看到设置的内容变成了可以跳转的链接

# 也可以设置value的值
>var obj2 = document.getElementById("i2");
>obj2.value = "ccccc"
>obj2.value
ccccc

# 属性操作
<div id="i1" clasid = 'sss'>这个是内容</div>
<input type="button" value="发送" id="btn">

obj = document.getElementById("i1")
# 获取属性
>obj.attributes
{0: id, 1: clasid, id: id, clasid: clasid, length: 2}

# 获取单个属性值
>obj.getAttribute('id')
i1
# 设置增加属性值
>obj.setAttribute('k2','v2')
>obj
<div id="i1" clasid = 'sss' k2="v2">这个是内容</div>

# 删除属性值
>obj.removeAttribute('k2')
>obj
<div id="i1" clasid = 'sss'>这个是内容</div>

# 设置按钮不能点击
>obj = document.getElementById('btn')
>obj2.setAttribute('disabled','true');
>obj
# 可以看到发送按钮变为灰色
<input type="button" value="发送" id="btn" disabled="true">

时间函数

// 在特定的时间内, 执行函数
// setInterval()  ### crontab
// setInterval("test()", 1000);  # 每隔1s执行一次
// setTimout()  ## 只执行一次结束  ## at
//setTimeout("test()", 1000);

案例：验证码倒计时

# 验证码倒计时
# 分析：点击按钮后，按钮显示倒计时并变为灰色；记时结束后又变回来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证码倒计时</title>
</head>
<body>
<input type="button" value="发送验证码" id="btn" onclick="sendMsg()">
</body>
<script>
    var total_time = 10; //倒计时总是
    var press = document.getElementById("btn");
    function sendMsg() {
        press.setAttribute('disabled','true');
        press.value = "还剩下" + total_time + "秒";
        setInterval("lesstime()",1000);
    }

    function lesstime() {
        if (total_time == 1){
            press.removeAttribute("disabled");
            press.value = "发送验证码";

        } else {
            total_time -= 1;
            press.value = "还剩下" + total_time + "秒";
        }
    }
</script>
</html>

View Code

2.样式操作

1.指定类操作
className　　　　　　　  获取所有类名
classList.remove(cls) 　　删除指定类
classList.add(cls) 　　　　添加类

案例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: blue;
        }
        .c2{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="c1" >dsabdsnajd;sna</div>
</body>
</html>

# 大颗粒度的设置:
style:
    .c2{
        xxxx
    }
js:
    d1.classList.add('c2')  : 添加样式
    d1.classList
    d1.classList.remove('c2'): 删除样式

# 细颗粒度的设置:
对象.style.css的属性 = 值:
# 两种情况:
# 1.
css: 
    color: red;
DOM:
    obj.style.color = 'red'
# 2. 
css:
    font-size: 20px;
    background-position-y 
DOM:
    obj.style.fontSize = "20px"

View Code

案例2：模态框练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .shadow{
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: black;
            opacity: 0.3;
        }
        .content{
            position: absolute;
            top:200px;
            left: 500px;
            width: 300px;
            height: 200px;
            background-color: white;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<input type="button" value="添加" onclick="getModal()">

<!--遮罩层-->
<div class="shadow hide"></div>

<!--模态框-->
<div class="content hide">
    <form action="">
        用户名:<input type="text" ><br>
        <input type="button" value="提交">
        <input type="button" value="取消" onclick="cancelModal();">
    </form>
</div>
</body>
<script>
    function getModal() {
        document.getElementsByClassName('shadow')[0].classList.remove('hide');
        document.getElementsByClassName('content')[0].classList.remove('hide');
    }
    function cancelModal(){
        document.getElementsByClassName('shadow')[0].classList.add('hide');
        document.getElementsByClassName('content')[0].classList.add('hide');
    }
</script>
</html>

View Code

三、事件

1. 常见的事件：焦点

获得焦点事件——–onfocus
失去焦点事件——–onblur
内容改变事件——–onchange
载入页面———–onload
单击事件———–onclick
鼠标移入事件——–onmouseover
鼠标移出事件——–onmouseout

案例：onchange 多级菜单联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select name="province" id="province" onchange="ld();">
        <option value="-1">请选择</option>
        <option value="0">北京</option>
        <option value="1">山西</option>
    </select>
    <select name="city" id="city">
    </select>
</body>
<script>
    var citys = [
        ["海淀","东城","西城","朝阳"],
        ["太原","大同","运城","晋中"]
    ];
    function ld(){
        var provinces = document.getElementById("province");
        var opts;
        if(provinces.value == -1){
            opts = '';
            document.getElementById("city").innerHTML = opts;
            return;
        }
        var areas = citys[provinces.value];
        for(var i = 0; i < areas.length; i++){
            opts += "<option value='" + i + "'>" + areas[i] + "</option>";
        }
        document.getElementById("city").innerHTML = opts;
    }
</script>
</html>

View Code

2.事件的绑定方式

# a.html属性的方式绑定
<a href='www.baidu.com' onclick="t1();"> 百度 </a>

作为WEB开发人员,这是最早碰到的一种事件绑定方式，这种绑定方式非常古老
优点：兼容性最强
缺点也很明显:
1:需要在DOM渲染时分析绑定语句,影响DOM渲染速度(IE下尤其)
2:形式上没达到”结构与行为”相分离的原则

# b.对象属性方式
var bd = document.getElementById('bd');
bd.onclick = function(){
    console.log(this.id);
}

# 这种绑定是把一个DOM对象onclick属性赋值为一个函数，那此时函数内部的this指向的是该DOM对象，即这个a对象
# 缺点:该方式只能为一种事件，绑定一个回调函数
即：.onclick = fn1, .onclick=fn2;
最终的效果是.onclick=fn2 执行

# c.addEventListener方式(了解)
var i0 = document.getElementById('i1');
i0.addEventListener('click', function(){console.log('a');})
i0.addEventListener('click', function(){console.log('b');})
 
格式：addEventListener(‘事件’,绑定的函数, true/false);
1.如果添加了多个事件处理函数，则按添加时的先后顺序来执行
2.事件处理函数中的this指代的是DOM对象本身(w3c标准)
3.第一个事件参数，一律把事件名称的“on”去掉
优点: 能为同一种事件,如onclick,绑定多个函数函数中的this指向该DOM对象,操作方便
缺点:IE8及以下版本不支持此方法

3.windows常见方法

window常见方法:
    alert('1234') # 浏览器弹出消息
    confirm('是否确定删除?');   #浏览器跳出弹窗询问
    open(): 打开一个网页
    location.href = "资源"  ### 跳转到某一个网页
    location.reload(): 刷新当前页面

posted on 2019-07-15 16:54 杨梅冲阅读(126) 评论(0) 编辑收藏举报

搜索

随笔分类

阅读排行榜

推荐排行榜

最新评论