前端学习记录之Javascript-DOM

简介

为了快捷方便，在工作和项目中，一直都是使用的框架，比如jqeruy，vuejs，react等。然后在长时间使用框架后，往往有一个后遗症，就是对于原生的Javascript基本上已经不知道怎么写了（这是我个人情况，大神们肯定不是的）。

因此，最近一段时间，本人都是在重新温习原生的Javascript，发现好多知识点都已经遗忘了；做为一个想往上进步的前端程序猿，这肯定是不行的。所以，在这里梳理一下，最近复习的一些知识点。

DOM 操作

DOM 是 Document Object Model （文档对象模型）的缩写；HTML DOM 定义了所有HTML元素的对象和属性，以及访问他们的方法。换言之，HTML DOM是关于如何获取、修改、添加、或者删HTML元素的标准。

HTML DOM 节点树

在HTML DOM中，所有事物都是节点，DOM是被视为节点树的HTML。

• 整个文档是一个文档节点
• 每个HTML元素是元素节点
• HTML元素内的文本是文本节点
• 每个HTML属性是属性节点
• 注释是注释节点

节点的关系构成

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

通俗一点讲：父级关系，子级关系，兄弟关系。

• 在节点树中，顶端节点被称为根（root）
• 每个节点都有父节点、除了根（它没有父节点）
• 一个节点可拥有任意数量的子
• 同胞是拥有相同父节点的节点

节点操作

节点类型（nodeType）

节点类型 | nodeType
---- | ----
元素节点 |1
document | 9
文本节点 | 3
注释节点 | 8
属性节点 |2

节点的查找操作

节点操作	操作解释
nodeNam	查看节点的属性名
nodeValue	查看节点的属性值
attributes	查看节点的属性
childNodes	获取某个节点的所有子节点(包括文本节点和注释节点)
children	获取某个元素下的所有的元素子节点(不包括文本节点和注释节点)
firstElementChild	查找某个元素的第一个子节点
lastElementChild	查找某个元素的最后一个节点
parentNode	查找某个元素的父节点
nextElementSibling	查找某个元素的下一个兄弟节点
prevElementSibling	查找某个元素的上一个兄弟节点
offsetParent	最近的有定位的属性的祖先节点，如果所有的祖先都没定位，那么默认body

节点的增删操作

节点操作	操作解释	注释
document.createElement()	创建元素节点	document.createElement('li')
appendChild()	向父级节点末尾插入元素节点	oUl.appendChild(li)
insertBefore()	在指定的子节点前面插入新的子节点。	oUl.insertBefore(newLi,oldLi)
removeChild()	删除父级中的某个元素	oUl.removeChild(oldLi)
replaceChild()	替换父级中的某个元素	oUl.replaceChild(newLi,oldLi)

节点的属性操作

节点操作	操作解释	注释
getAttribute()	获取元素属性的属性值	oDiv.getAttribute('name')
setAttribute()	设置元素属性的属性值	oDiv.setAttribute('name','div')
removeAttribute()	删除元素的某个属性	oDiv.removeAttribute('name')
innerHTML	读取修改元素内的所有代码	读：ODiv.innerHTML 、写：ODiv.innerHTML = ''
className	动态添加class	oDiv.className = 'active'

获取节点的距离与宽高

操作	操作解释	注释
offsetWidth/offsetHeight	获取元素的宽高	计算边框与padding，不计算margin
clientWidth/clientHeight	获取元素的宽高	不计算边框与margin，计算padding
offsetLeft	元素的左外边框到有定位父级的左内边框的距离	如果所有的祖先都没定位，那么默认body
offsetTop	元素的上外边框到有定位父级的上内边框的距离	如果所有的祖先都没定位，那么默认body

关于表格的操作

操作	解释
table.tHead	获取表格头部
table.rows	获取tr
table.tFoot	获取表格底部
table.tBodies	获取表格主体
rows[i].cells	获取td

事件

event（事件） 对象

event事件对象，当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存都一个指定的地方，供我们调用

兼容：
    ie/chrom ：event 是一个内置全局对象
    火狐 ：event是事件函数的第一个传入参数
    function(ev){
        var ev = ev || event
    }

对象属性
    clientX / clientY：鼠标相对于可视区的位置
事件冒泡
    当一个元素接收到事件的时候，会吧它接受到的所有传播给它的父级，一直当顶层window
    阻止冒泡：
        event.cancelBubble = true;
给同一个对象绑定多个不同的函数
    ie：obj.attachEvent('onclick',function);
        1、没有捕获
        2、this指向是window
        3、标准是正序，其余是倒序
    标准：obj.addEventListener('click',function,false);
        1、有事件捕获
        2、this指向当前对象
        3、执行时正序
        4、事件没有on
 取消绑定事件：
    标准：obj.removeEventListener(事件名，事件函数，是否捕获)；
    ie：obj.detachEvent('onclick',function);
call方法：函数下的一个方法
    call方法第一个参数可以改变函数执行过程中的指向
键盘事件：
    onkeydown：当键盘按下的时候触发，如果不抬起，那么会连续触发
    onkeyup：当键盘抬起的时候触发
    event.keyCode :数字型，键盘的键值
        ctrlKey，shiftKey，altKey  布尔值
事件默认行为：
    当一个事件发生的时候，浏览器自己会默认做的事件
阻止默认行为：
    a、return  false；
右键菜单：
    oncontextmenu

焦点事件

onfocus ：获取焦点
onblur ： 失去焦点
obj.focus() :给指定的元素设置焦点
obj.blur()：取消指定元素的焦点
obj.select()

原文 http://blog.hawkzz.com/2017/06/11/前端学习记录之Javascript-DOM/　　作者 hawk_zz