DOM操作-DOM操作大全

    Python编程 wuya 120次浏览 已收录 0个评论

    • DOM简介

      • DOM:Document Object Model,即文档对象模型
      • DOM操作:将HTML文档中的元素当做JS中的对象进行操作
      • 常用DOM操作:元素的增删改查、事件处理、属性修改
      • window对象相当于浏览器中打开的窗口,window.document对象相当于整个文档
      • JS中属性的命名都是小驼峰风格,如:backgroundColor

      元素查找

      • 函数及功能
        函数 功能
        getElementById 根据ID查找,返回单个元素
        getElementsByClassName 根据class查找,返回一个数组
        getElementsByTagName 根据标签名查找,返回一个数组
        getElementsByName 根据name属性查找,返回一个数组

      基本事件

      • 事件及说明
        事件 说明
        onclick 单击
        ondblclick 双击
        onfocus 获取焦点
        onblur 失去焦点
        onmouseover 鼠标移入
        onmouseout 鼠标移出

      获取样式

      • 示例:
        var oDiv = document.getElementsByTagName('div')[0]
        // 只能获取行内样式
        // console.log(oDiv.style.width)
        // 可以获取任意样式
        console.log(getComputedStyle(oDiv).width)
        console.log(getComputedStyle(oDiv)['width'])

      定时器

      • 说明:所谓定时器其实就是让计算机在指定的时间做指定的事情。
      • 分类:
        • 一次性定时器:设定一个时间,指定一件事,时间到做指定的事,之后销毁
          • 设置:var timer = setTimeout(函数, 时间),时间的单位是毫秒
          • 清除:clearTimerout(timer),清除操作不会打断定时任务的执行
        • 周期性定时器:设定一个时间,指定一件事,时间到做指定的事。然后循环
          • 设置:var timer = setInterval(函数, 时间),时间的单位是毫秒
          • 清除:clearInterval(timer),清除操作不会打断定时任务的执行
      • 注意:
        • 定时器函数中的this不是设置时的对象,而是window,可以通过绑定进行解决

      window

      • 事件
        事件 说明
        onload 页面加载完成
        onresize 窗口尺寸改变
        onscroll 窗口发生滚动
      • 属性
        属性 说明
        innnerWidth 窗口宽度(包括滚动条)
        innerHeight 窗口高度(包括滚动条)
        document 文档对象
      • document
        属性|方法 说明
        title 文档标题
        write 向文档中写内容
        documentElement 相当于body元素
      • document.documentElement
        属性 说明
        clientWidth 窗口宽度(不包括滚动条)
        cilentHeight 窗口高度(不包括滚动条)
        scrollLeft 水平滚动距离
        scrollTop 垂直滚动距离

        documentElement是H5标准写法,非H5标准使用body

      • 效果:飘舞的小球
        • 练习:添加光标移入小球停止飘舞,离开后继续进行飘舞

      元素关联查找

      • 说明:根据已知元素,在文档树种进行关联查找
      • 示例:
        var yawen = document.getElementById('yawen')
                
        // 前一个同胞
        var prev = yawen.previousElementSibling || yawen.previousSibling
        
        // 下一个同胞
        var next = yawen.nextElementSibling || yawen.nextSibling
        
        // 父级元素
        var parent = yawen.parentNode
        
        // 子元组
        var children = parent.children
        
        // 叔叔级元素(可以连续查找)
        var uncle = yawen.parentNode.nextElementSibling
        
        // 第一个子元素
        var first_child = parent.firstElementChild
        
        // 最后一个子元素
        var last_child = parent.lastElementChild
        
        console.log(last_child.innerText)

      添加与删除

      • 添加元素
        function append()
        {
            // 创建一个li元素
            var oLi = document.createElement('li')
            // 创建文档节点
            var textNode = document.createTextNode('金水区')
            // 将文本节点追加到li元素
            oLi.appendChild(textNode)
            // 找到ul
            var zhengzhou = document.getElementById('zhengzhou')
            // 追加子元素
            zhengzhou.appendChild(oLi)
        }
        
        function insert()
        {
            var oLi = document.createElement('li')
            oLi.innerText = '中原区'
        
            var zhengzhou = document.getElementById('zhengzhou')
            // 在指定的元素前面插入元素
            zhengzhou.insertBefore(oLi, zhengzhou.children[0])
        }
      • 删除元素
        var btn = document.getElementsByTagName('button')[0]
                
        btn.onclick = function () {
            // 创建input
            var oInput = document.createElement('input')
            oInput.type = 'file'
            // 创建按钮
            var oButton = document.createElement('button')
            oButton.innerText = '删除'
            // 添加点击事件
            oButton.onclick = function(){
                // 找到父级元素
                var parent = this.parentNode
                // 找到祖父及元素
                var grand = parent.parentNode
                // 祖父元素删除父元素
                grand.removeChild(parent)
            }
            // 创建div
            var oDiv = document.createElement('div')
            oDiv.appendChild(oInput)
            oDiv.appendChild(oButton)
            // 将div追加到body
            document.body.appendChild(oDiv)
        }

      事件冒泡

      • 说明:当下层元素和上层元素支持同一事件,上层事件触发下层事件也触发,称为事件冒泡。
      • 取消事件冒泡:在上层的事件处理函数中使用ev.cancelBubble = true
      • 事件源元素:就是事件触发的元素,获取:ev.srcElement

    学海无涯 , 版权所有丨如未注明 , 均为原创丨转载请注明DOM操作-DOM操作大全
    喜欢 (0)
    发表我的评论
    取消评论
    表情 加粗 删除线 居中 斜体 签到

    Hi,您需要填写昵称和邮箱!

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址