js操作DOM元素

一、添加节点（元素）

创建节点：document.createElement(“p”);p或div

创建文本节点：document.createTextNode;(“这是文本内容”)

添加子元素：parent.appendChild(child);

在指定子节点前插入新的子节点：child.insertBefore(child);

创建属性节点：document.createAttribute();

克隆节点：cloneNode(deep);——deep是boolean值，默认是 false（只需要克隆节点及其后代）。true（克隆节点及其属性，以及后代）

 

二、删除html元素——首先要获取该元素的父元素

parent.removeChild(child);

 

三、获取节点（元素）

（1）通过id获取元素，得到的是object对象

document.getElementById(“nodeId”);

（2）通过标签名获取元素，得到的是一个数组，要通过[i]才能取得对应的元素

document.getElementsByTagName(“tagName”);

（3）通过类名来获取元素，同样得到的是一个数组

document.getElementByClassName(“className”);

（4）通过属性获取

firstChild——第一个子节点

lastChild——最后一个子节点

childNodes——父节点的所有子节点（返回一个数组）

parentNode——父节点

previousSibling——前一个节点

nextSibling——后一个节点（两个节点之前不能留有空格，否者使用nextSibling或previousSibling属性时，获取到的是空格）

document.documentElement——指html节点，全部文档

document.body——指body节点，文档的主体

 

支持的浏览器（IE9+,Firefox3.5+，Safari4+，Chrome，Opera10+）为DOM元素添加了下面的这些属性，这些元素不必担心空白文本节点：

childElementCount：返回子元素的个数（不包括本文节点和注释）

firstElementChild：指向第一个子元素；firstChild的元素版

lastElementChild：指向最后一个子元素；lastChild的元素版

previousElementSibling：指向前一个同辈元素；previousSibling的元素版

nextElementSibling：指向后一个同辈元素；nextSibling的元素版

 

四、替换子节点

replaceChild()

 

五、常用的html DOM属性：

innerHTML：节点（元素）的文本值，可以插入标签，像在ul元素中插入li

attributes：节点（元素）的属性节点

nodeName：节点的名称（只读属性）

• 元素节点的 nodeName 与标签名相同
• 属性节点的 nodeName 与属性名相同
• 文本节点的 nodeName 始终是 #text
• 文档节点的 nodeName 始终是 #document

 

nodeValue：节点的值

• 元素节点的 nodeValue 是 undefined 或 null
• 文本节点的 nodeValue 是文本本身
• 属性节点的 nodeValue 是属性值

 

nodeType：节点的类型（只读属性）

• 元素——1
• 属性——2
• 文本——3
• 注释——4
• 文档——5

 

六、DOM的尺寸属性

clientWidth——content+padding

offsetWidth——content+padding+border

七、判断oNode1节点是否包含oNode2节点（即oNode2节点是否是oNode1节点的子节点）

oNode1.contains(oNode2);返回布尔值