zoukankan      html  css  js  c++  java
  • 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                 多次定时器

      

  • 相关阅读:
    【leetcode】1020. Partition Array Into Three Parts With Equal Sum
    【leetcode】572. Subtree of Another Tree
    【leetcode】123. Best Time to Buy and Sell Stock III
    【leetcode】309. Best Time to Buy and Sell Stock with Cooldown
    【leetcode】714. Best Time to Buy and Sell Stock with Transaction Fee
    【leetcode】467. Unique Substrings in Wraparound String
    【leetcode】823. Binary Trees With Factors
    【leetcode】143. Reorder List
    【leetcode】1014. Capacity To Ship Packages Within D Days
    【leetcode】1013. Pairs of Songs With Total Durations Divisible by 60
  • 原文地址:https://www.cnblogs.com/learn-python-M/p/6941439.html
Copyright © 2011-2022 走看看