Element类型

tagName和nodeName的返回值是一样的，但在HTML中是大写的，在xml中是以源码标签为准的。为了统一比对，用toLowerCase()将结果转换为小写形式比较好。

获取到元素后，可以直接访问属性：

const element = document.querySelector('selector');
console.log(element.id);
console.log(element.className);
console.log(element.title);
console.log(element.lang);  // 语言
console.log(element.dir); // 文字方向
console.log(element.style); // 样式

针对于属性，有几个方法：getAttribute()、setAttribute()、removeAttribute()。

const element = document.querySelector('selector');
console.log(element.getAttribute('id'));
element.setAttribute('id', 'newId');
element.removeAttribute('id');

getAttribute方法可以获取自定义的属性。自定义的属性建议用 data- 作为前缀。属性不区分大小写。建议用小写。

有两个属性的值，使用getAttribute方法和用直接访问属性获取的值不同。

style属性，使用getAttribute方法获取的是字符串形式的样式值，而直接访问属性获取的是样式对象（CSSStyleDeclaration）。DOM对象的 style 属性以编程方式读写元素样式，因此不会直接映射为元素中 style 属性的字符串值。
事件处理程序，或者叫事件属性。这是一类属性，例如onclick、onmouseover等。使用getAttribute方法获取的是字符串形式的源代码，而直接访问属性获取的是事件处理程序的函数对象。

最佳实践：

仅使用getAttribute方法获取自定义属性

为元素设定属性，必须使用setAttribute方法。

attributes 属性

该属性包含 NamedNodeMap 实例，用于获取元素的所有属性。元素的每个属性都表示一个Attr节点，保存于 NamedNodeMap 实例中。

该实例对象有如下方法：

getNamedItem(name)：返回指定名称的属性节点。
setNamedItem(node)：将指定的属性节点添加到集合中。
removeNamedItem(name)：从集合中移除指定名称的属性节点。
item(index)：返回集合中指定索引位置的属性节点。

const attr_value = element.attributes.getNamedItem("id").nodeValue;
const attr_value2 = element.attributes.item(0).nodeValue;
const attr_value3 = element.attributes["id"].nodeValue;

创建元素

使用 document.createElement 方法创建元素节点。新元素的ownerDocument属性指向当前文档，也就是说，可以用document为该元素节点添加属性等。

const element = document.createElement("div");
element.setAttribute("id", "myDiv");
document.body.appendChild(element);

注意，创建不等于在页面上可见，要用 appendChild 等方法将元素添加到文档树中才可见。