DOM文档对象模型

文档对象模型
DOM是js操作网页的接口。作用是将网页转换成一个js对象，可以通过脚本进行操作。
浏览器会根据DOM模型将HTML转换成节点，再由节点组成树状结构。

• 把文档看着一个模型
• 顶级对象是document
• 主要操作页面元素
• 是W3C标准规范

节点类型

Document: 整个文档树的顶层节点
DocumentType: doctype标签
Element: 网页的HTML标签
Attribute: 网页元素的属性（class、id ...）
Text: 标签之间或标签包含的文本
Comment: 注释
DocumentFragment: 文档片段

Node.nodeType属性
文档节点 Document: 9 , Node.DOCUMENT_NODE
元素节点 Element: 1 , Node.ELEMENT_NODE
属性节点 Attribute: 2 , Node.ATTRIBUTE_NODE
文本节点 Text: 3 , Node.TEXT_NODE
文档片段节点 DocumentFragment: 11 , Node.DOCUMENT_FRAGMENT_NODE

if(document.nodeType === Node.DOCUMENT_NODE){
    console.log('nodeType is 9')
}

Document

• 创建元素

1. document.write()
2. innerHTML
3. createElement

document.createElement('div');
document.createTextNode('hello);
document.createAttribute('id');

let text = document.createElement('p');
let content = document.createTextNode('world');
//appendChild 将内容或子元素放到容器中
text.appendChild(content);

let id = document.createAttribute('id');
id.value = 'root';
text.setAttribute(id);

• 增加元素

1. appendChild()
2. insertBefore()

• 删除元素

1. removeChild()

• 修改元素
  主要修改元素的dom属性，dom元素的属性、内容、表单的值
  1. 修改元素属性（src、herf、title）
  2. 修改普通元素内容 innerHTML 、innerText
  3. 修改表单元素（disabled、type、value）
  4. 修改元素样式（style、className）
• 查找元素
  1. DOM API：getElementById、getElementsByName、getElementsByClassName、getElementsByTagName
  2. H5提供的新方法：querySelector、querySelectorAll
  3. 利用节点操作获取元素：parentNode（父节点）、children（子节点）、previousElementSibling|nextElementSibling（兄弟节点）。
     children：只获取元素节点
     childNodes：包含所有的子节点，包含元素节点和文本节点(html标签之间的换行属于文本节点,ul li)
     firstChild：获取第一个节点，包含元素节点和文本节点
     lastChild：获取最后一个节点，包含元素节点和文本节点
     firstElementChild：获取第一个元素节点，有兼容性问题
     lastElementChild：获取最后一个元素节点，有兼容性问题
     children[0]：推荐写法，没有兼容性问题，又能获取到第一个元素节点
     children[children.length - 1]：获取到最后一个元素节点
     previousSibling：获取上一个兄弟节点，包含元素节点和文本节点
     nextSibling：获取下一个兄弟节点，包含元素节点和文本节点
     previousElementSibling：获取上一个兄弟元素节点，有兼容性问题
     nextElementSibling：获取下一个兄弟元素节点，有兼容性问题
  4. 获取body元素
     document.body
  5. 获取html元素
     document.documentElement
• 复制节点
  node.cloneNode(false|true) false：浅拷贝，只复制标签不复制内容 true：深拷贝，复制标签及内容

// dom api
document.getElementsByTagName
document.getElementsByClassName
document.getElementsByName
document.getElementById
// h5 api
document.querySelector('.center-box')
document.querySelectorAll('.center-box')
// node api
document.parentNode
document.children
document.nextSibling()
document.previousSibling()

• 属性操作
  1. setAttribute 设置属性
  2. getAttribute 获取属性
  3. removeAttribute 移除属性

let text = document.querySelector('div');
text.setAttribute()
text.getAttribute()
text.removeAttribute()

Element属性

js操作element的属性有id、className、classList、innerHTML 、 innerText

• classList的方法
  add() remove() contains() toggle()
• innerHTML和innerText的区别
  innerHTML 可以识别标签
  innerText 会把标签识别成字符串
• 获取元素位置
  image.png
  视口高度(屏幕高度)：document.documentElement.clientHeight
  页面高度(内容撑开的高度)：document.body.clientHeight

操作css

• html元素的style属性
• 元素节点的style属性
• cssText属性

let box = document.getElementById('box');
// 1. html元素的style属性
box.setAttribute("style","width:100px;height:100px");

//2. 元素节点的style属性
box.style.width = '200px';
box.style.backgroundColor = 'red';

// 3. cssText属性
box.style.cssText = "width:100px;height:100px"

事件

事件分类：HTML事件、DOM 0级事件、DOM 2级事件

• HTML事件

<button onclick="click">HTML事件</button>
<script>
    function click(){

    }
</script>

缺点：HTML和JS没有分开

• DOM 0级事件

<button id="btn">DOM 0级事件</button>
<script>
    let btn = document.getElementById('btn');
    btn.onclick = function(){
      // 该事件会被覆盖
    }
    btn.onclick = function(){

    }
</script>

优点：HTML与JS分离
缺点：同一事件添加多次会覆盖之前的事件

• DOM 2级事件

<button id="btn">DOM2级事件</button>
<script>
    let btn = document.getElementById('btn');
    btn.addEventListener('click',function(){
        console.log('点击了1')
    })
    btn.addEventListener('click',function(){
        console.log('点击了2')
    })
    // result 点击了1  点击了2
</script>

优点：事件不会被覆盖
缺点：书写麻烦

鼠标事件

• click: 按下鼠标时触发
• dbclick: 双击
• mousedown: 按下鼠标键时触发
• mouseup: 释放按下鼠标键时触发
• mousemove: 当鼠标在节点内部移动时触发，持续移动会连续触发
• mouseenter: 鼠标进入一个节点时触发，进入子节点不会触发
• mouseleave: 鼠标离开一个节点是触发，离开父节点不会触发
• mouseover: 鼠标进入一个节点时触发，进入子节点会再次触发
• mouseout: 鼠标离开一个节点时触发，离开父节点也会触发
• wheel: 滚动鼠标的滚轮时触发
• onfocus：获取到焦点时触发
• onblur：失去焦点时触发

鼠标事件Event事件对象

属性

• target
  返回事件当前所在节点
• type
  返回一个字符串，表示事件类型
  方法
• event.preventDefault() 阻止默认行为
  阻止浏览器对事件的默认行为。
  a标签点击会默认跳转，可以使用该方法阻止浏览器的默认行为-跳转。
  form表单提交按钮不提交
  传统方式注册事件阻止默认行为有三种方式

let button = document.querySelector('button');
    button.onclick = function(e){
        // 第一种
        e.preventDefault();// 常用方式
        // 第二种
        e.returnValue;// ie 6 7 8的属性
        // 第三种
        return false;// return后面的代码不会执行
    };

• event.stopPropagation() 阻止事件冒泡
  阻止事件冒泡
  传统注册方式阻止冒泡兼容性

let button = document.querySelector('button');
button.onclick = function(e){
     // 第一种
    e.stopPropagation();// 常用方式
    // 第二种
    e.cancelBubble = true;// ie 6 7 8的属性
};

• 鼠标指针坐标
  e.clientX：返回鼠标相对于浏览器窗口可视区的坐标 不会因页面滚动而有所变化
  e.clientY
e.pageX：返回鼠标相对于文档页面的坐标
  e.pageY
e.screenX：返回鼠标相对于电脑屏幕的坐标
  e.screenY

键盘事件

• keydown: 按下键盘时触发
• keypress: 按下有值的键时触发，按下Ctrl、Alt、Shift、Meta无值键不会触发。
• keyup: 按下时先触发keydown事件，再出发keyup事件

键盘事件Event事件对象

属性

• keyCode
  按键唯一标识

表单事件

• input事件：输入时触发，连续输入连续触发
• select事件：选中内容时触发
• change事件：修改完成之后触发，不会实时触发
• reset事件：重置表单
• submit事件：提交表单
  获取值：e.target.value

<html>
    <body>
        <form id="myForm" action="url" onsubmit="submitHandle">
            <input type="text" name="username">
            <button id="resetBtn">重置</button>
            <button>提交表单</button>
        </form>
    </body>
    <script>
        let resetBtn = document.getElementById("resetBtn")
        let myForm = document.getElementById("myForm")
        resetBtn.onclick = function(){
            myForm.reset();
        }
        function submitHandle(){
            // submit提交函数
        }
    </script>
</html>

事件委托（事件代理）

把子元素的事件交给父元素统一处理。
由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，不需要给每个子节点绑定事件。这种方式叫做事件的代理。
作用：只操作一次DOM，提高了性能

<html lang="en">
<body>
    <ul id="list">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <p>p元素</p>
    </ul>
</body>
<script>
    let ul = document.getElementById('list');
    // 给父节点 ul 添加事件
    ul.addEventListener('click',function(e){
        if(e.target.targetName.toLowerCase() === 'li'){
            console.log(`li标签触发事件: ${e.target.innerHTML}`)
        }
    })
</script>
</html>

移除事件

• 传统注册方式
  button.onclick = null;
• removeEventListener

button.addEventListener('click',fn)
button.removeEventListener('click',fn)
function fn(){
     // 点击事件回调函数
}

DOM事件流

页面接收事件的顺序，即事件的传播过程

• 三个阶段
  1. 捕获阶段
  2. 当前目标阶段
  3. 冒泡阶段

image.png image.png

1. JS代码中只能在执行捕获或者冒泡其中的一个阶段
2. onclick 和 attachEvent 只能的到冒泡阶段
3. addEventListener(type,linstenr[,useCapture]) 第三个参数如果是true，表示事件在捕获阶段调用事件处理程序；如果是false，表示在事件冒泡阶段调用事件处理程序。默认false
4. 有些事件没有冒泡阶段，如onfocus、onblur、onmouseenter、onmouseleave
5. 实际开发中很少使用事件捕获，主要使用事件冒泡

禁用鼠标右键和鼠标选中contextmenu、selectstart

// 禁用鼠标右键弹出菜单
    document.addEventListener('contextmenu',function(e){
        e.preventDefault();
    })
    // 禁止鼠标选中
    document.addEventListener('selectstart',function(e){
        e.preventDefault();
    })