DOM核心——Element类型

theme: channing-cyan

这是我参与8月更文挑战的第18天，活动详情查看：8月更文挑战

Element 是一个通用性非常强的基类，Element表示html对外暴露访问元素标签名，节点和属性的能力。

html元素

所有html元素都通过HTMLElement类型表示，简单说一下所有html元素都有的基本属性。

1. id，表示唯一标识符。
2. title，包含元素的信息。
3. lang，属性规定元素内容的语言。
4. dir，表示我们书写方向，(几乎不用)
5. 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);

image.png

获取属性

每个元素都有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()方法来渲染到页面上。

image.png