DOM的基本操作

什么是DOM

1：文档对象模型（DocumentObjectModel,DOM）

2：DOM定义了访问和操作HTML文档的标准方法。

3：DOM将HTML 文档表达为树结构。

其他查询元素的方法：

　　document.querySelector(" ")　　//获取元素

　　　　　　　　　　　　　　　　　.表达根据类查找

　　　　　　　　　　　　　　　　　#表示根据id查找

　　　　　　　　　　　　　　　　　直接写表示根据标签名查找

　　　　　　　　　　　　　　　　　[name = 值]表示根据某一个属性查找

document.querySelectorAll(" ")       　// 获取元素集合（就算页面上只有一个元素，取出的也是集合）

eval(" ")   // 通过id名称获取元素

直接通过id名获取元素（部分IE不支持）

修改元素：

　　元素（节点）是不能直接修改的，可以先删除，再创建。

对某元素的各种属性修改，比如：

　　div1.innerHTML= "新的内容"； //演示innerText和outerHTML

　　input1.value = "新的内容"；

　　input.type = "button";  //将input1元素的类型改为按钮

　　span1.style.color = "red";

document.createElement(elementName);

指再文档下创建某个标签，elementName指标签名，如div，ul，li，img，a等等

element1.appendChild(element2);

指将element2元素，放入element1元素的内容，以追加的形式存放。

删除某元素：

ul1、removeChild(li3);  // 在ul1元素内，移除li3元素

注意：

　　1：只在子节点下删除，想删除哪个节点，必须找到该节点的父节点，parentNode即父节点。

　　2：只能删除1个节点，不能直接删除集合。

　　3：如果用变量保存一个集合，对集合内的某个元素进行修改后，

　　　　该变量存储的元素会发生变化。比如：

　　　　var arr=document.getElementsByTagName("div");

　　　　document.body.removeChid(arr[0]); //代码执行完，arr里面所有的元素都会向前进一位

　　//　即原来的arr[1]由arr[0]表示。

DOM :自定义属性：　元素上有些是系统默认就含有的属性，比如id、title、name、style等。

　　自定义的属性： 有些是根据自己喜好定义出来的属性，比如abc、xxx等。

　　　　　　　　　　自定义属性通常来做数据存储。（可理解成变量赋值）。

　　html：

　　　　<div id= "div1" a="123" data-b="hello"></div>

　　解释：在上文代码中，id是div的自带属性，a和b都是自定义属性，其中a是旧的写法，b是新的写法。

html：

　　<div id="div1" a= "123" data-b = "hello"></div>

操作属性的方法有很多种，不同的方法对应的是不同类型的属性。

最常用的写法：

　　div.c = "你好";　　//设置属性

　　console.log(div.c); //获取属性

注：使用这种方法获取自定义属性时，必须使用js的方法设置属性，使用html的方法设置是无法获取的。

html：

　　<div id = "div1" a = "123" data-b = "hello"> </div>

另一种比较常用的写法：

　　div1.setAttribute("d","你好"); 　　//设置属性

　　console.log(div1.getAttribute("d")); //获取属性

注： 使用这种方法设置的自定义属性，其内容会自动转为字符串。

html：

　<div id= "div1" a="123" data-b = "hello" ></div>

　自定义属性中的新的写法：

　　div1.dataset.a = "你好"; //设置属性

　　console.log(div1.dataset.e); //获取属性

注：有些浏览器不支持。

html:

　　<div id="div1" a= "123" data-b = "hello"></div>

　存在，但不推荐的写法：

　　div1.attribute.f = "你好"； /设置属性

　　console.log(div1.attributes.f); //获取属性

不推荐使用，了解即可，因为使用比较复杂。

1，如果直接在html中写行间属性，通过该方法获取时返回属性节点。

2，如果即在行间设置了属性，也通过了js设置了属性，获取时返回属性节点。

3，如果没在行间设置属性，仅在js设置了属性，获取时返回数据。

如果是系统默认就含有的属性，通过不同方法设置的属性，可以通过不用的方法获取。

如果是根据自己喜好定义出来的属性，不用的方法设置的，是不能通过不同方法获取的。

例如： 用setAttribute设置后，可以用attributes获取，但用attributes设置，不能用getAttribute获取；

在实际开发中，以.这种方法为主，除非有要求说要在html中保存属性，否则我们不采用其他方法。

真实开发中，如果html中已经存在了自定义属性，需要我们通过js拿到自定义属性，看这个属性是怎么定义的，如果没有data前缀，则用getAttribute，否则用dataset。

div1.aa = [1,2,3];

console.log(div1,aa); //[1,2,3];

div1.setAttribute("aa",[1,2,3]);

console.log(div1.getAttribute("aa")); // "1,2,3"

区别 ：

　　1: 用 .aa 方法设置后，如果设置一个数组，能够取出数组，而setAttribute设置的是.toSring() 后的结果。

　　2：用 .aa方法设置后，html上看不到，而setAttribute是能够看到的。