javascript（DOM常用方法）

---

title: javascript（DOM常用方法）
date: 2017-06-01 10:31:19
tags: javascript笔记

---

DOM操作的一些常用属性和方法

元素节点的nodeType是1

属性节点的nodeType是2

文本节点的nodeType是3

节点的获取

childNodes：获取某个元素下的所有子节点，包含文本节点和元素节点。

children：获取某个元素下的所有元素子节点。

nextElementSibling：获取元素的下一个兄弟元素节点。

previousElementSibling：获取元素的上一个兄弟元素节点。

firstElementChild：获取元素下的第一个元素子节点。

lastElementChild：获取元素下的第一个元素子节点。

parentNode：获取元素的父节点。

nodeValue：查看节点的属性值。

nodeName：查看节点的属性名。

nodeType：查看节点的类型。

属性的获取和设置

offsetParent：获取最近有定位属性的祖先节点。如果没有直接获取body。

offsetLeft：左外边框到有定位的最近的父级元素的内边框的距离。不带px单位。父级没有带定位的就是到body的距离。

offsetTop：上外边框到有定位的最近的父级元素的内边框的距离。不带px单位。父级没有带定位的就是到body的距离。

getAttribute()：获取元素的行内设置的属性值。参数是属性名。

setAttribute()：设置元素的行内设置的属性值。参数是属性名和属性值。

removeAttribute()：删除元素的行内设置的属性值。参数是属性名。

getBoundingClientRect()： 当前元素距离body的四个方向的距离和宽高的对象。获取的值会随着页面滚动位置而改变。值是不带单位的。

clientWidth：获取元素不计算边框的宽度。document.documentElement.clientWidth是浏览器窗口可是区域的宽度。

clientHeight：获取元素不计算边框的高度。document.documentElement.clientHeight是浏览器窗口可是区域的高度。

offsetWidth：获取元素计算边框的宽度。

offsetHeight：获取元素计算边框的高度。

操作节点

document.createElement()：创建一个元素节点，参数是元素的名称，字符串格式。

appendChild()：将一个元素节点添加到另一个元素节点的最后，格式为父节点.appendChild(要添加的节点)。

insertBefore()：将一个元素节点添加到一个元素节点的指定子节点的前面。格式为父节点.insertBefore(要添加的节点,添加到这个节点之前)，假如第二个参数是不存在的，节点将会添加到父节点的最后。

removeChild()：删除一个指定的元素子节点，如果指定的节点找不到会报错。格式为父节点.removeChild(要删除的节点)。

replaceChild()：替换一个元素节点，格式是父节点.replaceChild(要添加的节点,被替换的节点)。

cloneNode()：克隆一个元素节点，默认只会克隆节点本身，不会克隆它的子节点，如果要将这个节点下的所有子节点也都克隆需要传参数true，格式为要克隆的节点.cloneNode(true)。

appendChild()、insertBefore()、replaceChild()在操作一个已有元素时，是将已有元素移动，而不是复制一份进行操作。

操作表格

对于表格的操作javascript提供了一些简单的获取方式。

假设table是已经获取到的表格元素。

table.tHead：获取表格头部。

table.tFoot：获取表格底部。

table.tBodies：获取表格主体。

table.tBodiesn.rows[n]：获取表格的行，就是tr。

table.tBodiesn.rows[n].cells[n]：获取单元格，就是td。