DOM基础学习

时间：2016-08-25 23:40:21 阅读：196 评论：0 收藏：0 [点我收藏+]

标签：

DOM 查找元素

1、直接查找

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

2、间接查找

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

标注：间接查找分为了节点查找和标签元素查找：

节点：包含标签中的所有内容，你的标签会被当做内容，你的回车符也会当做内容一部分；
标签元素：仅查找标签，标签外的纯文本及换行符等，不被查找。

DOM 操作

1、内容

innerText   文本
outerText   暂未发现和innerText区别
innerHTML   内部HTML内容
outerHTML  包含被搜索标签的HTML的内容
value       值

2、属性

attributes                // 获取所有标签属性
setAttribute(key,value)   // 设置标签属性
getAttribute(key)         // 获取指定标签属性
 
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById(‘n1‘).setAttributeNode(atr);
*/

3、class操作

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

4、标签操作

a.创建标签

// 方式一
var tag = document.createElement(‘a‘)
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wupeiqi"
 
// 方式二
var tag = "<a class=‘c1‘ href=‘http://www.cnblogs.com/wupeiqi‘>wupeiqi</a>"

b.操作标签

// 方式一
var obj = "<input type=‘text‘ />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement(‘afterBegin‘,document.createElement(‘p‘))
 
//注意：第一个参数只能是‘beforeBegin‘、 ‘afterBegin‘、 ‘beforeEnd‘、 ‘afterEnd‘
 
// 方式二
var tag = document.createElement(‘a‘)
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])

onfocus(获取焦点) 与 onblur(失去焦点)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--输入框默认文字-->
<!--onfocus: 获取焦点执行的函数-->
<!--onblur: 失去焦点执行的函数-->
    <input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur();" />
    <script type="text/javascript">
    function Focus(){
        //console.log(‘Focus‘);
        //获取标签，清空
        var tag = document.getElementById(‘i1‘);
        if(tag.value == "请输入关键字"){
            // 获取焦点时，清空输入框内容
            tag.value = "";
        }

    }
    function Blur(){
        //console.log(‘blur‘);
        var tag = document.getElementById(‘i1‘);
        var val = tag.value;
        // trim 去除空格， length 统计长度
        if(val.trim().length == 0){
            // 失去焦点，并内容为空时，重新设置提示内容
            tag.value = "请输入关键字";
        }
    }
    </script>
</body>
</html>

模态对话框实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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">
        <!--javascript:void(0); 相当于Python中的pass-->
        <a href="javascript:void(0);" onclick="HideModal();">取消</a>
    </div>

    <script>
        function ShowModal() {
            var t1 = document.getElementById(‘shade‘);
            var t2 = document.getElementById(‘modal‘);
            // 点击，移除hide样式
            t1.classList.remove(‘hide‘);
            t2.classList.remove(‘hide‘);

        }
        function HideModal() {
            var t1 = document.getElementById(‘shade‘);
            var t2 = document.getElementById(‘modal‘);
            // 点击，增加hide样式
            t1.classList.add(‘hide‘);
            t2.classList.add(‘hide‘);
        }
    </script>
</body>
</html>

全选与反选实例

<!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>2</td>
                <td>22</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>2</td>
                <td>22</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>2</td>
                <td>22</td>
            </tr>
        </tbody>
    </table>
    <script>
        function CheckAll() {
            // 找到id为tb的表格
            var tb = document.getElementById(‘tb‘);
            // 找到表格的子标签,也就是每一个tr（行）
            var trs = tb.children;
            // for循环每一行
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                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‘,‘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;
                if(ck.checked){
                    ck.checked = false;
                }else {
                    ck.checked = true;
                }
            }
        }
    </script>
</body>
</html>

点赞漂浮实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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);">赞2</a>
    </div>
    <div class="item">
        <a onclick="Favor(this);">赞3</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.1;

            tag.style.top = top + ‘px‘;
            tag.style.left = left + ‘px‘;
            tag.style.opacity = op;
            tag.style.fontSize = fontSize + ‘px‘;
            if(op <= 0.2){
                clearInterval(interval);
                ths.parentElement.removeChild(tag);
            }

        },50);
        }
    </script>
</body>
</html>

滚动窗口实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back {
            position: fixed;
            right: 20px;
            bottom: 20px;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<!--定义滚动窗口事件onscroll-->
<!--使窗口在最上方时，不出现返回顶部-->
<body onscroll="BodyScroll();">
<!--返回顶部-->
    <!--定义灰色背景-->
    <div style="height: 2000px;background-color: #dddddd;"></div>
    <div id="back" class="back hide" onclick="BackTop();">返回顶部</div>

    <script>
        function BackTop() {
            // 滚动条设置为最上方
            document.body.scrollTop = 0;
        }
        function BodyScroll() {
            var s = document.body.scrollTop;
            var t = document.getElementById(‘back‘);
            if(s >= 100){
                t.classList.remove(‘hide‘);
            }else {
                t.classList.add(‘hide‘);
            }
        }
    </script>

</body>
</html>

定时实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--点击删除按钮，出现“删除成功”，5s后消失-->
    <div id="status" style="color: red;"></div>
    <input type="submit" onclick="DeleteStatus();" value="删除"/>

    <script>
        function DeleteStatus() {
            var s = document.getElementById(‘status‘);
            s.innerText = ‘删除成功‘;
            setTimeout(function () {
                s.innerText = "";
            },5000);
        }
    </script>
</body>
</html>

提交表单，终止提交实例

<!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" />
        <!--return返回值为真时继续提交表单到baidu，为假时终止提交-->
        <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>
    <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>
<!--模态对话框之按下esc按键，退出对话框-->
    <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">
        <!--javascript:void(0); 相当于Python中的pass-->
        <a href="javascript:void(0);" onclick="HideModal();">取消</a>
    </div>

    <script>
        function ShowModal() {
            var t1 = document.getElementById(‘shade‘);
            var t2 = document.getElementById(‘modal‘);
            // 点击，移除hide样式
            t1.classList.remove(‘hide‘);
            t2.classList.remove(‘hide‘);

        }
        function HideModal() {
            var t1 = document.getElementById(‘shade‘);
            var t2 = document.getElementById(‘modal‘);
            // 点击，增加hide样式
            t1.classList.add(‘hide‘);
            t2.classList.add(‘hide‘);
        }
        window.onkeydown = function (event) {
            // keyCode == 27 为esc键
            if(event.keyCode == 27){
                HideModal();
            }
        }
    </script>
</body>
</html>

使用a标签提交form标签实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--使用a标签提交form表单实例-->
<!--javascript提交表单-->
    <form id="f1">
        <input type="text" />
        <input type="submit" value="提交" />
        <a onclick="Submit();">提交</a>
    </form>
    <script>
        function Submit() {
            var form = document.getElementById(‘f1‘);
            form.submit();
        }
    </script>
</body>
</html>

弹窗返回true与false实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--弹窗确定返回true，否则返回false-->
    <script>
        <!--confirm-->
        var ret = confirm(‘是否删除？‘);
        console.log(ret);
    </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>

    <!--checkbox特殊，默认事件优先自定义事件-->
    <input type="checkbox" onclick="ClickB();" />
    <script>
        function ClickB() {
            alert(123);
        }
    </script>
</body>
</html>

动态菜单实例

<!DOCTYPE html>
<!--动态标签-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            width: 200px;
            height: 600px;
            border: 1px solid #dddddd;
            overflow: auto;
        }
        .menu .item .title{
            height: 40px;
            line-height: 40px;
            background-color: #2459a2;
            color: white;
        }
    </style>

</head>
<body>
    <div class="menu">
        <div class="item">
            <div class="title" onclick="ShowMenu(this);">菜单一</div>
            <div class="body">
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
            </div>

        </div>
        <div class="item">

            <div class="title"  onclick="ShowMenu(this);">菜单二</div>
            <div class="body hide">
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
            </div>
        </div>
        <div class="item">
            <div class="title"  onclick="ShowMenu(this);">菜单三</div>
            <div class="body hide">
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
            </div>

        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function ShowMenu(ths) {
            // 找到事件标签，下一个标签（next），移除hide样式(removeClass)
            $(ths).next().removeClass(‘hide‘);
            // 找到事件标签，父标签（parent）的兄弟标签（siblings），找到.body样式（find），给此标签添加hide样式（addClass）
            $(ths).parent().siblings().find(‘.body‘).addClass(‘hide‘);
        }
    </script>
</body>
</html>

DOM基础学习

标签：

原文地址：http://www.cnblogs.com/coolking/p/5797177.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)

周排行