dom总结（小白专用）

一、DOM是什么

HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 就是Document Object Model，文档对象模型。

二、节点是什么

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

1. 整个文档是一个文档节点

2. 每个 HTML 元素是元素节点
   也就是说网页的HTML标签元素是元素节点。例如 p 和span元素

3. HTML 元素内的文本是文本节点
   网页中的HTML标签内容。文本节点的节点类型nodeType值是3，节点名称nodeName值是’#text’，nodeValue值是标签内容值。

4. 每个 HTML 属性是属性节点
   属性节点用来对元素做出更具体的描述,其实就是网页中HTML标签的属性，它只存在于元素的attributes属性中。
   title="a gentle reminder"即为一个属性节点

5. 注释是注释节点
   HTML注释是注释节点。注释节点的节点类型nodeType的值为8，节点名称nodeName的值为’#comment’，nodeValue的值为注释的内容。

三、获取元素

dom查找方法

1. 通过元素id
   document.getElementById(id); 返回一个对象,(返回按id属性查找的第个对象的引用。)
   例如document.getElemntById(“id_reminder”);

2. 通过标签名字TagName
   document.getElementsByTagName(“p”); 返回一个对象数组,(返回按带有指定名称name 查找的对象的集合，由于一个文档中可能会有多个同名节点(如复选框、 单选按钮),因此返回的是元素数组)

3. 通过类名字ClasName(HTML5支持)
   document.getElementsByClassName(“class_reminder”); 返回一个对象数组

4. 根据name属性的值获取元素（getElementsByName）
   document.getElementsByClassName(“name属性的值”); 返回值是一个伪数组

5. 获取html的方法（document.documentElement）

6. 获取body的方法（document.body）

四.获取和设置属性

1.getAttribute获取属性值
object.getAttribute(attribute);
例如:

<div id="demo" data="123"></div>
var d1 = document.getElementById('demo');
    var value = d1.getAttribute('data');
    console.log(value);  ///输出 123

注意:要先找到这个元素,再获取当前元素的属性值。

2.setAttribute设置相应属性的属性值
object.setAttribute(attribute,value);

<div id="demo" data="123"></div>
var d2= document.getElementById('demo');
    d2.setAttribute('data',456);   //设置属性data的值为  456
    var value = d2.getAttribute('data',456);
    console.log(value);///输出 456