DOM 核心——Element 类型

Element 是一个通用性非常强的基类，Element 表示 html 对外暴露访问元素标签名，节点和属性的能力。html 元素所有 html 元素都通过 HTMLElement 类型表示，简单说一下所有 html 元素都有的基本属性。

id，表示唯一标识符。title，包含元素的信息。lang，属性规定元素内容的语言。dir，表示我们书写方向，(几乎不用)className，class 属性，也就是我们常说的类。（这个类不是 js 中的类）

<div id="jackson" title="name" class="myName" dir="ltr" lang="en">我是 jackson</div>

let jackson = document.getElementById('jackson');console.log(jackson.id);console.log(jackson.title);console.log(jackson.className);console.log(jackson.dir);console.log(jackson.lang);

获取属性每个元素都有 0 个或者多个的属性，我们说三个与 DOM 相关的方法：getAttribute(),setAttribute(),removeAttrbute()。这些方法主要是操作属性。

getAttribute()方法主要用于获取属性的值，它也可以获取自定义属性的值。

 <div id="jackson" title="name" abcd="abcd" class="myName" dir="ltr" lang="en">我是jackson</div>  let jackson = document.getElementById('jackson');  console.log(jackson.getAttribute('id'),jackson.getAttribute('abcd'))//jackson abcd

setAttribute()是设置属性的值。该方法接收俩个参数，一个是要设置的属性名，一个是该属性值，如果没有的话会自动创建，如果有的话直接覆盖。

jackson.setAttribute('id','bear');console.log(jackson.getAttribute('id'));//bear

注意：setAttribute()设置的属性名会自动变成小写

removeAttrbute()是移除，会把整个属性和值都删掉，一般我们在设置比如选项卡中的 active 可以使用移除属性再给当前项设置属性。

jackson.removeAttribute('abcd');console.log(jackson.getAttribute('abcd'));//null

attributes 属性

attributes 属性包含一个 NameNodeMap 实例，元素的每个属性都表示为一个 attr 节点，并且保存在 NameNodeMap 对象中。NameNodeMap 有四个方法。

getNamedItem(name)，返回 nodeName 属性等于 name 的节点

removeNamedItem(name)，删除 nodeName 属性等于 name 的节点

setNamedItem(node)，向列表中添加 node 节点，以其 nodeName 为索引

item(pos)，返回索引位置 pos 处的节点

这四个其中前三个和我们上面的获取，修改，移除属性差不多，一般我们大多数还是用最上面的写法。

创建元素

我们可以使用 document.createElement()方法创建元素。它接受一个参数，是我们要创建的元素的标签名称（不区分大小写）。

    let p = document.createElement('p');    p.id = 'myP';    document.body.appendChild(p);

注意：我们设置这些属性需要通过 appendChild()方法来渲染到页面上。