#操作 DOM 常规意义上的 操作DOM, 就是增删改查 1. 创建 (创建完成之后, 页面并不会有) 2. 增删改查

1.1 创建 元素节点
    var myLi = document.createElement('li')
1.2 创建文本节点
    var myStr = document.createTextNode('123')
    myLi.appendChild(myStr)

    console.log(myLi)           //<li>123</li>

2.1 增加dom(添加到指定父节点的最后)
    oUl.appendChild(myLi)

2.2 增加dom(添加到指定父节点的最后)  语法; 父节点.insertBefore(要插入的新节点, 插入到那个节点前(传递Null的话是插入到父节点最后))
    oUl.insertBefore(myLi, null)

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

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

4. 修改某一个节点    父节点.replaceChild(新的节点, 要被修改的节点)
    oUl.replaceChild(myLi, oLi)

克隆DOM

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var oUl = document.querySelector('ul')
    var oLi = document.querySelector('li')

    oUl.appendChild(oLi)    // 把原本的 li 从原本的位置, 移动到父节点的最后 2 3 1

    复制(克隆)一个 LI
    想要复制的节点.cloneNode(参数布尔值)
    参数 false 不克隆子节点     默认
    参数 true 克隆子节点
    var newLi = oLi.cloneNode(true)
    console.log(newLi)
    oUl.appendChild(newLi)  // 1  2  3  1
</script>

获取元素偏移量

1. 获取元素相对父级      元素.offsetParent
    console.log(子级.offsetParent)

2. 获取元素的偏移量
    console.log('子级.offsetLeft', 子级.offsetLeft)
    console.log('子级.offsetTop', 子级.offsetTop)

3.获取元素尺寸(占地面积)
    1. offsetXXX         ---> 实际宽度 + padding + border
    console.log('oDiv.offsetWidth', oDiv.offsetWidth)
    console.log('oDiv.offsetHeight', oDiv.offsetHeight)

    console.log('======================')

    2. clientXXX         ---> 实际宽度 + padding
    console.log('oDiv.clientWidth', oDiv.clientWidth)
    console.log('oDiv.clientHeight', oDiv.clientHeight)

4.获取浏览器窗口尺寸
    //1. window.innerXXX   ---> 计算时 会包含浏览器的滚动条
    console.log('window.innerWidth', window.innerWidth)
    console.log('window.innerHeight', window.innerHeight)

    // 2. document.documentElement.clientXXX    ---> 计算时 不会计算滚动条(只计算浏览器的可视区域)
    console.log('document.documentElement.clientWidth', document.documentElement.clientWidth)
    console.log('document.documentElement.clientWidth', document.documentElement.clientHeight)

事件

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

事件的三要素
    1. 事件源
    2. 事件类型
    3. 事件处理函数

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

DOM 2级事件绑定(事件监听)     事件源.addEventListener('事件类型', 事件处理函数, 第三个参数是可选的)

oDiv.onclick = function () {
    console.log('111')
}
oDiv.onclick = function () {
    console.log('222')
}                               //打印222

oDiv.addEventListener('click', function () {
    console.log('111')
})

oDiv.addEventListener('click', function () {
    console.log('222')
})                              //打印111  222

滚动事件

<script>
    // 1. 滚动事件

    // var oDiv = document.querySelector('div')
    // console.log(oDiv)            // null

    window.onload = function () {
        // 当 页面 所有资源加载完毕时 执行
        var oDiv = document.querySelector('div')
        console.log(oDiv)           //111
    }
</script>
<div>111</div>

鼠标事件

// 1. 左键单击
事件源.onclick = function () {
    console.log('单击元素时触发')
}

// 2. 双击事件      300ms 内连续点击两次鼠标
事件源.ondblclick = function () {
    console.log('双击元素时触发')
}

// 3. 右键事件      鼠标右键单击
事件源.oncontextmenu = function () {
    console.log('鼠标右键单击时触发')
}

// 4. 鼠标按下事件      鼠标左键按下的时候会触发的(哪怕鼠标没有抬起)
事件源.onmousedown = function () {
    console.log('鼠标按下时触发')
}

// 5. 鼠标抬起事件      鼠标左键抬起的时候会触发的
事件源.onmouseup = function () {
    console.log('鼠标抬起时触发')
}

// 6. 鼠标移入事件      鼠标的移动到元素内部时触发
事件源.onmouseover = function () {
    console.log('onmouseover 鼠标移入时触发')
}

// 7. 鼠标移出事件      鼠标移动出元素内部时触发
事件源.onmouseout = function () {
    console.log('onmouseout 鼠标移出时触发')
}

// 8. 鼠标移动事件          鼠标在元素内部移动时触发
事件源.onmousemove = function () {
    // console.log('鼠标移动时触发')
}

// 9. 鼠标移入事件2
事件源.onmouseenter = function () {
    console.log('onmouseenter 鼠标移入事件2')
}

// 10. 鼠标移出事件2
事件源.onmouseleave = function () {
    console.log('onmouseleave 鼠标移出事件2')
}

// onmouseover onmouseout 两个方法 移入元素和移入元素子盒子时都会触发
// onmouseenter onmouseleave 两个方法 只会在移入元素时触发

键盘事件

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

// 1. 键盘抬起事件
document.onkeyup = function () {
    console.log('键盘按键抬起')
}

// 2. 键盘按下事件
document.onkeydown = function () {
    console.log('键盘某个按键被按下')
}

// 3. 键盘按下抬起事件
document.onkeypress = function () {
    console.log('键盘按下抬起时触发')
}

表单事件

文本框: <input type="text" id="inp">
<script>
// 表单事件
var inp = document.querySelector('#inp')


// 1. 获得焦点事件
inp.onfocus = function () {
    console.log('当前文本框获得焦点')
}

// 2. 失去焦点事件
inp.onblur = function () {
    console.log('当前文本框失去焦点')
}

// 3. 文本框内容改变时触发
inp.onchange = function () {
    console.log('当前文本框内容被更改')
}

// 4. 文本框输入内容时触发
inp.oninput = function () {
    console.log('当前文本框正在输入内容')
}

事件对象

当事件触发时, 携带一些信息
当前时间的事件源是谁?
鼠标点击的位置在哪里(点击事件)
键盘按下了那个按键(键盘事件)

事件源.onclick = function (e) {
    console.log(e)
}

获取鼠标位置

事件源.onclick = function (e) {
    // 1. 获取 相对于 事件源 的鼠标坐标点
    console.log('====================================')
    console.log('相对于事件源 X 轴', e.offsetX)
    console.log('相对于事件源 Y 轴', e.offsetY)

    // 2. 获取相对于 页面 的坐标点
    console.log('====================================')
    console.log('相对于页面的 X 轴', e.pageX)
    console.log('相对于页面的 Y 轴', e.pageY)

    // 3. 获取相对于 浏览器窗口 的坐标点
    console.log('====================================')
    console.log('相对于浏览器窗口的 X 轴', e.clientX)
    console.log('相对于浏览器窗口的 Y 轴', e.clientY)
}

键盘按键

e.key ===> 返回按下的按键
<input type="text" id="inp">

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