DOM—Element原型链

1. 属性

children(只读)

返回一个节点的所有子元素(也叫标签)的 HTMLCollection 集合

var childrenList = node.children;
childrenList.length //标签元素集合的长度
通过children[i]来获取每个子元素

id

与全局属性id相对应，获取元素的id

var idStr = element.id; // Get the id
element.id = idStr; // Set the id

tagName

返回当前元素的标签名，并且在HTML中显示的是大写的标签名。

<span id="born">When I was born...</span>
var span = document.getElementById("born");
alert(span.tagName);//弹出“SPAN”

className

使用名称className而不是class作为属性名,是因为”class” 在JavaScript中是个保留字

//获取或设置指定元素的class属性的值，是带有空格的字符串

elementNode.className = '新cass名字';`  //这样会完全覆盖原来的class属性值
elementNode.className += ' 新的class名'; //这样才会是添加class值，前面要有个空格

classList(只读)

//返回一个元素的类属性值的实时 DOMTokenList 列表。
const classTokenList = elementNode.classList;
//返回DOMTokenList的操作
classTokenList.length //获得长度
classTokenList.contains("d");//类属性值是否包含d，包含则返回true
classTokenList.add("d")
classTokenList.add("d", "e", "f")//添加类属性值
classTokenList.remove("d")
classTokenList.remove("d", "e", "f")//删除类属性值
classTokenList.toggle("d");//类属性值有d就移除并返回false，无d就添加并返回true
classTokenList.toggle("d", "false");//删除d，且不会再度添加
classTokenList.toggle("d", "false");//添加d，且不会再度删除
classTokenList.replace("oldT", "newT");//newT替换oldT

innerHTML

element.innerHTML; //该属性设置或获取HTML语法表示的元素的后代
element.innerHTML = "新的HTML内容"

outerHTML

element.outerHTML; //该属性获取该元素本身和其后代的序列化HTML片段
element.outerHTML = "新的HTML内容" //替换自己和后代HTML内容

2. 方法

hasAttribute

返回一个布尔值，指示该元素是否包含有指定的属性（attribute）。

var result = element.hasAttribute(attributeName);

getAttribute

该方法返回元素上一个指定的属性值。如果指定的属性不存在，则返回 null 或 "" （空字符串）

let attribute = element.getAttribute(attributeName);

setAttribute

设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。

element.setAttribute(name, value);

removeAttribute

该方法从指定的元素中删除一个属性

element.removeAttribute(attrName);

3. 各种事件

参考mdn文档，里面有详细的介绍mdn-DOM-Element-Events

4. 参考

以上内容为mdn文档的部分总结，来源于mdn-DOM-Element