元素节点 和 事件

1.节点的概念

# 页面中的所有元素都是节点。节点组成了一个完整的页面。
# 我们可以对节点进行各种操作：通过父子关系，兄弟关系进行一系列创建，插入，替换，删除，克隆等操作

2.节点的分类

# 标签： 元素节点
# 文本节点（包含了换行和空格）
# 属性节点 （href, title, src...）
	+ 不能通过父子关系或者兄弟关系获取
# 注释节点 (包含了换行和空格)

3.获取节点

// 获取所有子节点：dom.childNodes, 返回伪数组

// 获取属性节点： dom.attributes, 返回伪数组

// 通过父子关系后获取子节点
// 获取所有子元素节点 
// children(重点)
console.log(divEle.children);

// 获取第一个子节点
// firstChild
console.log(divEle.firstChild);
// 获取第一个子元素节点
// firstElemnetChild
console.log(divEle.firstElementChild);
// children[0]
console.log(divEle.children[0]);

// 获取最后一个子节点
// lastChild
console.log(divEle.lastChild);
// 获取最后一个子元素节点
// lastElementChild
console.log(divEle.lastElementChild);
// children[divEle.children.length - 1]
console.log(divEle.children[divEle.children.length - 1]);


// 通过兄弟关系获取节点
// 获取上一个兄弟节点
// previousSibling
console.log(divEle.previousSibling);
// 获取上一个元素兄弟节点。区别：以为节点之间包含了一个文本节点，换行符。空格都是节点。所以要元素阶段。加element
// previousElementSibling
console.log(divEle.previousElementSibling);

// 获取下一个兄弟节点
// nextSibling
console.log(divEle.nextSibling);
// 获取下一个元素兄弟节点
// nextElementSibling
console.log(divEle.nextElementSibling);


// 通过父子关系获取父级节点: 一般来说父级节点都是元素节点
// parentNode （重点，获取父亲）
// 注意：只能通过parentNode来逐级获取祖先节点
console.log(divEle.parentNode.parentNode.parentNode);

4.创建节点和插入节点

 # 创建节点
 var node = document.createElment('标签名')
 '注意：1. 节点创建好了，必须要插入，否则不会渲染在页面上； 2. 创建好的节点只能使用一次，后面的优先级更高'
 
 # 插入节点
 方式一： 父节点.appendChild(节点名)：往父节点的末尾插入节点
 
 方式二： 父节点.insertBefore('插入的节点', '在谁前面')

5.替换节点

# 父节点.replaceChild('换上的节点', '换下的节点')

 // 1. 获取元素
var divEle = document.querySelector('div')

// 2. 创建节点
var emEle = document.createElement('em')

// 3. 添加内容
emEle.innerHTML = '我是新创建的节点'

// 4. 替换节点 （替换最后一个子节点）
// replaceChild(换上的节点， 换下的节点)
divEle.replaceChild(emEle, divEle.children[divEle.children.length - 1])

6.删除节点

# 1. 删除子节点
	父节点.removeChild('子节点')

# 2. 删除自身（自杀）
	dom.remove()

 // 1. 获取元素
var divEle = document.querySelector('div')
var btn = document.querySelector('button')


btn.onclick = function () {
    // 2. 删除子节点
    // 父节点.removeChild('节点名')
    // divEle.removeChild(divEle.children[divEle.children.length - 1])

    // 3. 删除自己（自杀）
    divEle.remove()
}

7.事件

概念： 捕获用户的交互行为，并根据交互行为实现特定的交互效果

事件三要素：

1. 事件源： 谁绑定了事件（事件的绑定者）
2. 事件类型：比如点击鼠标，按下键盘等
3. 事件处理函数： 该事件所要达到的目的
   1. divEle.onclick = function() { console.log(1111) }

8.事件绑定的两种方式

// 绑定事件
// DOM0级事件（传统方式）
// 语法： dom.on+事件类型 = 事件处理函数
// 注意：通过传统方式给相同的dom节点绑定多个相同类型的事件，只会有最后一个生效
// divEle.onclick = function () {
//     // 代码块
//     console.log('传统方式1');
// }

// divEle.onclick = function () {
//     // 代码块
//     console.log('传统方式2');
// }

// DOM2级事件 (事件监听)
// 语法： dom.addEventListener('事件类型', function(){ // 代码块 })
// 注意：通过事件监听的方式给相同的dom节点绑定多个相同类型的事件，每个事件会依次触发
divEle.addEventListener('click', function () {
    console.log('事件监听函数1');
})

divEle.addEventListener('click', function () {
    console.log('事件监听函数2');
})

9.解绑事件的两种方式

# 解绑传统方式绑定的事件
dom.on+事件类型 = null

# 解绑事件监听绑定的事件
dom.removeEventListener('事件类型', 函数名)

10.鼠标事件

// 鼠标事件
        // click: 点击事件（点击一次鼠标左键触发）
        // divEle.addEventListener('click', function () {
        //     console.log('鼠标点击事件');
        // })

        // dblclick: 双击事件： 在300ms内连续点击鼠标左键两次时触发的事件
        // divEle.addEventListener('dblclick', function () {
        //     console.log('鼠标双击事件');
        // })

        // // contextmenu: 鼠标右键触发的事件
        // divEle.addEventListener('contextmenu', function () {
        //     console.log('鼠标右键事件');
        // })

        // mousedown 鼠标按下事件
        // divEle.addEventListener('mousedown', function () {
        //     console.log('按下了鼠标左键');
        // })

        // // mouseup: 鼠标弹起事件
        // divEle.addEventListener('mouseup', function () {
        //     console.log('松开了鼠标左键');
        // })

        // // mousemove: 鼠标移动事件
        // divEle.addEventListener('mousemove', function () {
        //     console.log('移动着鼠标');
        // })

        // mouseover: 鼠标移入事件
        divEle.addEventListener('mouseover', function () {
            console.log('移入了当前元素');
        })

        // mouseout: 鼠标移出事件
        divEle.addEventListener('mouseout', function () {
            console.log('移除了当前元素');
        })

        // mouseenter: 鼠标移入事件
        // divEle.addEventListener('mouseenter', function () {
        //     console.log('移入了当前元素');
        // })
        // // mouseleave: 鼠标移出事件
        // divEle.addEventListener('mouseleave', function () {
        //     console.log('移除了当前元素');
        // })

        // 注意：mouseover和mouseout支持子元素的移入移出事件； mouseenter和mouseleave不支持子元素的移入移出

11.键盘事件

 // 键盘事件：根据键盘操作行为触发的事件

        var inpEle = document.querySelector('input')

        // 1. keydown: 键盘按下事件
        // 注意：所有的按钮都支持该事件

        // inpEle.onkeydown = function () {
        //     console.log('按下了键盘');
        // }

        // 2. keyup: 键盘弹起事件
        // inpEle.onkeyup = function () {
        //     console.log('松开了键盘');
        // }

        // 3. keypress: 键盘键入事件
        // 注意：1. 按下了按键必须得出现真的内容
        // 注意：2. 按下的内容要和出现的内容一样
        // 注意：3. 支持回车键

        inpEle.onkeypress = function () {
            console.log('键盘键入事件');
        }

12.表单事件

 // 表单事件： 只有表单元素才能触发的事件
        var kuangEle = document.querySelector('.kuang')
        var textEle = document.querySelector('.text')
        var formEle = document.querySelector('form')
        var btn = document.querySelector('button')

        // change: 当表单元素的内容发生改变后才会触发的事件
        kuangEle.onchange = function () {
            console.log('切换了复选框的选中状态');
        }

        textEle.onchange = function () {
            console.log('输入框的值发生了改变');
        }

        // focus: 获取焦点事件
        textEle.onfocus = function () {
            console.log('你聚焦了我');
        }

        // blur: 失去焦点事件 （失焦的前提是必须有焦点）
        textEle.onblur = function () {
            console.log('失焦了哦');
        }

        // input: 输入事件（边输入边触发的事件）
        textEle.oninput = function () {
            console.log('输入事件');
        }

        // 表单提交事件（只能用给form表单标签）type = 'submit'会刷新表单，改为type = 'button'，则无刷新提交
        // submit: 表单提交事件
        btn.onclick = function () {
            formEle.onsubmit()
        }

13.触摸事件

  // 触摸事件： 当手指在移动端设备上触摸时，触发的事件
        var boxEle = document.querySelector('.box')
        // touchstart: 手指放到屏幕上
        boxEle.ontouchstart = function () {
            console.log('我要开始摸了');
        }

        // touchmove: 手指在屏幕上滑动
        boxEle.ontouchmove = function () {
            console.log('我正在摸');
        }

        // touchend: 手指离开屏幕
        boxEle.ontouchend = function () {
            console.log('我模完了');
        }