1. HTML元素

所有 HTML 元素都通过 HTMLElement 类型表示，包括其直接实例和间接实例。另外，HTMLElement直接继承 Element 并增加了一些属性。每个属性都对应下列属性之一，它们是所有 HTML 元素上都有的标准属性：

• id，元素在文档中的唯一标识符；
• title，包含元素的额外信息，通常以提示条形式展示；
• lang，元素内容的语言代码（很少用）；
• dir，语言的书写方向（”ltr”表示从左到右，”rtl”表示从右到左，同样很少用）；
• className，相当于 class 属性，用于指定元素的 CSS 类（因为 class 是 ECMAScript 关键字，所以不能直接用这个名字）。

所有这些都可以用来获取对应的属性值，也可以用来修改相应的值。

<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>

这个元素中的所有属性都可以使用下列 JavaScript 代码读取：

let div = document.getElementById("myDiv"); 
alert(div.id); // "myDiv" 
alert(div.className); // "bd" 
alert(div.title); // "Body text" 
alert(div.lang); // "en" 
alert(div.dir); // "ltr"

而且，可以使用下列代码修改元素的属性：

div.id = "someOtherId"; 
div.className = "ft"; 
div.title = "Some other text"; 
div.lang = "fr"; 
div.dir ="rtl";

• 并非所有这些属性的修改都会对页面产生影响。比如，把 id 或 lang 改成其他值对用户是不可见的（假设没有基于这两个属性应用 CSS 样式），而修改 title 属性则只会在鼠标移到这个元素上时才会反映出来。
• 修改 dir 会导致页面文本立即向左或向右对齐。
• 修改 className 会立即反映应用到新类名的 CSS 样式（如果定义了不同的样式）。

2. 取得属性

• 每个元素都有零个或多个属性，通常用于为元素或其内容附加更多信息。
• 与属性相关的 DOM 方法主要有 3 个：getAttribute()、setAttribute()和 removeAttribute()。
• 这些方法主要用于操纵属性，包括在 HTMLElement 类型上定义的属性。

<div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        // 1. 获取元素的属性值
        // (1) element.属性
        console.log(div.id);
        //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 
                //我们程序员自己添加的属性我们称为自定义属性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
    </script>

let div = document.getElementById("myDiv"); 
alert(div.getAttribute("id")); // "myDiv" 
alert(div.getAttribute("class")); // "bd" 
alert(div.getAttribute("title")); // "Body text" 
alert(div.getAttribute("lang")); // "en" 
alert(div.getAttribute("dir")); // "ltr"

• 注意传给 getAttribute()的属性名与它们实际的属性名是一样的，
• 因此这要传”class”而非”className”（className 是作为对象属性时才那么拼写的）。
• 如果给定的属性不存在，则 getAttribute()返回 null。

getAttribute()方法也能取得不是 HTML 语言正式属性的自定义属性的值:

<div id="myDiv" my_special_attribute="hello!"></div>

这个元素有一个自定义属性``my_special_attribute，值为”hello!”。可以像其他属性一样使用getAttribute()取得这个属性的值：

let value = div.getAttribute("my_special_attribute");

注意: 属性名不区分大小写，因此”ID”和”id”被认为是同一个属性。另外，根据 HTML5 规范的
要求，自定义属性名应该前缀 data-以方便验证。

3. 设置属性

• getAttribute()配套的方法是 setAttribute()，
• 这个方法接收两个参数：
  • 要设置的属性名和属性的值。如果属性已经存在，则 setAttribute()会以指定的值替换原来的值；
  • 如果属性不存在，则setAttribute()会以指定的值创建该属性。

div.setAttribute("id", "someOtherId"); 
div.setAttribute("class", "ft"); 
div.setAttribute("title", "Some other text"); 
div.setAttribute("lang","fr"); 
div.setAttribute("dir", "rtl");

• setAttribute()适用于 HTML 属性，也适用于自定义属性。另外，使用 setAttribute()方法设置的属性名会规范为小写形式，因此”ID”会变成”id”。
• 因为元素属性也是 DOM 对象属性，所以直接给 DOM 对象的属性赋值也可以设置元素属性的值

  div.id = "someOtherId"; 
  div.align = "left";      //改变元素属性的值

注意: 在 DOM 对象上添加自定义属性，如下面的例子所示，不会自动让它变成元素的属性：

div.mycolor = "red"; 
alert(div.getAttribute("mycolor")); // null（IE 除外）

• 这个例子添加了一个自定义属性 mycolor 并将其值设置为”red”。在多数浏览器中，这个属性不会自动变成元素属性。
• 因此调用 getAttribute()取得 mycolor 的值会返回 null。

4. 删除属性

removeAttribute()用于从元素中删除属性。这样不单单是清除属性的值，而是会把整个属性完全从元素中去掉

div.removeAttribute("class");

这个方法用得并不多，但在序列化 DOM 元素时可以通过它控制要包含的属性。

5. 自定义数据属性

• HTML5 允许给元素指定非标准的属性，但要使用前缀 data-以便告诉浏览器，
• 这些属性既不包含与渲染有关的信息，也不包含元素的语义信息。
• 除了前缀（建议是data开头），自定义属性对命名是没有限制的，data-后面跟什么都可以。

操作自定义属性：

//设置
element.setAttribute(属性名,属性值) // 这种方式设置的自定义属性会被解析到html中
element.自定义属性名 = 自定义属性值 // 不会被解析到html
//获取
element.getAttribute(属性名) //获取通过setAttribute方式设置的自定义属性
element.属性名 //获取内置属性或通过 .或[]方式设置的自定义属性
//删除自定义属性
element.removeAttribute(属性名)
//H5新增特性 自定义属性 要求用data-开头,对于此类自定义属性可通过dataset属性获取
element.dataset.test = 'hello' //设置了data-test属性，会显示在结构中 支持ie11及以上
element.setAttribute('data-test','hello') //也设置了data-test属性，无兼容性问题
console.log(element.dataset.test) //获取data-set属性
console.log(element.getAttribute('data-test')) //传统方式获取data-set属性

6.创建元素

可以使用 document.createElement()方法创建新元素。这个方法接收一个参数，即要创建元素的标签名。在 HTML 文档中，标签名是不区分大小写的，而 XML 文档（包括 XHTML）是区分大小写的。

要创建

//创建元素 document.createElement(标签名)
//将元素o1插入元素o2内部  o2.appendChild(o1) 或 o2.insertBefore(o1,已存在的o1的子元素)
//先创建
var div = document.createElement('div')
//再插入页面
document.body.appendChild(div) //追加到最末尾
document.body.insertBefore(div,document.body.children[0]) //插入到最前面

div.id = "myNewDiv"; 
div.className = "box";

document.body.appendChild(div);