【16】Dom

时间：2016-08-22 00:15:42 阅读：148 评论：0 收藏：0 [点我收藏+]

标签：

DOM

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

一、查找元素

1.直接查找

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

2.间接查找

parentNode                // 父节点
childNodes                // 所有子节点，包含换行符内容
firstNodes                // 第一个子节点
lastChild                 // 最后一个子节点
nextSibling               // 下一个兄弟节点
previousSibling           // 下一个兄弟节点

parentElement             // 父节点标签元素
children                  // 所有子标签，标签内容
firstElementChild         // 第一个子标签元素
lastElementChild          // 最后一个子标签元素
nextElementtSibling       // 下一个兄弟标签元素
previousElementSibling    // 上一个兄弟标签元素

PS：document.getElementByid(‘i1‘)等同于$(‘#i1‘)

二、操作元素

1.内容操作

value          // 获取值
innerText      //获取文本内容
innerHTML      //获取文本内容及内容的HTML格式

2.class操作

className           // 获取所有类名
classList.add       // 添加类
classList.remove    // 删除类

示例：模态对话框s4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        // 隐藏
        .hide{
            display: none !important;
        }
        // 
        .shade{
            position: fixed;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: black;
            opacity: 0.6;
            <!--background-color: rgba(0,0,0,.6);-->
            z-index: 1000;
        }

        .modal{
            height: 200px;
            width: 400px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -100px;
            z-index: 1001;
        }
    </style>

</head>
<body>

    <div style="height: 2000px;background-color: #dddddd;">
        <input type="button" value="点我" onclick="ShowModal();" />
    </div>

    <div id="shade" class="shade hide"></div>
    <div id=modal class="modal hide">
        <a href="javascript:void(0);" onclick="HideModal();">取消</a>
    </div>

    <script>
        function ShowModal(){
            var t1 = document.getElementById(‘shade‘);
            var t2 = document.getElementById(‘modal‘);
            t1.classList.remove(‘hide‘);
            t2.classList.remove(‘hide‘);
        }

        function HideModal(){
            var t1 = document.getElementById(‘shade‘);
            var t2 = document.getElementById(‘modal‘);
            t1.classList.add(‘hide‘);
            t2.classList.add(‘hide‘);
        }

    </script>


</body>
</html>

3.样式操作

<input type=‘text‘ style="color:red;font-size:40px;" />

tag = .......
tag.style.color = ‘red‘;
tag.style.fontSize = ‘40px‘;

4.属性操作

<input name=‘n1‘ type=‘text‘ style="color:red;font-size:40px;" />

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

示例：全选/取消/反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全选" onclick="CheckAll()" />
    <input type="button" value="取消" onclick="CancleAll()" />
    <input type="button" value="反选" onclick="ReverseAll()" />
    <!--设计表格样式及内容-->
    <table border="1">
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" /></td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>test</td>
                <td>test</td>
            </tr>
        </tbody>
    </table>

    <script>
        // 全选
        function CheckAll() {
            // 查找tb
            var tb = document.getElementById(‘tb‘);
            // 查找tb内的tr
            var trs = tb.children;
            // 循环tr
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                // 定义checkbox状态
                var ck = current_tr.firstElementChild.firstElementChild;
                ck.setAttribute(‘checked‘,‘checked‘);
            }
        }
        // 反选
        function CancleAll() {
            var tb = document.getElementById(‘tb‘);
            var trs = tb.children;
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                ck.removeAttribute(‘checked‘);
            }
        }
        // 反选
        function ReverseAll() {
            var tb = document.getElementById(‘tb‘);
            var trs = tb.children;
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                // 判断checkbox状态
                if(ck.checked){
                    ck.checked = false;
                    ck.removeAttribute(‘checked‘);
                }else{
                    ck.checked = true;
                    ck.setAttribute(‘checked‘,‘checked‘)
                }
            }
        }
    </script>

</body>
</html>

5.标签操作

1.2.5.1 创建标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="p1">

        <p>text</p>

    </div>

</body>

</html>

操作

p1 = document.getElementById(‘pq‘)

tag = "<a>beforeEnd</a>"

p1.insertAdjacentHTML(‘beforeEnd‘,tag)

tag = "<a>afterEnd</a>"

p1.insertAdjacentHTML(‘afterEnd‘,tag)

tag = "<a>beforeBegin</a>"

p1.insertAdjacentHTML(‘beforeBegin‘,tag);

tag = "<a>afterBegin</a>"

p1.insertAdjacentHTML(‘afterBegin,tag);

结果

<body>

<a>beforeBegin</a>

<a>afterBegin</a>

<a>beforeEnd</a>

</div>

<a>afterEnd</a>

</body>

1.2.5.2 示例：点赞

创建标签，定时器（大小，位置，透明度）

this，当前触发事件的标签
createElement
appendChild
setInterval创建定时器
clearInterval删除定时器
removeChild删除子标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>点赞</title>



    <style>

        .item{

            padding: 50px;

            position: relative;

        }

    </style>

</head>

<body>

    <div class="item">

        <a onclick="Favor(this);">赞1</a>

    </div>

    <div class="item">

        <a onclick="Favor(this);">赞1</a>

    </div>

    <div class="item">

        <a onclick="Favor(this);">赞1</a>

    </div>



    <script>

        function Favor(ths) {

            // ths => this => 当前触发事件的标签

            var top =49;

            var left =71;

            var op = 1;

            var fontSize = 18;



            var tag = document.createElement(‘span‘)

            tag.innerText = ‘+1‘;

            tag.style.position = ‘absolute‘;

            tag.style.top = top + "px";

            tag.style.left = left + "px";

            tag.style.opacity = op;

            tag.style.fontSize = fontSize + "px";

            ths.parentElement.appendChild(tag);



            var interval = setInterval(function () {

                top -= 10;

                left += 10;

                fontSize += 5;

                op -= 0.2;



                tag.style.top = top + "px";

                tag.style.left = left + "px";

                tag.style.opacity = op;

                tag.style.fontSize = fontSize + "px";

                // 判断，透明度<=0.2时，清除事件，删除tag标签

                if(op <= 0.2){

                    clearInterval(interval);

                    ths.parentElement.removeChild(tag);

                }

            }, 500);

        }

    </script>





</body>

</html>

1.2.5.3 定时器

setTimeout,clearTimeout

setInterval,clearInter

1.2.6 高度

1.2.7 提交表单

示例：JavaScript提交表单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>提交表单</title>

</head>

<body>

    <form id="f1">

        <input type="text" />

        <input type="submit" value="提交" />  //form提交表单

        <a onclick="Submit()">提交</a> 

    </form>

    <script

// javascript提交表单

        function Submit() {

            var form = document.getElementById(‘f1‘);

            form.submit();

        }

    </script>

</body>

</html>

1.2.8 其他操作

1.2.8.1 confirm确认框

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <script>

        var ret = confirm(‘是否删除？‘);

        console.log(ret);

    </script>

</body>

</html>

可根据用户选择的结果处理

1.3 事件

this，当前触发事件的标签
全局的事件绑定， window.onKeyDown = function(){}
event，包含事件相关内容
默认事件

a) 自定义优先：a,form

b) 默认优先：checkbox

示例：表单验证

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form action="http://www.baidu.com">

        <input type="text" id="username" />

        <input type="submit" value="提交" onclick="return SubmitForm();" />

    </form>



    <script>

        function SubmitForm() {

            var user = document.getElementById(‘username‘);

            // 判断用户名是否为空

            if(user.value.length > 0){

                // 可以提交

                return true;

            }else {

                // 不可提交，提示错误

                alert(‘用户名输入不能为空‘)

                return false

            }

        }

    </script>

</body>

</html>

示例：事件优先级

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <a href="http://www.baidu.com" onclick="ClickB();">百度</a>

    <form>

        <input type="text" />

        <input type="submit" onclick="ClickB();" />

    </form>



    <input  type="checkbox" onclick="ClickB();" />

    <script>

        function ClickB() {

            alert(123);

        }

    </script>

</body>

</html>

示例：模态对话框增加按Esc键退出

<script>

    function ShowModal(){

        var t1 = document.getElementById(‘shade‘);

        var t2 = document.getElementById(‘modal‘);

        t1.classList.remove(‘hide‘);

        t2.classList.remove(‘hide‘);

    }



    function HideModal(){

        var t1 = document.getElementById(‘shade‘);

        var t2 = document.getElementById(‘modal‘);

        t1.classList.add(‘hide‘);

        t2.classList.add(‘hide‘);

    }

    window.onkeydown = function (event) {

        if(event.keyCode == 27){

            HideModal

        }

    }

</script>

【16】Dom

标签：

原文地址：http://www.cnblogs.com/liangdalong/p/5793974.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行