DOM 节点

1、方法 方法 描述/作用 使用 备注 getElementById() 返回带有指定 ID 的元素。 – – getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 – – getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。 – – appendChild() 把新的子节点添加到指定节点。 – – removeChild() 删除子节点。 – – remove() 移除自身节点。 – – replaceChild() 替换子节点。 – – insertBefore() 在指定的子节点前面插入新的子节点。 – – createAttribute() 创建属性节点。 – – createElement() 创建元素节点。 – – createTextNode() 创建文本节点。 – – getAttribute() 返回指定的属性值。 – – setAttribute() 把指定属性设置或修改为指定的值。 – –

W3school - 属性

2、属性 属性 描述/作用 使用 备注 innerHTML 获取元素内容的最简单方法是使用 innerHTML 属性。 – – nodeName 属性规定节点的名称。 – – nodeValue 属性规定节点的值 – – nodeType 属性返回节点的类型。nodeType 是只读的。 – – offsetHeight 获取元素高度 – –

W3school - 属性

3、设置 style 属性 3.1、直接设置 style 对象

1.el.style.color = '#b50029;' 2.el.style.fontSize = '30px;' 3.el.style['font-size'] = '30px;'

3.2、设置 style 属性

1.el.setAttribute('style', 'color: red;') 2.el.setAttribute('style', 'font-size: 30px;') 3.el.setAttribute('style', 'font-size: 30px;') 4.el.setAttribute('style', 'color: red;' + 'font-size: 30px;' + 'background-color: green;')

3.3、设置 cssText

1.el.style.cssText = "color: red; font-size: 30px;" 2.el.style.cssText += 'background-color: yellow;' 3.el.style.cssText = "color: red; font-size: 30px;" 4.el.style.cssText = "text-decoration: line-through;"

3.4、相关链接

博客园