• DOM


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

    一、查找元素

    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  // 上一个兄弟标签元素
    

    二、操作

    1、内容

    innerText   文本
    outerText
    innerHTML   HTML内容
    innerHTML  
    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])
    

    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>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body style="margin: 0;">
        <div style="height: 900px;">
    
        </div>
        <div style="padding: 10px;">
            <div id="i1" style="height:190px;padding: 2px;border: 1px solid red;margin: 8px;">
                    <p>asdf</p>
                    <p>asdf</p>
                    <p>asdf</p>
                    <p>asdf</p>
                    <p>asdf</p>
            </div>
        </div>
    
        <script>
            var i1 = document.getElementById('i1');
    
            console.log(i1.clientHeight); // 可见区域:height + padding
            console.log(i1.clientTop);    // border高度
            console.log('=====');
            console.log(i1.offsetHeight); // 可见区域:height + padding + border
            console.log(i1.offsetTop);    // 上级定位标签的高度
            console.log('=====');
            console.log(i1.scrollHeight);   //全文高:height + padding
            console.log(i1.scrollTop);      // 滚动高度
            console.log('=====');
    
        </script>
    </body>
    </html>
    
    test
    text
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
    
        body{
            margin: 0px;
        }
        img {
            border: 0;
        }
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
    
        .wrap{
            width: 980px;
            margin: 0 auto;
        }
    
        .pg-header{
            background-color: #303a40;
            -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            box-shadow: 0 2px 5px rgba(0,0,0,.2);
        }
        .pg-header .logo{
            float: left;
            padding:5px 10px 5px 0px;
        }
        .pg-header .logo img{
            vertical-align: middle;
            width: 110px;
            height: 40px;
    
        }
        .pg-header .nav{
            line-height: 50px;
        }
        .pg-header .nav ul li{
            float: left;
        }
        .pg-header .nav ul li a{
            display: block;
            color: #ccc;
            padding: 0 20px;
            text-decoration: none;
            font-size: 14px;
        }
        .pg-header .nav ul li a:hover{
            color: #fff;
            background-color: #425a66;
        }
        .pg-body{
    
        }
        .pg-body .catalog{
            position: absolute;
            top:60px;
            width: 200px;
            background-color: #fafafa;
            bottom: 0px;
        }
        .pg-body .catalog.fixed{
            position: fixed;
            top:10px;
        }
    
        .pg-body .catalog .catalog-item.active{
            color: #fff;
            background-color: #425a66;
        }
    
        .pg-body .content{
            position: absolute;
            top:60px;
            width: 700px;
            margin-left: 210px;
            background-color: #fafafa;
            overflow: auto;
        }
        .pg-body .content .section{
            height: 500px;
        }
    </style>
    <body onscroll="ScrollEvent();">
    <div class="pg-header">
        <div class="wrap clearfix">
            <div class="logo">
                <a href="#">
                    <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
                </a>
            </div>
            <div class="nav">
                <ul>
                    <li>
                        <a  href="#">首页</a>
                    </li>
                    <li>
                        <a  href="#">功能一</a>
                    </li>
                    <li>
                        <a  href="#">功能二</a>
                    </li>
                </ul>
            </div>
    
        </div>
    </div>
    <div class="pg-body">
        <div class="wrap">
            <div class="catalog">
                <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
                <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
                <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
            </div>
            <div class="content">
                <div menu="function1" class="section">
                    <h1>第一章</h1>
                </div>
                <div menu="function2" class="section">
                    <h1>第二章</h1>
                </div>
                <div menu="function3" class="section">
                    <h1>第三章</h1>
                </div>
            </div>
        </div>
    
    </div>
        <script>
            function ScrollEvent(){
                var bodyScrollTop = document.body.scrollTop;
                if(bodyScrollTop>50){
                    document.getElementsByClassName('catalog')[0].classList.add('fixed');
                }else{
                    document.getElementsByClassName('catalog')[0].classList.remove('fixed');
                }
    
            }
        </script>
    </body>
    </html>
    
    Demo-滚动固定
    Demo-滚动固定
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
    
        body{
            margin: 0px;
        }
        img {
            border: 0;
        }
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        h1{
            padding: 0;
            margin: 0;
        }
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
    
        .wrap{
            width: 980px;
            margin: 0 auto;
        }
    
        .pg-header{
            background-color: #303a40;
            -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            box-shadow: 0 2px 5px rgba(0,0,0,.2);
        }
        .pg-header .logo{
            float: left;
            padding:5px 10px 5px 0px;
        }
        .pg-header .logo img{
            vertical-align: middle;
            width: 110px;
            height: 40px;
    
        }
        .pg-header .nav{
            line-height: 50px;
        }
        .pg-header .nav ul li{
            float: left;
        }
        .pg-header .nav ul li a{
            display: block;
            color: #ccc;
            padding: 0 20px;
            text-decoration: none;
            font-size: 14px;
        }
        .pg-header .nav ul li a:hover{
            color: #fff;
            background-color: #425a66;
        }
        .pg-body{
    
        }
        .pg-body .catalog{
            position: absolute;
            top:60px;
            width: 200px;
            background-color: #fafafa;
            bottom: 0px;
        }
        .pg-body .catalog.fixed{
            position: fixed;
            top:10px;
        }
    
        .pg-body .catalog .catalog-item.active{
            color: #fff;
            background-color: #425a66;
        }
    
        .pg-body .content{
            position: absolute;
            top:60px;
            width: 700px;
            margin-left: 210px;
            background-color: #fafafa;
            overflow: auto;
        }
        .pg-body .content .section{
            height: 500px;
            border: 1px solid red;
        }
    </style>
    <body onscroll="ScrollEvent();">
    <div class="pg-header">
        <div class="wrap clearfix">
            <div class="logo">
                <a href="#">
                    <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
                </a>
            </div>
            <div class="nav">
                <ul>
                    <li>
                        <a  href="#">首页</a>
                    </li>
                    <li>
                        <a  href="#">功能一</a>
                    </li>
                    <li>
                        <a  href="#">功能二</a>
                    </li>
                </ul>
            </div>
    
        </div>
    </div>
    <div class="pg-body">
        <div class="wrap">
            <div class="catalog" id="catalog">
                <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
                <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
                <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
            </div>
            <div class="content" id="content">
                <div menu="function1" class="section">
                    <h1>第一章</h1>
                </div>
                <div menu="function2" class="section">
                    <h1>第二章</h1>
                </div>
                <div menu="function3" class="section">
                    <h1>第三章</h1>
                </div>
            </div>
        </div>
    
    </div>
        <script>
            function ScrollEvent(){
                var bodyScrollTop = document.body.scrollTop;
                if(bodyScrollTop>50){
                    document.getElementsByClassName('catalog')[0].classList.add('fixed');
                }else{
                    document.getElementsByClassName('catalog')[0].classList.remove('fixed');
                }
    
                var content = document.getElementById('content');
                var sections = content.children;
                for(var i=0;i<sections.length;i++){
                    var current_section = sections[i];
    
                    // 当前标签距离顶部绝对高度
                    var scOffTop = current_section.offsetTop + 60;
    
                    // 当前标签距离顶部,相对高度
                    var offTop = scOffTop - bodyScrollTop;
    
                    // 当前标签高度
                    var height = current_section.scrollHeight;
    
                    if(offTop<0 && -offTop < height){
                        // 当前标签添加active
                        // 其他移除 active
                        var menus = document.getElementById('catalog').children;
                        var current_menu = menus[i];
                        current_menu.classList.add('active');
                        for(var j=0;j<menus.length;j++){
                            if(menus[j] == current_menu){
    
                            }else{
                                menus[j].classList.remove('active');
                            }
                        }
                        break;
                    }
    
                }
    
    
            }
        </script>
    </body>
    </html>
    
    Demo-滚动菜单
    Demo-滚动菜单
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
    
        body{
            margin: 0px;
        }
        img {
            border: 0;
        }
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        h1{
            padding: 0;
            margin: 0;
        }
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
    
        .wrap{
            width: 980px;
            margin: 0 auto;
        }
    
        .pg-header{
            background-color: #303a40;
            -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            box-shadow: 0 2px 5px rgba(0,0,0,.2);
        }
        .pg-header .logo{
            float: left;
            padding:5px 10px 5px 0px;
        }
        .pg-header .logo img{
            vertical-align: middle;
            width: 110px;
            height: 40px;
    
        }
        .pg-header .nav{
            line-height: 50px;
        }
        .pg-header .nav ul li{
            float: left;
        }
        .pg-header .nav ul li a{
            display: block;
            color: #ccc;
            padding: 0 20px;
            text-decoration: none;
            font-size: 14px;
        }
        .pg-header .nav ul li a:hover{
            color: #fff;
            background-color: #425a66;
        }
        .pg-body{
    
        }
        .pg-body .catalog{
            position: absolute;
            top:60px;
            width: 200px;
            background-color: #fafafa;
            bottom: 0px;
        }
        .pg-body .catalog.fixed{
            position: fixed;
            top:10px;
        }
    
        .pg-body .catalog .catalog-item.active{
            color: #fff;
            background-color: #425a66;
        }
    
        .pg-body .content{
            position: absolute;
            top:60px;
            width: 700px;
            margin-left: 210px;
            background-color: #fafafa;
            overflow: auto;
        }
        .pg-body .content .section{
            height: 500px;
            border: 1px solid red;
        }
    </style>
    <body onscroll="ScrollEvent();">
    <div class="pg-header">
        <div class="wrap clearfix">
            <div class="logo">
                <a href="#">
                    <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
                </a>
            </div>
            <div class="nav">
                <ul>
                    <li>
                        <a  href="#">首页</a>
                    </li>
                    <li>
                        <a  href="#">功能一</a>
                    </li>
                    <li>
                        <a  href="#">功能二</a>
                    </li>
                </ul>
            </div>
    
        </div>
    </div>
    <div class="pg-body">
        <div class="wrap">
            <div class="catalog" id="catalog">
                <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
                <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
                <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
            </div>
            <div class="content" id="content">
                <div menu="function1" class="section">
                    <h1>第一章</h1>
                </div>
                <div menu="function2" class="section">
                    <h1>第二章</h1>
                </div>
                <div menu="function3" class="section" style="height: 200px;">
                    <h1>第三章</h1>
                </div>
            </div>
        </div>
    
    </div>
        <script>
            function ScrollEvent(){
                var bodyScrollTop = document.body.scrollTop;
                if(bodyScrollTop>50){
                    document.getElementsByClassName('catalog')[0].classList.add('fixed');
                }else{
                    document.getElementsByClassName('catalog')[0].classList.remove('fixed');
                }
    
                var content = document.getElementById('content');
                var sections = content.children;
                for(var i=0;i<sections.length;i++){
                    var current_section = sections[i];
    
                    // 当前标签距离顶部绝对高度
                    var scOffTop = current_section.offsetTop + 60;
    
                    // 当前标签距离顶部,相对高度
                    var offTop = scOffTop - bodyScrollTop;
    
                    // 当前标签高度
                    var height = current_section.scrollHeight;
    
                    if(offTop<0 && -offTop < height){
                        // 当前标签添加active
                        // 其他移除 active
    
                        // 如果已经到底部,现实第三个菜单
                        // 文档高度 = 滚动高度 + 视口高度
    
                        var a = document.getElementsByClassName('content')[0].offsetHeight + 60;
                        var b = bodyScrollTop + document.documentElement.clientHeight;
                        console.log(a+60,b);
                        if(a == b){
                            var menus = document.getElementById('catalog').children;
                            var current_menu = document.getElementById('catalog').lastElementChild;
                            current_menu.classList.add('active');
                            for(var j=0;j<menus.length;j++){
                                if(menus[j] == current_menu){
    
                                }else{
                                    menus[j].classList.remove('active');
                                }
                            }
                        }else{
                            var menus = document.getElementById('catalog').children;
                            var current_menu = menus[i];
                            current_menu.classList.add('active');
                            for(var j=0;j<menus.length;j++){
                                if(menus[j] == current_menu){
    
                                }else{
                                    menus[j].classList.remove('active');
                                }
                            }
                        }
    
    
    
    
                        break;
                    }
    
                }
    
    
            }
        </script>
    </body>
    </html>
    
    Demo-滚动高度
    Demo-滚动高度

    7、提交表单

    document.geElementById('form').submit()
    

    8、其他操作

    console.log                 输出框
    alert                       弹出框
    confirm                     确认框  #是否要删除?
      
    // URL和刷新
    location.href               获取URL  #获取当前URL
    location.href = "url"       重定向    #根跳转差不多
    location.reload()           重新加载
      
    // 定时器
    setInterval                 多次定时器
    clearInterval               清除多次定时器
    setTimeout                  单次定时器
    clearTimeout                清除单次定时器  //删除创建的对象

     

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

    • this
    • event
    • 事件链以及跳出

    this标签当前正在操作的标签,event封装了当前事件的内容

     绑定事件一:

    <div id="il" onclick="func(this,event,123);">点我</div>
    
    <script>
        function func(a,b,c) {
            //a --> 当前被点击的标签对象
            //b --》监听当前事件相关的信息,例如键盘上哪个键
            //c --> 用户传的参数
        }
    </script>

    绑定事件二:

    <script>
      document.getElementById("il").onclick=function (event) {
            //...
        };
        document.getElementById("il").onclick=function (event) {
            //...
        };
    </script>//同一个标签的同一个事件只能被绑定一次

    绑定事件三

    <div id="il">点我</div>
    
    <script>
                document.getElementById("il").addEventListener("click",function () {
                console.log(111)
            });
            document.getElementById("il").addEventListener("click",function () {
                console.log(222)
            })
    </script>

     

  • 相关阅读:
    python之scrapy篇(三)
    python之scrapy篇(二)
    python之scrapy篇(一)
    matlib调用python时转py格式为matlib格式
    ubuntu18.40 rtx2080ti安装显卡驱动/cuda/cudnn/tensorflow-gpu
    pytorch导入错误so: undefined symbol: _Z11libshm_initPKc
    yolo_v3训练自己的模型(人脸及deep-sort)(或自己数据集)
    python-图像处理(映射变换)
    python编译pyc工程--导包问题解决
    python(leetcode)-14最长公共前缀
  • 原文地址:https://www.cnblogs.com/shizhengwen/p/6715068.html
Copyright © 2020-2023  润新知