Dom节点和属性操作

DOM操作

一、访问/获取节点

• document.getElementById(id);//返回对拥有指定id的第一个对象进行访问

• document.getElementsByName(name);//返回带有指定名称的节点集合

• document.getElementsByTagName(tagname); //返回带有指定标签名的对象集合

• document.getElementsByClassName(classname); //返回带有指定class名称的对象集合

• querySelector()

• querySelecterAll()

二、创建节点/属性

• document.createElement() //创建一个节点
• document.createTextNode() // 创建文本节点
• document.createAttribute() //对某个节点创建属性

三、添加节点

• document.inseretBefore(nextNode,referenceNode) // 在某个节点前插入节点
• parentNode.appendChild(newNode) // 给某个节点添加子节点

四、复制节点

• cloneNode（true/false） //复制某个节点

五、替换节点

• replaceChild() //把一个给定元素里的一个子节点替换为另一个节点

六、删除节点

• removeChild（node） // 删除某个子节点

节点属性操作

• getAttribute（name） // 通过属性名称获取某个节点属性的值
• setAttribute（name,value） // 修改某个节点属性的值
• removeAttribute（name） //删除某个属性

访问关系的获取

查找子节点

.firstChild // 获取第一个子节点
.firstElementChild // 获取第一个元素节点
.lastChild // 获取最后一个子节点
.lastElementChild // 获取最后一个元素节点
.childNodes // 获取节点的所有子节点

获取相邻的节点

.previousSibling 获取已知节点的相邻的上一个节点
.nextSibling 获取已知节点的下一个节点

获取父节点

.parentNode //得到已知节点的父节点

替换节点

.replace（ newNode，oldNode） 从父节点中用新节点提换旧节点

修改文本节点

• appendData（data）:在文本节点后添加节点
• insertData（start，data）：在start处插入字符，start的开始值是0
• replaceData（start，length，data）：在start处用data替换length个字符
• deleteData（start,length）:从start处删除length字符