js中DOM

 

dom获取节点的方法

1，document.getElementById(通过id获取节点)

2，document.getElementsByName(通过元素的name属性获取节点【伪数组】)

3，document.getElementsByClassName(通过class获取节点【伪数组】)

4，document.getElementsByTagName(通过元素标签获取节点【伪数组】)

5，document.querySelect(通过选择器获取节点)

6，document.querySelectAll(通过选择器获取一组节点【伪数组】)

操作属性的方法

1，el.getAttribute(属性名)【获取标签上的属性】

2，el.setAttribute(属性名称，属性值)【设置自定义属性】

3，el.removeAttribute(属性名)【删除自定义属性】

4，el.attributes【获取该元素上的所有属性】

dom的操作方法

1，document.createElement(标签名称)【创建元素节点】

2，父元素.appendChild(子节点)【追加元素节点】

3，父元素.removeChild(子节点)【删除元素节点】

4，父元素.insertBefore(新节点，旧节点)【插入元素节点】

5，父元素.replaceChild(新节点,旧节点)【替换元素节点】

6，元素.cloneNode(true|false)【克隆元素节点】

参数为true 克隆当前元素的所有

参数为false 只克隆当前元素的元素标签

默认为 false

7，碎片整理：document.createDocumentFragment()

一个容器，为了避免create多次添加创建而将需要添加创建的节点对象，集合到一起，一次性进行添加创建。

8，创建文本节点对象：document.createTextNode(文本内容)

9，父元素或者父节点下所有子元素的数量：childElementCount

10，父元素或者父节点下所有的子节点：childNodes

11，父元素下的所有的子元素：children

12，当前标签元素上所有类名的集合：classList

13，当前标签元素的类名：className

14，当前元素的宽高，包含填充，不包含边框线：clientWidth、clientHeight

15，当前元素的边框线：clientLeft、clientTop

16，当前元素的宽高，包含填充和边框线：offsetWidth、offsetHeight

17，相对偏移量（左和上）：offsetLeft、offsetTop

18，当前标签元素的内容可编辑的状态：contentEditable

19，当前标签元素是否可拖拽：draggable

20，父元素下的第一个和最后一个子节点：firstChild、lastChild

21，父元素下的第一个和最后一个子元素：firstElementChild、lastElementChild

22，当前元素是否隐藏：hidden

23，当前标签元素内所有的内容，包含标签：innerHTML

24，当前标签元素内所有的文本内容：innerText、textContent

25，包含当前标签元素本身：outHTML

26，下一个兄弟节点：nextSibling

27，下一个兄弟元素：nextElementSibling

28，上一个兄弟节点：previousSibling

29，上一个兄弟元素：previousElementSibling

30，父节点和父元素：parentNode、parentElement

31，当前元素的行内样式对象：style

32，获取元素的标签名称：tagName、nodeName 【大写的标签名称】

 

Select的属性

1，SelectedIndex：被选中选项的下标

2，SelectedOptions： 被选中的多个Option标签元素的集合

 

table的属性：

1，tHead   获取表格头部

2，tFoot   获取表格底部

3，tBodies   获取表格里面所有的tBody

4，Cells   获取的是一行里的所有的td

5，Rows   获取当前元素下的所有行

6，rowIndex   每行的下标

7，cellIndex   每列的下标

 

事件：

事件：是用户和浏览器之间交互的桥梁，而且是javascript跳动的心脏

事件流：事件捕获、事件冒泡

事件捕获就是从最不具体的元素到最具体元素捕获，从外向里

事件冒泡就是从最具体的元素到最不具体的元素冒泡，从内向外

事件对象：

IE : window.event

非IE:事件的执行函数里（形式参数）

 

阻止事件冒泡：属于事件对象.

IE：事件对象.cancelBubble 属性：true false

非IE：事件对象.stopPropagation()

 

事件代理（事件委托）：把同类型的事件委托到其父辈元素上，利用的就是事件冒泡的原理

 

目标元素的获取：

IE：事件对象.srcElement

非IE：事件对象.target

 

事件的默认行为：

IE：事件对象.returnValue false true

非IE：事件对象.preventDefault()

 

DOM0级事件、DOM2级事件（了解）：

DOM0级事件：同一元素上同类型的事件只执行一个

DOM2级事件：同一元素上同类型的事件能执行多个

 

DOM0级事件的添加：

元素.on+事件名称 = function(){}

DOM0级事件的删除：

元素.on+事件名称 = null

 

DOM2级事件的添加：

IE：元素.attachEvent ( on + 事件名称 ，函数 )

非IE：元素.addEventListener ( 事件名称 ，函数 ，是否支持事件捕获 )

DOM2级事件的删除：

IE：元素.detachEvent ( on + 事件名称 ，函数 )

非IE：元素.removeEventListener ( 事件名称 ，函数 ，false )

 

函数：同时支持DOM 0级和DOM 2级事件的添加的兼容函数

function addEvent ( ele,eventName,fn ){

If ( ele.attachEvent ){

ele.attachEvent( “on”+eventName,fn );

}else if ( ele.addEventListener ){

ele.addEventListener ( eventName,fn,false )

}else {

ele[ “on”+eventName ]=fn;

}

}

函数：同时支持DOM 0级和DOM 2级事件的删除的兼容函数

function removeEvent ( ele,eventName,fn ){

If ( ele.detachEvent ){

ele.detachEvent( “on”+eventName,fn );

}else if ( ele.removeEventListener ){

ele.removeEventListener ( eventName,fn,false )

}else {

ele[ “on”+eventName ]=null;

}

}

 

事件类型：

DOM0级事件：on+事件名称

鼠标事件：

1. click  鼠标点击事件
2. dblclick  鼠标双击事件
3. mousedown  鼠标按下事件
4. mouseup  鼠标按键被弹起事件
5. mouseover  鼠标滑过事件
6. mouseout  鼠标滑出事件
7. mouseenter  光标首次滑过
8. mouseleave  鼠标离开事件
9. mouseMove  鼠标指针在元素内部移动时重复触发

mouseover、mouseout和mouseenter、mouseleave区别：前者支持事件冒泡，后者不支持事件冒泡

事件触发顺序：

mousedown=》mouseup=》click=》mousedown=》mouseup=》click=》dbclick

 

 

键盘事件：

1. keydown  当用户按下键盘上任意键时触发
2. Keypress  按下字符键时触发  Esc键也会触发

1. Keyup  当用户释放键盘上的键时触发

html事件：

1. load  文档载入时执行，仅在body和frameset中有效
2. focus  元素获取焦点
3. blur  元素失去焦点
4. change  元素改变
5. submit  表单被提交
6. reset  表单被重置
7. select  元素被选中
8. resize  页面尺寸被更改时，浏览器窗口的最小化和最大化也会触发resize事件