• DOM初级篇


    DOM是什么、作用、与javascript?

    DOM是对HTML文档的访问和操作,对文档的增删改查。

    DOM相当于是javascript一个类,这个类中提供了多种操作HTML的方法,也可以说DOM是依附在JavaScript上进行操作的。

    一、标签的查找命令;

      1.Node 与 Element的区别: node中有text文档  Element 只有标签元素。

      2.间接查找是建立在有一个标签的基础上对他的父级,子级,兄弟级标签的查找。

      直接查找:

        document.getElementById()             返回带有指定 ID 的元素

        document.getElementsByName()      根据name的值获取标签集合

        document.getElementsByClassname  根据类名获取标签集合

        document.getElementByTagName      根据标签名获取标签集合

      间接查找:

        parentNode         父节点

        childNodes              所有子节点

        firstChild             第一个子节点

        lastChild        最后一个子节点   

        nextSibling      下一个兄弟节点

        previousSibling        上一个兄弟节点

        parentElement         父亲标签

        children            所有孩子标签

        firstElementChild         第一个孩子标签

        lastElementChild          最后一个孩子标签

        nextElementSibling       下一个兄弟标签

        previousElementSibling   上一个兄弟标签

    二、对Html文档的操作

    1、标签内容进行增删改;

      innerText         获取和设置指定标签下所以的文本内容    如:(I love you  You Know?)

      outerText     获取和设置指定标签本身所以的文本内容

      innerHTML       获取和设置指定标签下所有文本+HTML     如:( I love you<hr>You Know?)     

      outerHTML    获取和设置对象的标签本身所有文本+HTML

      value               获取和设置value

    2、对标签属性进行增删改

      attributes           获取标签的所以属性  

      attributes[name].value      获取和设置name的值

      setAttribute(key,value)      指定一个存在的key   设置值。

      getAttribute(key)      获取指定key的值

      createAttribute:仅建立一个属性  (不会使用)

      removeAttribute:删除一个属性

    3、对标签中的class 进行操作

      className(cls)        获取和设置类名

      classList.remove(cls)   删除一个指定值

      classList.add(cls)        增加一个指定的值

    4、插入新标签

      1.创建  

        方式一

          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>"

      2.添加到Html中

         obj.appendChild(tag)

    5、样式操作

      var obj = document.getElementById("i1")

      obj.style.fontSize = "32px"

      obj.style.backgroundColor = "red"

    6、位置(实例返回顶部)

    主要思路:  获取滑轮的位置值(document.body.scrollTop)--> 设置滑轮的值为0,代表返回顶部。--> 加个判断条件  隐藏或显示 Top图标;

    注意:onscroll=func()   只能放在  body标签内,代表滑轮一滚动就执行一次该函数;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                margin: 0;
            }
            .c1{
                height: 2000px;
                background-color: #dddddd;
            }
            .c2{
                width: 40px;
                height: 40px;
                background-color: gray;
                color: white;
                position: fixed;
                right: 10px;
                bottom: 10px;
                text-align: center;
                line-height: 40px;
                cursor: pointer;
            }
            .hide{
                display: none;
            }
        </style>
    </head>
    <body onscroll="Tops()">    //必须写在body上面
        <div class="c1">
            看到你了
        </div>
        <div id="c2" class="c2 hide" onclick="Top()">
            TOP
        </div>
    
        <script>
            function Tops() {
                var Tops = document.body.scrollTop;   //获取滑轮的位置值
                if(Tops > 50){
                    document.getElementById("c2").classList.remove("hide")
                }
                else{
                    document.getElementById("c2").classList.add("hide")
                }
            }
            function Top() {
                document.body.scrollTop = 0      //获取并设置滑轮的位置的值
            }
    
        </script>
    </body>
    </html>
    返回顶部实例

    7.事件

      事件就是当用户点击或者滚动页面时,就会执行某个函数。

      注意参数this的使用  

       

     三、其他

      1.定时器

        setInterval                 多次定时器

      

  • 相关阅读:
    2014年7月 记事
    从客户端中检测到有潜在危险的Request.Form值 的解决方法
    jquery parent() parents() closest()区别
    不包含适合于入口点的静态"Main"方法
    JQuery移除事件
    jQ的toggle()方法示例
    codeforces hello2018 D Too Easy Problems
    HDU-6084 寻找母串
    51Nod 1109 01组成N的倍数
    可重排列
  • 原文地址:https://www.cnblogs.com/learn-python-M/p/6941439.html
Copyright © 2020-2023  润新知