zoukankan      html  css  js  c++  java
  • DOM

    一、DOM简介

    1、简介

      文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口,它定义了访问HTML和XML文档的标准。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。DOM模型将整个文档(XML文档和HTML文档)看成一个树形结构,并用document对象表示该文档。

    DOM规定文档中的每个成分都是一个节点(Node):

    文档节点(Document):代表整个文档
    元素节点(Element):文档中的一个标记
    文本节点(Text):标记中的文本
    属性节点(Attr):代表一个属性,元素才有属性

    2、节点类型

    • NodeType属性来表明节点类型

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>DOM</title>
        </head>
    
        <body>
            <div id="div1"></div>
            <script type="text/javascript">
                var div1 = document.getElementById("div1");
                console.log(div1.nodeType); //结点类型 1    Element    代表元素
                console.log(div1.nodeName); //DIV 结点名称
                var id = div1.getAttributeNode("id"); //获得div1的属性结点id
                console.log(id.nodeType); //2    Attr    代表属性
                console.log(id.nodeName); //id 结点名称 
            </script>
        </body>
    
    </html>

    3、节点属性

    二、查找元素

    1、直接查找

    document.getElementById             # 根据ID获取一个标签
    document.getElementsByName          #根据name属性获取标签集合
    document.getElementsByClassName     #根据class属性获取标签集合
    document.getElementsByTagName       #根据标签名获取标签集合
    
    # 集合取第一个,后面加[0]

    2、间接查找

    用带element的找到的一定是标签元素,不带的会找到标签元素下面的换行节点,是空的,所以尽量用带element的;

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

    3、局部查找

    先找到一个标签对象,再在它的子节点中查找;

    <div id="div1">
    
        <div class="div2">i am div2</div>
        <div name="yuan">i am div2</div>
        <div id="div3">i am div2</div>
        <p>hello p</p>
    </div>
    
    <script>
    
       var div1=document.getElementById("div1");
    
    ////支持;
    //   var ele= div1.getElementsByTagName("p");
    //   alert(ele.length);
    ////支持
    //   var ele2=div1.getElementsByClassName("div2");
    //   alert(ele2.length);
    ////不支持
    //   var ele3=div1.getElementById("div3");
    //   alert(ele3.length);
    ////不支持
    //   var ele4=div1.getElementsByName("yuan");
    //   alert(ele4.length)

    三、操作

    1、内容

    innerText     # 标签下的所有文本内容,包括所有子标签的文本
    innerHTML   # 标签下的所有内容,包括文本和子标签 
    value          # input标签的输入值
    <a id="i1">百度<span>666</span></a>
    
    var t=document.getElementById("i1")
    t.innerText
    "百度666"
    t.innerHTML
    "百度<span>666</span>"

    2、属性

    attributes                // 获取所有标签属性
    setAttribute(key,value)   // 设置标签属性
    getAttribute(key)         // 获取指定标签属性
    
    <body>
        <input id="i1" type="checkbox"/>
        <script>
            var t = document.getElementById("i1");
            t.setAttribute('checked','checked')
        </script>
    </body>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="button" onclick="CheckAll()" value="全选"/>
        <input type="button" onclick="CancelAll()" value="取消"/>
        <input type="button" onclick="ReverseAll()" value="反选"/>
        <table border="1">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input id="i1" type="checkbox"/></td>
                    <td>a</td>
                    <td>11</td>
                </tr>
                <tr>
                    <td><input id="i2" type="checkbox"/></td>
                    <td>b</td>
                    <td>22</td>
                </tr>
                <tr>
                    <td><input id="i3" type="checkbox"/></td>
                    <td>c</td>
                    <td>33</td>
                </tr>
            </tbody>
        </table>
        <script>
            function CheckAll() {
                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.setAttribute('checked','checked');
                    ck.checked = true;
                }
            }
            function CancelAll() {
                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');
                    ck.checked = false;
                }
            }
            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>
    全选-取消-反选

    3、class操作

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

    4、标签操作

    a.创建标签

    // 方式一
    var tag = document.createElement('a')
    tag.innerText = "Charlie"
    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 = "<a>百度一下</a>";
    //把字符串当做标签添加
    xxx.insertAdjacentHTML("beforeEnd",obj);
    //把字符串当做文本添加
    xxx.insertAdjacentText("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])
    
    // *******删除标签*******
    
    获得要删除的元素 var son
    获得它的父元素  var father
    使用father.removeChild(son)方法删除
    
    // *******修改标签*******
    
    //第一种方式:使用上面增和删结合完成修改
    
    //第二中方式:
    
    使用setAttribute();方法修改属性          
    
    使用innerHTML属性修改元素的内容

    5、样式操作

    var obj = document.getElementById('i1')
    <!--注意书写方式-->
    obj.style.fontSize = "32px";
    obj.style.backgroundColor = "red";

    6、位置操作

    //总文档高度
    document.documentElement.offsetHeight
     
    //当前文档占屏幕高度
    document.documentElement.clientHeight
     
    //自身高度
    tag.offsetHeight
     
    //距离上级定位高度
    tag.offsetTop
     
    //父定位标签
    tag.offsetParent
    
    //滚动高度
    tag.scrollTop
    /*
        clientHeight -> 可见区域:height + padding
        clientTop    -> border高度
        offsetHeight -> 可见区域:height + padding + border
        offsetTop    -> 距离上级定位标签的高度
        scrollHeight -> 全文高:height + padding
        scrollTop    -> 滚动高度
        特别的:
            document.documentElement代指文档根节点
    */
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .back{
                position: fixed;
                right: 20px;
                bottom: 20px;
                cursor: pointer;
                color: red;
            }
            .hide{
                display: none;
            }
        </style>
    </head>
    <body onscroll="BodyScroll();">
        <div style="height: 2000px;background-color: #dddddd;"></div>
        <div id="i1" class="back hide" onclick="BackTop();">返回顶部</div>
        <script>
            function BackTop() {
                // 页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement
                // 页面没有DTD,即没指定DOCTYPE时,使用document.body
                document.documentElement.scrollTop = 0;
            }
            function BodyScroll() {
                //当前页面可见高度
                var saw_height = document.documentElement.clientHeight;
                //页面滚动高度
                var scroll_height = document.documentElement.scrollTop;
                var tag = document.getElementById('i1');
                if(scroll_height > saw_height){
                    tag.classList.remove('hide');
                }else{
                    tag.classList.add('hide');
                }
            }
        </script>
    </body>
    </html>
    返回顶部

    7、提交表单

    document.geElementById('form').submit()
    
    <body>
        <form id="i1">
            <input type="text"/>
            <input type="submit"/>
            <a onclick="SubMit();">提交</a>
        </form>
        <script>
            function SubMit(){
                var t = document.getElementById('i1');
                t.submit();
            }
        </script>
    </body>

    8、其他操作

    console.log                 输出框
    alert                       弹出框
    confirm                     确认框(确定为true,取消为false)
    document.write('hello') 输出到页面
    document.write('<br>') 页面输出换行 
     
    // URL和刷新
    location.href               获取URL
    location.href = "url"       重定向
    location.reload()           重新加载
     
    // 定时器
    setInterval                 多次定时器
    clearInterval               清除多次定时器
    setTimeout                  单次定时器
    clearTimeout                清除单次定时器

      

    <!--单次定时器-->
    <body>
        <div id="i1" style="color: red;"></div>
        <input type="submit" value="删除" onclick="Delete();"/>
        <script>
            function Delete() {
                var tag = document.getElementById('i1');
                tag.innerText = '删除成功';
                setTimeout(function () {
                    tag.innerText = '';
                },2000)
            }
        </script>
    </body>

    四、事件

    对于事件需要注意的要点:

    • this:当前触发事件的标签;

    • event:封装了当前事件的内容;

    • window.onclick:绑定全局事件,即按下任意键就触发;例如:window.onclick=function(){};

    • a标签和submit标签都有默认的绑定事件,如果再绑定一个事件,会先执行新绑定的事件;

    • checkbox和其他标签都不一样,永远先执行默认的绑定事件,即先打对勾,再执行新绑定的自定义事件;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="http://www.baidu.com">
            <input type="text" id="user"/>
            <input type="submit" onclick="return SubmitForm();"/>
        </form>
        <script>
            function SubmitForm() {
                var user = document.getElementById('user');
                if(user.value.length > 0){
                    //可以提交
                    return true;
                }else{
                    //不可以提交
                    alert('用户名输入不能为空')
                    return false;
                }
            }
        </script>
    </body>
    </html>
    验证输入是否合法
    • 通过绑定onsubmit事件,来验证表单的提交
    <html>
    <body>
    <form id="form">
        <input type="text" id="t1"/>
        <input type="submit" value="点我!"/>
    </form>
    <script type="text/javascript">
        var ele = document.getElementById("form");
        var text = document.getElementById('t1');
        ele.onsubmit = function (event) {
            if (text.value.length > 0){
                alert(text.value);
                return true;
            }else{
                alert("验证失败 表单不会提交!");
                event.preventDefault();// 阻止表单提交方式一:通知浏览器不要执行与事件关联的默认动作
                //return false; //方式二:返回false表示拦截表单提交.其他为放行
            }
        };
    </script>
    </body>
    </html>

    五、实例

    1、跑马灯

    <!--跑马灯-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #n1{
                display: inline-block;
                background-color: #0a9a13;
                color: white;
                font-size: 100px;
                margin-left: 300px;
            }
        </style>
    </head>
    <body>
        <div id="n1">
            你好,总理!
        </div>
        <script>
            //每隔一秒执行一次f1函数
            setInterval('f1()',1000);
            function f1() {
                // 获取ID=n1的标签
                var tag = document.getElementById('n1');
                // 获取标签内容
                var text = tag.innerText;
                var a = text.charAt(0); //获取字符串第一个字符
                var sub = text.substring(1,text.length); //获取字符串的第二个到最后一个字符
                var new_str = sub + a;
                tag.innerText = new_str;
            }
        </script>
    </body>
    </html>

     2、搜索框:请输入关键字

    <!--搜索框-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--绑定一个事件,当标签获取焦点时触发函数-->
        <input id="i1" type="text" value="请输入关键字" onfocus="f1();" onblur="f2();"/>
        <input type="button" value="百度一下"/>
        <script>
            function f1() {
                //获取标签,清空关键字
                var tag = document.getElementById('i1');
                if(tag.value == "请输入关键字"){
                    tag.value = '';
                }
            }
            function f2() {
                //鼠标移走时,又显示关键字
                var tag = document.getElementById('i1');
                var val = tag.value;
                if(val.trim().length == 0){
                    tag.value = '请输入关键字';
                }
            }
        </script>
    </body>
    </html>

     3、模态对话框

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .hide{
                display: none !important;
            }
            /*遮盖层*/
            .shade{
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0,0,0,.6);
                z-index: 100;
            }
            /*莫泰对话框,屏幕中央固定*/
            .modal{
                width: 400px;
                height: 300px;
                border: 2px solid orange;
                background-color: white;
                position: fixed;
                top: 50%;
                left: 50%;
                margin-left: -200px;
                margin-top: -150px;
                z-index: 101;/*对话框在遮盖层上边*/
            }
        </style>
    </head>
    <body>
        <!--onclick点击触发函数-->
        <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">Python从入门到入坟
            <!--a标签什么都不做,点击触发函数,继续隐藏对话框-->
            <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');
            }
            window.onkeydown = function (event) {
                //按下esc键,就隐藏对话框,27为ESC对应的ASC码
                if(event.keyCode == 27){
                    HideModal();
                }
            }
        </script>
    </body>
    </html>
    View Code

     4、点赞

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="plugins/font-awesome-4.7.0/css/font-awesome.css"/>
        <style>
            .item{
                padding: 30px;
                border: 1px solid red;
                position: relative;
            }
        </style>
    </head>
    <body>
        <div class="item">
            <div style="padding-bottom: 8px;">腹有诗书气自华</div>
            <i class="fa fa-thumbs-up" aria-hidden="true" onclick="CheckClick(this);" style="cursor: pointer"></i>
            <span id="i1">0</span>
        </div>
        <script>
            function CheckClick(ths) {
                var top = 59;
                var left = 48;
                var fontSize = 16;
                var op = 1;
                var obj = document.getElementById('i1');
                // var obj_text = obj.innerText;
                var tag = document.createElement('span');
                tag.style.position = 'absolute';
                tag.style.top = top + 'px';
                tag.style.left = left + 'px';
                tag.style.fontSize = fontSize + 'px';
                tag.style.opacity = op;
                tag.innerText = '+1';
                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.fontSize = fontSize + 'px';
                    tag.style.opacity = op;
                    //当透明度为0时,删除定时器和tag
                    if(op <= 0){
                        clearInterval(interval);
                        ths.parentElement.removeChild(tag);
                        var new_num = parseInt(obj.innerText)+1;
                        obj.innerText = new_num;
                    }
                },50);
            }
        </script>
    </body>
    </html>
    点赞
  • 相关阅读:
    每秒处理请求数和并发的关系
    oracle查看表空间及大小
    Oracle 备份还原
    ABOUT BENJAMIN HARDY, PHD
    ServiceActivationException when auto-starting WCF services with AutofacServiceHostFactory
    Welcome Enterprise Skills Initiative
    How to quickly delete all html objects in Excel?
    How does SQLParameter prevent SQL Injection?
    Is it necessary to add a @ in front of an SqlParameter name?
    VS Code Python 全新发布
  • 原文地址:https://www.cnblogs.com/charliedaifu/p/10149238.html
Copyright © 2011-2022 走看看