[JavaScript知识库]javascript中DOM操作

文档对象模型

• 文档：document
• 元素：element
• 节点：（标签、属性、文本、注释等）node

获取页面元素：(typeof都是object)

• document.getElementById(‘id’)
• document.getElementsByTagName(‘标签名’)[0]：兼容性最强
• document.getElementsByClassName(‘class’)[0]：不兼容低版本IE
• document.querySelector(‘选择器’);
• document.querySelectorAll(‘选择器’);
• document.body：body
• document.documentElement：html
• 打印返回元素对象的属性和方法：console.dir()

事件基础：（触发响应的机制）

• 事件是三部分组成：
  • 事件源：事件被触发的对象（按钮）
  • 事件类型：如果触发（click）
  • 事件处理程序：通过函数赋值的方式 完成
• 常见的鼠标事件：
  • onclick：点击
  • onmouseover：移入
  • onmouseout：移除
  • onfocus：获取焦点
  • onblue：失去焦点
  • onmousemove：鼠标移动
  • onmouseup：鼠标弹起
  • onmousedown：按下

操作属性：

• eleument.innerHTML：获取事件源（识别HTML标签）（w3c）
• eleument.innerText：获取事件源文本（不识别HTML标签）（非标准）
• 表单：value、type、checked、selected、disabled
• 样式：style、className
• 获取元素属性：
  • element.属性（内置属性）
  • element.getAttribute(‘属性’)（自定义属性）
  • element.setAttribute(‘属性’,‘值’)（自定义属性）
• 自定义属性：H5
  • 规范自定义属性：“data-index”
  • 获取dataset.index

节点操作：

• nodeType：节点类型
  • 元素节点：nodeType为1
  • 属性节点: nodeType为2
  • 文本节点：nodeType为3（包括文字、空格、换行）
• nodeName：节点名称
• nodeValue：节点值

获取节点：

• 父节点：parentNode
• 子节点：childNodes
• 第一个子节点：firstChild
• 最后一个子节点：lastChild
• 下一个兄弟节点：nextSibling
• 上一个兄弟节点：previousSibling

获取元素节点：

• 子元素节点：children(非标准)
• 第一个子元素节点：firstElementChild（兼容性）
• 最后一个子元素节点：lastElementChild（兼容性）
• 下一个兄弟元素节点：nextElementSibling
• 上一个兄弟元素节点：previousElementSibling

自己封装一个：

function getNextElementSibling(element){
    let el = element;
    while(el = el.nextSibling){
        if(el.nodeType === 1){
            return el;
        }
    }
    return null;
}

创建节点：

• document.createElement(‘标签’)：创建节点
• document.createTextNode(‘text’)：创建节点
• node.appendChild(child)：元素后面添加
• node.insertBefore(child,‘添加到谁的前面’)：元素前添加

删除节点：

• ndoe.removeChild(child)：删除子节点
• remove(node)：自杀

复制节点：

• cloneNode(bool):
  • bool == true：深拷贝
  • bool == false：浅拷贝

三种动态创建元素的区别：

• document.write：是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面重绘全部重绘
• innerHTML：是将内容写入某个DOM节点，不会导致页面全部重绘
• innerHTML：创建多个元素效率更高（不要采取字符串拼接，采取数组形式拼接），结构稍微复杂
• createElement：创建多个元素效率稍微低一点点，但是结构更加清晰

常用

• 获取元素name：getElementsByName(elementName: DOMString)
• 获取元素：getElementsByTagName(localName: DOMString)
• 获取元素属性：getAttribute(name: DOMString)
• 设置元素属性：setAttribute(name: DOMString, value: DOMString)
• 访问子节点：childNodes()
• 访问父节点：parentNode()
• 创建元素节点：createElement(localName: DOMString)
• 创建文本节点：createTextNode(data: DOMString)
• 在元素后面插入节点：insertBefore(node: Node, child: Node)
• 删除节点：removeChild(child: Node)
• 网页尺寸：offsetHeight:document.body.offsetHeight || document.documentElement.offsetHeight
• 网页尺寸：scrollHeight
• 文档片段：let flag = document.createDocumentFragment();

元素尺寸

偏移尺寸

function getElementLeft(element) { 
   let actualLeft = element.offsetLeft; 
   let current = element.offsetParent; 
   while (current !== null) { 
     actualLeft += current.offsetLeft; 
     current = current.offsetParent; 
   } 
	 return actualLeft;
}

客户端尺寸

与偏移尺寸一样，客户端尺寸也是只读的，而且每次访问都会重新计算。

document.documentElement

滚动尺寸

function scrollToTop(element) { 
 if (element.scrollTop != 0) { 
 element.scrollTop = 0; 
 } 
}

确定元素尺寸

getBoundingClientRect()

事件高级

创建事件的方式：

• 传统方式：
  • 利用on开头的事件onclick
  • <button onclick="alter('1')"></button>
  • js代码：btn.onclick = function(){}
  • 特定：注册事件的唯一性
  • 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面的注册事件
• 方法监听注册方式：
  • w3c 标准 推荐
  • addEventListener(‘事件名称’, function, 是否捕获) 方法
  • IE9之前不支持此方法，可使用attachEvent(‘on事件名称’,function)代替

/**
 * @function addEventListener 封装注册事件
 * @param {*} element 事件源
 * @param {*} eventName 事件类型
 * @param {*} Fn 事件处理程序 function
 */
function addEventListener(element, eventName, Fn) {
    // 判断当前浏览器是否支持addEventListener 方法 
    if(element.addEventListener){
        element.addEventListener(eventName, Fn, false);
    }else if(element.attachEvent){
        element.attachEvent('on' + eventName, Fn);
    }else{
        element[on + 'eventName'] = Fn;
    }
}

删除事件：

• btn.onclick = null
• removeEventListener(‘移除事件名称’, 移除的方法, 是否捕获)：里面的移除的方法不需要加()
• datachEvent(‘on移除事件名称’, 移除的方法)

/**
 * @function addEventListener 封装解绑事件
 * @param {Object} element 事件源
 * @param {EventTarget} eventName 事件类型
 * @param {Function} Fn 事件处理程序
 */
function removeEventListener(elementm, eventName, Fn){
    if(element.removeEventListener){
        element.removeEventListener(eventName, Fn, false)
    }else if(element.datachEvent){
        element.datachEvent('on' + eventName, Fn);
    }else{
        element[on + 'eventName'] = null;
    }
}

DOM事件流：

事件流描述的是从页面中接受事件的顺序

事件发生时会在元素节点之间按照的顺序传播，这个传播过程为DOM事件流

3个阶段：

1. 捕获阶段（从外往里触发事件）
2. 当前目标阶段
3. 冒泡阶段（从里往为触发事件）

注意：

1. js代码中只能执行捕获或者冒泡其中的一个阶段
2. onclick 和 attachEvent 只能得到捕获
3. addEventListener的第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false(或者不写默认为false)，表示在事件冒泡阶段调用事件处理程序
4. 事件开发中我们很少使用事件捕获，我们更关注事件冒泡
5. 有些事情是没有冒泡，比如onfocus、onblur、onmouseeter、onmouseleave
6. 事件冒泡有时候会带来麻烦，有时候会帮助我们很巧妙的做某些事情

事件对象

node.onclick = function(event) {
    var e = e || window.event;
    var target = e.target || e.srcElement;
}

1. event 就是一个事件对象，写到我们的监听函数里面小括号里面的形参
2. 事件对象只有有了事件才会存在，这是监听自带的，不需要我们创建
3. 事件对象 是我们事件的一系列相关数据的集合
4. 这个事件我们可以直接命名
5. 事件对象也有兼容性问题：ie用window.event

常见属性和方法：

• target：返回触发事件对象（标准）
• srcElement：返回触发事件对象（IE）
• type：返回事件类型
• stopPropagation()：阻止冒泡（标准）
• cancelBubble：阻止冒泡（IE）
• preventDefault()：阻止默认事件（标准）
• returnValue：阻止默认事件（IE）
• return false：没有兼容性问题也可以阻止默认事件

/**
 * @function stopPropagation 封装阻止冒泡事件
 * @param {Object} e event对象
 */
function stopPropagation(e){
    if(e && e.stopPropagation){
        e.stopPropagation();
    }else{
        window.event.cancelBubble = true;
    }
}

事件委托

事件委托也称为事件代理，在jQuery中称为数据委源

事件委托的原理：

不是每个值节点单独设置事件监听，而是事件监听设置在器父节点上，然后利用冒泡原理影响设置每个节点

var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function (e) {
    if(e.target.tagName === 'LI'){
        console.log(e.target)
    }
}

用户界面事件

• load：在 window 上当页面加载完成后触发，在窗套（<frameset>）上当所有窗格（<frame>）

  都加载完成后触发，在<img>元素上当图片加载完成后触发，在<object>元素上当相应对象加

  载完成后触发。

• unload：在 window 上当页面完全卸载后触发，在窗套上当所有窗格都卸载完成后触发，在

  <object>元素上当相应对象卸载完成后触发。

• abort：在<object>元素上当相应对象加载完成前被用户提前终止下载时触发。

• error：在 window 上当 JavaScript 报错时触发，在元素上当无法加载指定图片时触发，

  在<object>元素上当无法加载相应对象时触发，在窗套上当一个或多个窗格无法完成加载时

  触发。

• select：在文本框（<input>或 textarea）上当用户选择了一个或多个字符时触发。

• resize：在 window 或窗格上当窗口或窗格被缩放时触发。

• scroll：当用户滚动包含滚动条的元素时在元素上触发。元素包含已加载页面的滚动条

焦点事件

• blur：当元素失去焦点时触发。这个事件不冒泡，所有浏览器都支持
• focus：当元素获得焦点时触发。这个事件不冒泡，所有浏览器都支持。
• focusin：当元素获得焦点时触发。这个事件是 focus 的冒泡版。
• focusout：当元素失去焦点时触发。这个事件是 blur 的通用版。

当焦点从页面中的一个元素移到另一个元素上时，会依次发生如下事件。

• (1) focuscout 在失去焦点的元素上触发。

• (2) focusin 在获得焦点的元素上触发。

• (3) blur 在失去焦点的元素上触发。

• (4) DOMFocusOut 在失去焦点的元素上触发。

• (5) focus 在获得焦点的元素上触发。

• (6) DOMFocusIn 在获得焦点的元素上触发。

• 其中，blur、DOMFocusOut 和 focusout 的事件目标是失去焦点的元素，而 focus、DOMFocusIn和 focusin 的事件目标是获得焦点的元素。

鼠标事件

• mouseenter：鼠标经过自身盒子会触发，经过子盒子也会触发
• mouseenter：在用户把鼠标光标从元素外部移到元素内部时触发
• mousemove：在目标区域移动
• mouseleave：移除
• click：单击
• dblclick：在用户双击鼠标主键（通常是左键）时触发
• mousedown：在用户按下任意鼠标键时触发
• mouseup：弹上
• contextmenu(一般用来取消右键菜单)

禁止鼠标右键

document.addEventListener('contextmenu', function(e){
    e.preventDefault();
})

禁止选择文本

document.addEventListener('contextmenu', function(e){
    e.preventDefault();
})

鼠标事件对象：

• e.clientX：返回鼠标相对于浏览器窗口可视区的x坐标
• e.clientY：返回鼠标相对于浏览器窗口可视区的y坐标
• e.pageX：返回鼠标相对于文档页面的x坐标 兼容性
• e.pageY：返回鼠标相对于文档页面的y坐标 兼容性
• e.screenX：返回鼠标相对于电脑屏幕的x坐标
• e.screenY：返回鼠标相对于电脑屏幕的y坐标

客户端坐标

// 鼠标事件的客户端坐标
let div = document.getElementById("myDiv"); 
div.addEventListener("click", (event) => { 
 console.log(`Client coordinates: ${event.clientX}, ${event.clientY}`); 
});

页面坐标

// 鼠标事件的页面坐标
let div = document.getElementById("myDiv"); 
div.addEventListener("click", (event) => { 
 let pageX = event.pageX, 
 pageY = event.pageY; 
 if (pageX === undefined) { 
 pageX = event.clientX + (document.body.scrollLeft || 
 document.documentElement.scrollLeft); 
 } 
 if (pageY === undefined) { 
 pageY = event.clientY + (document.body.scrollTop || 
 document.documentElement.scrollTop); 
 } 
 console.log(`Page coordinates: ${pageX}, ${pageY}`); 
});

屏幕坐标

let div = document.getElementById("myDiv"); 
div.addEventListener("click", (event) => { 
 console.log(`Screen coordinates: ${event.screenX}, ${event.screenY}`); 
});

键盘事件

• onkeyup：某个键盘按键被松开时触发
• onkeydown：某个键盘按键被按下时触发
• onkeypress：某个键盘按键被按下时触发（不识别功能键：shift）

键盘事件对象：

• e.keyCode
  

HTML5 事件

• contextmenu：Windows 95 通过单击鼠标右键为 PC 用户增加了上下文菜单的概念

• beforeunload 事件会在 window 上触发，用意是给开发者提供阻止页面被卸载的机会

• readystatechange 事件：IE 首先在 DOM 文档的一些地方定义了一个名为 readystatechange 事件。这个有点神秘的事件旨在提供文档或元素加载状态的信息，但行为有时候并不稳定。支持 readystatechange 事件的每个对象都有一个 readyState 属性，该属性具有一个以下列出的可能的字符串值。

• uninitialized：对象存在并尚未初始化。

• loading：对象正在加载数据。

• loaded：对象已经加载完数据。

• interactive：对象可以交互，但尚未加载完成。

• complete：对象加载完成。

• HTML5 增加了 hashchange 事件，用于在 URL 散列值（URL 最后#后面的部分）发生变化时通知

  开发者：onhashchange 事件处理程序必须添加给 window，每次 URL 散列值发生变化时会调用它。event

  对象有两个新属性：oldURL 和 newURL。这两个属性分别保存变化前后的 URL，而且是包含散列值的

  完整 URL

触摸及手势事件

• touchstart：手指放到屏幕上时触发（即使有一个手指已经放在了屏幕上）。

• touchmove：手指在屏幕上滑动时连续触发。在这个事件中调用 preventDefault()可以阻止

  滚动。

• touchend：手指从屏幕上移开时触发。

• touchcancel：系统停止跟踪触摸时触发。文档中并未明确什么情况下停止跟踪。

  这些事件都会冒泡，也都可以被取消。尽管触摸事件不属于 DOM 规范，但浏览器仍然以兼容 DOM

  的方式实现了它们。因此，每个触摸事件的 event 对象都提供了鼠标事件的公共属性：bubbles、

  cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、

  ctrlKey 和 metaKey。

• touches：Touch 对象的数组，表示当前屏幕上的每个触点。

• targetTouches：Touch 对象的数组，表示特定于事件目标的触点。

• changedTouches：Touch 对象的数组，表示自上次用户动作之后变化的触点

每个 Touch 对象都包含下列属性。

• clientX：触点在视口中的 x 坐标。
• clientY：触点在视口中的 y 坐标。
• identifier：触点 ID。
• pageX：触点在页面上的 x 坐标。
• pageY：触点在页面上的 y 坐标。
• screenX：触点在屏幕上的 x 坐标。
• screenY：触点在屏幕上的 y 坐标。
• target：触摸事件的事件目标。

开发者涨薪指南

48位大咖的思考法则、工作方式、逻辑体系