Js节点操作

一、节点常用操作
document.createElement()用来生成网页元素节点,参数为元素的标签名
document.createTextNode()用来生成文本节点,参数为所要生成的文本节点的内容
node.appendChild()接受一个节点对象作为参数,将其作为最后一个子节点,插入当前节点
node.hasChildNodes()返回一个布尔值,表示当前节点是否有子节点
node.removeChild()接受一个子节点作为参数,用于从当前节点移除该子节点
node.cloneNode()用于克隆一个选中的节点。它接受一个布尔值作为参数,表示是否同时克隆子节点,默认是false,即不克隆子节点。注意: 不会克隆绑定到该元素上的事件
node.innerHTML返回该元素包含的 HTML 代码。该属性可读写,常用来设置某个节点的内容;(不属于W3C DOM规范)
node.innerText返回该元素包含的内容。该属性可读写
node.nextElementSibling返回紧跟在当前节点后面的第一个同级Element节点,如果当前节点后面没有同级节点,则返回null
node.previousElementSibling返回紧跟在当前节点前面的第一个同级Element节点,如果当前节点前面没有同级节点,则返回null
node.parentElement返回当前节点的父级Element节点
node.childNodes返回一个NodeList集合,成员包括当前节点的所有子节点(注意空格回车也算)
node.firstChild返回树中节点的第一个子节点,如果节点是无子节点,则返回null
node.lastChild返回该节点的最后一个子节点,如果该节点没有子节点则返回null


二、节点属性

属性操作的标准方法:
node.getAttribute()返回当前元素节点的指定属性。如果指定属性不存在,则返回null
node.setAttribute()为当前元素节点新增属性。如果同名属性已存在
node.hasAttribute()返回一个布尔值,表示当前元素节点是否包含指定属性
node.removeAttribute()从当前元素节点移除属性

三、css样式属性
节点对象.style.样式属性方式只能获取行内css样式,而写在 style 标签内的样式表,无法获取和修改。
getComputedStyle()接受一个节点对象,返回该节点对象最终样式信息的对象,所谓“最终样式信息”,指的是各种CSS规则叠加后的结果
注意: getComputedStyle() 是window对象下的方法,不是DOM对象

在具体使用的时候还有一些需要重点注意的细节:
1、名字需要改写,将横杠从CSS属性名中去除,然后将横杠后的第一个字母大写:
比如background-color写成backgroundColor
2、属性值都是字符串,设置时必须包括单位:
比如,divStyle.width的值不能写为100,而要写为100px

原文地址:https://www.cnblogs.com/fqh123/p/10578161.html