JavaScript笔记-DOM编程（二）操作DOM

操作DOM

JavaScriptDOM操作的常用方法和属性
常用方法

获取节点：

document.getElementById(idName)          //通过id号来获取元素，返回一个元素对象
document.getElementsByName(name)       //通过name属性获取id号，返回元素对象数组
document.getElementsByClassName(className)   //通过class来获取元素，返回元素对象数组（ie8以上才有）
document.getElementsByTagName(tagName)       //通过标签名获取元素，返回元素对象数组

获取/设置元素的属性值：

element.getAttribute(attributeName)     //括号传入属性名，返回对应属性的属性值
element.setAttribute(attributeName,attributeValue)    //传入属性名及设置的值

创建节点Node：

document.createElement("h3")       //创建一个html元素，这里以创建h3元素为例
document.createTextNode(String); //创建一个文本节点；
document.createAttribute("class"); //创建一个属性节点，这里以创建class属性为例

增添节点：

element.appendChild(Node);   //往element内部最后面添加一个节点，参数是节点类型
elelment.insertBefore(newNode,existingNode); //在element内部的中在existingNode前面插入newNode

删除节点：

element.removeChild(Node)    //删除当前节点下指定的子节点，删除成功返回该被删除的节点，否则返回null

常用属性:
获取当前元素的父节点 ：

element.parentNode     //返回当前元素的父节点对象

获取当前元素的子节点：

element.chlidren        //返回当前元素所有子元素节点对象，只返回HTML节点
element.chilidNodes   //返回当前元素多有子节点，包括文本，HTML，属性节点。（回车也会当做一个节点）
element.firstChild      //返回当前元素的第一个子节点对象
element.lastChild       //返回当前元素的最后一个子节点对象

获取当前元素的同级元素：

element.nextSibling          //返回当前元素的下一个同级元素 没有就返回null
element.previousSibling   //返回当前元素上一个同级元素 没有就返回null

获取当前元素的文本：

element.innerHTML   //返回元素的所有文本，包括html代码
element.innerText     //返回当前元素的自身及子代所有文本值，只是文本内容，不包括html代码

获取当前节点的节点类型：

node.nodeType   //返回节点的类型,数字形式（1-12）常见几个1：元素节点，2：属性节点，3：文本节点。

设置样式：

element.style.color=“#eea”;      //设置元素的样式时使用style，这里以设置文字颜色为例`。

DOM的特性

element.attributes（）
返回元素的所有特性
element.getAttribute（）
返回元素指定的特性
element.setAttribute（）
设置元素指定的特性
element.removeAttribute（）
删除元素指定的特性

特性与属性的区别

理论上，特性(attribute)与属性(property)是两个不同的概念
**特性(attribute)**是DOM元素的子节点
**属性(property)**是DOM元素的特性映射到JS后对应对象的属性(property)。
实际使用中，可以忽略两者的区别（多数时候，id、name等可以，value特殊）

table对象

table为DOM元素中的一个特别对象，拥有一系列独有的属性和方法

tableRow对象的属性和方法

tableCell对象的属性和方法

创建DOM对象

document.createElement(TagName)
创建一个元素节点
document.createTextNode(文本内容)
创建一个文本节点
element.appendChild(子节点)
向父元素末尾添加子节点

修改DOM对象

element.removeChild(子节点)
删除一个子节点
element.replaceChild(新节点,旧节点)
替换一个子节点
element.insertBefore(新节点, 已有节点)
在已有的子节点前插入一个新的子节点

本文部分内容来源网络，仅为学习使用