欢迎来到Anderson_An的博客

🌵点此关注哟
众里寻他千百度，蓦然回首，那人却在灯火阑珊处

4.DOM

DPM定义

文档对象模型（Document Object Model）是一种用于HTML和XML文档的编程接口。

查找元素

1.直接查找

document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

练习：

<div id="i1">床前明月光，疑是地上霜</div>
    <a>111</a>
    <a>222</a>
    <a>333</a>
复制代码
//获取ID
document.getElementById('i1')

//获取内容
document.getElementById('i1').innerText

//内容重新赋值
document.getElementById('i1').innerText = '举头望明月，低头思故乡'

//获取TagName（'a'）集合
document.getElementsByTagName('a')

//获取集合指定索引元素
document.getElementsByTagName('a')[1]

//对单个元素重新赋值
document.getElementsByTagName('a')[1].innerText = 666
复制代码

2.间接查找

复制代码
parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点
  
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素
复制代码

练习：

复制代码
<div>
            <div>c1Sibling</div>
            <div>c1</div>
        </div>
        <div>
            <div>c2Sibling</div>
            <div id="i1">c2</div>
        </div>
        <div>
            <div>c3Sibling</div>
            <div>c3</div>
        </div>
复制代码
复制代码
 //获取ID
tag = document.getElementById('i1');

//获取ID的父亲
tag.parentElement

<div>
            <div>c2Sibling</div>
            <div id="i1">c2</div>
 </div>

//获取父亲的上一个兄弟
tag.parentElement.previousElementSibling

<div>
            <div>c1Sibling</div>
            <div>c1</div>
</div>

//获取父亲的上一个兄弟的第一个儿子
tag.parentElement.previousElementSibling.firstElementChild

<div>c1Sibling</div>
复制代码

内容操作

（1）内容

innerText   文本
innerHTML   HTML内容(包括元素、注释和文本节点)
value       获取input/select/textarea里面输入的内容

（2）属性

attributes           获取所有标签属性
getAttribute()       获取指定标签属性
setAttribute()       设置指定标签属
removeAttribute()    移除指定标签属

class操作

复制代码
对所有样式操作
className                  // 获取所有类名
classList.remove(class)    // 删除指定类
classList.add(class)       // 添加类

对单个样式操作
obj.style.fontSize='16px'
obj.style.backgroundColor='red'
复制代码

事件

onmousecover    鼠标移到某元素之上
onmouseout      鼠标从某元素离开
onfocus         元素获得聚焦
onblur          元素失去焦点

实例

1.模态框（添加，全选，取消，反选）

功能：

（1）点击添加 -->弹出框输入内容-->点取消后，弹出框关闭

（2）全选，取消，反选

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opscity:0.6;
        }
        .c2{
            width:500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
    </style>
</head>
<body style="margin: 0;">
    <div>
        <input type="button" value="添加" onclick="ShowModel();">
        <input type="button" value="全选" onclick="ChooseAll()">
        <input type="button" value="取消" onclick="CancelAll()">
        <input type="button" value="反选" onclick="ReverseAll()">
        <table>
            <thread>
                <tr>
                    <th>选择</th>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
            </thread>
            <tbody id="tb">
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>1.1.1.1</td>
                    <td>190</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1.1.1.2</td>
                    <td>192</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1.1.1.3</td>
                    <td>194</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!--遮罩层-->
    <div id="i1" class="c1 hide"></div>

    <!--弹出框-->
    <div id="i2" class="c2 hide">
        <p><input type="text"></p>
        <p><input type="text"></p>
        <p>
            <input type="button" value="取消" onclick="HideModel();">
            <input type="button" value="确定">
        </p>
    </div>
    <script>
        function ShowModel() {
            document.getElementById('i1').classList.remove('hide');
            document.getElementById('i2').classList.remove('hide');
        }
        function HideModel() {
            document.getElementById('i1').classList.add('hide');
            document.getElementById('i2').classList.add('hide');
        }
        function ChooseAll() {
            var tbody = document.getElementById('tb');
            var tr_list = tbody.children;
            for(var i = 0;i < tr_list.length;i += 1){
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = true;
            }

        }
        function CancelAll() {
            var tbody = document.getElementById('tb');
            var tr_list = tbody.children;
            for(var i = 0;i < tr_list.length;i += 1){
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = false;
            }

        }
        function ReverseAll() {
            var tbody = document.getElementById('tb');
            //获取所有tr
            var tr_list = tbody.children;
            for(var i = 0;i < tr_list.length;i += 1){
                //循环所有的tr
                var current_tr = tr_list[i];
                //获取<input type="checkbox">
                var checkbox = current_tr.children[0].children[0];
                if(checkbox.checked){
                    checkbox.checked = false;
                }else{
                    checkbox.checked = true;
                }
            }

        }
    </script>

</body>
</html>
复制代码

 2.后台管理页面布局

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
        }
        .left{
            float: left;
        }
        .pg-header{
            height: 48px;
            background-color: #2459a2;
            color:white;
            line-height: 48px;
        }
        .pg-header .logo{
            width:200px;
            background-color: cadetblue;
            text-align: center;
        }
        .pg-header .user{
            margin-right: 60px;
            padding: 0 20px;
            color: white;
            height: 48px;
            position: relative;
        }
        .pg-header .user:hover{
            background-color: #204982;
        }
        .pg-header .user .a img{
            height: 40px;
            width: 40px;
            margin-top: 4px;
            border-radius: 50%;
        }
        .pg-header .user .b{
            z-index: 20;
            position: absolute;
            top: 48px;
            right: 44px;
            background-color: white;
            color: black;
            width: 80px;
            display: none;
        }
        .pg-header .user:hover .b{
            display: block;
        }
        .pg-header .user .b a{
            display: block;
        }
        .right{
            float:right
        }
        .pg-content .menu{
            position:fixed;
            top:48px;
            left: 0;
            bottom: 0;
            right: 0;
            width: 200px;
            background-color: #dddddd;
        }
        .pg-content .content{
            position:fixed;
            top:48px;
            left: 200px;
            bottom: 0;
            right: 0;
            z-index: 9;
            background-color: purple;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="logo left">logo</div>
        <div class="user right">
            <a class="a img">登陆</a>
            <div class="b">
                <a>我的资料</a>
                <a>注销</a>
            </div>
        </div>
    </div>
    <div class="pg-content">
        <div class="menu left">目录</div>
        <div class="content left">内容</div>
    </div>
</body>
</html>
复制代码

3.鼠标焦点

onfocus   获得焦点

onblur      失去焦点

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 600px;margin: 0 auto;">
        <input id="i1" onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字" />
    </div>

    <script>
        function Focus() {
            var tag = document.getElementById('i1');
            var val = tag.value;
            if(val == "请输入关键字"){
                tag.value = ""
            }
        }
        function Blur() {
            var tag = document.getElementById('i1');
            var val = tag.value;
            if(val.length == 0){
                tag.value = "请输入关键字"
            }
        }
    </script>
</body>
</html>
复制代码

4.创建标签

点“添加” 可以创建text输入框

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" onclick="xxx()" value="添加">
    <div id="i1">
        <p><input type="text"></p>
    </div>
    <script>
        function xxx() {
             //创建标签
            //将标签添加到i1里面
            var tag=document.createElement("input");
            //添加属性
            tag.setAttribute("type","text");
            //设置样式
            tag.style.fontSize="16px";
            tag.style.border="1px solid red";
            var p=document.createElement("p");
            //把tag放到p里面
            p.append(tag);
            document.getElementById('i1').appendChild(p)
        }
    </script>
</body>
</html>
复制代码

 5.鼠标高亮显示

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1" width="300px">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
    <script>
        var myTrs=document.getElementsByTagName('tr');
        for(var i=0; i < myTrs.length; i++){
            myTrs[i].onmousemove = function(){
                this.style.backgroundColor='red';
            }
            myTrs[i].onmouseout = function(){
                this.style.backgroundColor=""
            }
        }
    </script>
</body>
</html>
复制代码

 

posted on 2018-11-18 10:16  Anderson_An  阅读(187)  评论(0)  编辑  收藏  举报

导航