DOM2

爆炸小丸子
100 阅读4分钟

DOM

一.DOM操作的增删改查

  1. 创建(创建完成之后,页面不会有)
  2. 增删改查
  • 创建元素节点
var oLi=document.createElement('li')
  • 创建文本节点
 var myStr = document.createTextNode('222222222222222')
  myLi.appendChild(myStr)

  • 增加 DOM(添加到指定父节点的末位)

    语法: 父节点.appendChild()

  • 增加 DOM(添加到指定父节点的末位)

    语法: 父节点.insertBefore(要插入的新节点,插入到那个节点前(传递null是插入到父节点的最后))

  • 增加 DOM(添加到指定父节点的首位)

    语法: 父节点.insertBefore(要插入的新节点,父节点.firstElementChild)

//增加dom(添加到父节点的最前边)
oUl.insertBefore(myLi, oUl.firstElementChild)

  • 删除DOM

    语法: 父节点.removeChild(要删除的节点)

//删除DOM   父节点.removeChild(要删除的节点)
oUl.removeChild(oUl.firstElementChild)

  • 修改某一个节点

    语法: 父节点.replaceChild(新的节点, 要被修改的节点)

二.克隆DOM

  1. 想要复制的节点.cloneNode(参数是布尔值)
  2. 参数false不是克隆节点(默认)
  3. 参数true克隆节点
    var newLi = oLi.cloneNode(true)
     console.log(newLi)
     oUl.appendChild(newLi)

三.获取元素的偏移量

  1. 获取元素相对父级

    语法 : 元素.offsetParent

       // 1. 获取元素相对父级      元素.offsetParent
        console.log(box2.offsetParent)
        // 2. 获取元素的偏移量
        console.log('box2.offsetLeft', box2.offsetLeft)
        console.log('box2.offsetTop', box2.offsetTop)

四.获取元素尺寸与浏览器窗口尺寸

1.获取元素尺寸

offsetWidth元素. offsetWidth
offsetHeight元素. offsetHeight
实际宽度 + padding + border
clientWidth元素.clientWidth
clientHeight元素.clientHeight
实际宽度+padding

2.获取浏览器窗口尺寸

window.innerWidthwindow.innerXXX
window.innerHeightwindow.innerXXX
计算时 会包含浏览器的滚动条
document.documentElement.clientWidthdocument.documentElement.clientXXX
document.documentElement.clientWidthdocument.documentElement.clientXXX
计算时 不会计算滚动条(只计算浏览器的可视区域)

五.js事件

事件: 在某一个时刻,用户(在页面)做了某一件事,要给出反馈

  1. 事件的三要素

    • 事件源
    • 事件类型
    • 事件处理函数

2.DOM 0级绑定事件

  • 事件源.on+事件类型=事件处理函数
  • 弊端: 无法绑定多个同类型的事件,后边新写的事件,会覆盖原有的事件

3.DOM 2级事件绑定对象(事件监听)

  • 事件源.addEventListener('事件类型',事件处理函数,...)

六 .浏览器事件

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1. 滚动事件
​
        // var oDiv = document.querySelector('div')
        // console.log(oDiv)    // null
​
        window.onload = function () {
            // 当 页面 所有资源加载完毕时 执行
​
            var oDiv = document.querySelector('div')
            console.log(oDiv)
        }
    </script>
</head>
​
<body>
    <div>1111111</div>
</body>
​
</html>

七.鼠标事件

左键单击oDiv.onclick=function(){}
双击事件oDiv.ondblclick=function(){}
右键事件(鼠标右键单击)oDiv.oncontextmenu=function(){}
鼠标按下事件oDiv.onmousedown=function(){}
鼠标抬起事件oDiv.onmouseup=function(){}
鼠标移入事件oDiv.onmouseover=function(){}
鼠标移出事件oDiv.onmouseout=function(){}
鼠标移动事件oDiv.onmousemove=(unction(){}
鼠标移入事件2oDiv.onmouseenter=function(){}
鼠标移出事件2oDiv.onmouseleave=function(){}
onmouseover 和onmouseout 两个方法 移入元素和移入元素子盒子时都会触发
onmouseenter 和onmouseleave 两个方法 只会在移入元素时触发

八.键盘事件

document 或者 input
语法: document.on键盘事件的事件类型 = function () {}

键盘抬起事件document.onkeyup= function () {}
键盘按下事件document.onkeydown= function () {}
键盘按下抬起事件document.onkeypress= function () {}

九.表单事件

获取焦点元素.onfocus=function(){}
失去焦点元素.onblur=function(){}
文本框内容改变触发元素.onchange=function(){}
文本框输入内容是触发元素.oninput=function(){}

十.事件对象

  1. 当事件时,携带一些信息
  2. 当前时间的事件源是谁
  3. 鼠标点击的位置在哪里(点击事件)
  4. 键盘按下了那个按键(键盘事件)
  oDiv.onclick = function (e) {
            console.log(e)
        }

十一.获取鼠标位置

  1. 获取鼠标按下时的坐标

    • 相对于

      1. 事件源
      2. 页面
      3. 浏览器窗口
        var oDiv = document.querySelector('div')
​
        oDiv.onclick = function (e) {
            // 1. 获取 相对于 事件源 的鼠标坐标点
            console.log('相对于事件源 X 轴', e.offsetX)
            console.log('相对于事件源 Y 轴', e.offsetY)
​
            // 2. 获取相对于 页面 的坐标点
            console.log('相对于页面的 X 轴', e.pageX)
            console.log('相对于页面的 Y 轴', e.pageY)
​
            // 3. 获取相对于 浏览器窗口 的坐标点
            console.log('相对于浏览器窗口的 X 轴', e.clientX)
            console.log('相对于浏览器窗口的 Y 轴', e.clientY)
        }

十二.获取键盘按键

e.key ===> 返回按下的按键
e.keyCode ===> 返回按下的按键的进制码
    keyCode 已经被移除, 但是很多主流浏览器还支持使用

        var inp = document.querySelector('#inp')
        inp.onkeyup = function (e) {
            console.log(e)
            if (e.ctrlKey && e.key == 'a') {
                console.log('此时按下了 ctrl健 和 a键')
            }
         }

十三.事件传播事件

在触发子元素的事件时,会将行位传播给父级同类型事件
  触发子元素的点击事件时,会将该行位传播给父级,
 在传递行为时,会将行为一直向上传递,如果父级有同类型事件,那么触发该事件
 如果没有,则继续往上传递
 
 阻止事件传播:e.stopPropagation()

十四.目标冒泡捕获

目标:目标就是事件源
传播时:会从目标传播到父级,body,html.document,window
1.window默认的传播方式为冒泡
冒泡: 事件传播时,从目标开始传播,一直到父级,body,html.document,window
捕获: 从最顶层开始,逐层向下传递,一直到目标,window,document,html,body

十五.事件委托

因为事件冒泡的存在,所以点击子元素时,一定会触发给父级
所以可以将子元素,都提交给父元素
e.target:触发事件的事件源
​
总结:为什么要用事件委托
        动态的添加了li时,新家的li没有绑定上事件,需要动态添加完成后重新绑定事件,这样就比较麻烦,这时候就可以用事件委托
        li的点击事件必须委托给父级 点击事件

十六.阻止默认事件

<body>
    <a href="xxx">11111111</a>
    <script>
        var a = document.querySelector('a')
        a.onclick = function (e) {
​
            // 1. 方式1
            // console.log('点击了 a 标签, 但是因为有 return false 所以默认的跳转功能被拦截')
            // return false
​
            // 2. 通过事件对象拦截      preventDefault()    拦截之后, 取消了 a标签的默认跳转功能
            e.preventDefault()
        }
    </script>
</body>
avatar
文章
阅读
粉丝