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、相关链接

博客园